How to debug Event Source in JS?

I have the following code in js:

var eventSource = new EventSource(base_url + 'files/chatgpt.php?q=' + $el.val());
var div = document.getElementById('divID');

eventSource.onmessage = function (e) {
   if(e.data == "[DONE]"){
       div.innerHTML += "<br><br>Hello";
   }
   div.innerHTML += JSON.parse(e.data).choices[0].text;
};

eventSource.onerror = function (e) {
   console.log(e);
};

And the onerror executes, so I’m keep getting this in the console:

enter image description here

Also this is the PHP code I have:

$opts = [
   'prompt' => $_GET["q"],
   'temperature' => 0.9,
   "max_tokens" => 150,
   "frequency_penalty" => 0,
   "presence_penalty" => 0.6,
   "stream" => true,
];

header('Content-type: text/event-stream');
header('Cache-Control: no-cache');

$open_ai->completion($opts, function ($curl_info, $data) {
   echo $data . "<br><br>";
   echo PHP_EOL;
   ob_flush();
   flush();
   return strlen($data);
});

Well, what’s the error? how can I find it?