Log style for event-stream with fetch

event-stream-log.js

// Because of the chromium issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1025893
// Event data does not show up in the Chrome EventStream subtab in Network tab.

// So I created this log style to make it easy to analyze and view event data. 
// It also doesn't make too much noise in the console panel.

const log_data = [];
const EventStreamTag = [
    `%cEventStream`,
    'color: white;background:#C5C5C5;font-weight: bold; font-size:8px; padding:2px 6px; border-radius: 5px'
];

fetchEventSource(serverUrl, {
  method: 'POST',
  body: formData,
  signal: signal,
  onmessage: (msg) => {
    if (Build.isDev) {
      log_data.push({ content: msg});
    }
  },
  onclose: () => {
    if (Build.isDev) {
      console.groupCollapsed(...EventStreamTag, 'Some Desctiption')
      console.table(log_data);
      console.groupEnd()
    }
  },
  onerror: (err) => {
    if (Build.isDev) {
      console.groupCollapsed(...EventStreamTag, 'Some Desctiption')
      console.error(err);
      console.table(log_data);
      console.groupEnd()
    }
    throw err // stop retrying
  }
});

How to use it?

fetchEventSource is undefined.

@Webbrother
It's an Azure EventSource wrapper: https://github.com/Azure/fetch-event-source/.