Last active
November 16, 2023 22:39
-
-
Save huoyixin/82a8deb64aa6b380f89d6048a44dda11 to your computer and use it in GitHub Desktop.
Log style for event-stream with fetch
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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/.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How to use it?
fetchEventSource
is undefined.