Event Stream data not showing in Chrome console

Question

I have an EventSource listener on my frontend calling a complicated backend scheme. This code block is written in Typescript.

import * as EventSource from 'eventsource';      

private streamData() {
    let source = new EventSource('http://localhost:3000/websocket/server/stream');

    source.onopen = (e) => {

    };

    source.onmessage = (e) => {
      console.log('id: ' + (<any>e).lastEventId + '; type: ' + e.type + ' data: ' + e.data);
    };
  }

And I send back the following response to my server :

res.write('id: ' + this.messageId++ + '\n');
res.write('type: message\n');
res.write('data: ' + message + '\n\n');
res.flush();

---

Now, on the Chrome console, I get all the data needed.

However, on the xhr monitor, I cannot see the EventStream data.

I get the info on my frontend, so this is not a blocking issue for me, but may pose some problems later in debugging.

Answer 1

I had the same issue. The data does not show up when you are using the eventsource polyfill only when you use the built in browser implementation of the EventSource class.