SSE connection is being cut off with error - ERR_HTTP2_PROTOCOL_ERROR 200 (OK)

[usmdt]

Hello,

I've been experimenting with various SSE libraries for my Angular app and found eventsource to be the most stable. However, I've encountered an issue where the stream sometimes gets cut off after re-initializing it.

Here's the scenario: when the dropdown value changes, a new stream is initialized with new parameters. Unfortunately, frequently changing the dropdown values often causes the stream to get stuck after fetching a few bytes of data. After about 45 seconds it returns error ERR_HTTP2_PROTOCOL_ERROR 200 (OK), the stream reinitializes and then works fine.

I initially suspected that Nginx might be the cause since it works perfectly fine locally. However, when I tried another library, event-source-polyfill, I couldn't reproduce the issue.

Has anyone else experienced something similar? I'll paste my code here for reference.

Version used: "eventsource": "^3.0.2"

  init(param: string): Observable<T> {
    if (this.events$ === null || this.sseState() == 'CLOSED' || this.sseState() == 'UNKNOWN') {
      console.log('Initializing SSE Stream.');
      this.events$ = new Observable((observer) => {
        this.close();
        this.eventSource = this.getEventSource(
          `${'/param/' + encodeURIComponent(param) + '/stream'}`,
        );

        this.eventSource.onmessage = this.messageHandler(observer);
        this.eventSource.onerror = this.errorHandler(observer);
      });
    }

    return this.events$;
  }

  getEventSource(url: string): EventSource {
    const token = this.authService.getAccessToken();
    url = this.config.apiUrl + url;
    return new EventSource(url, {
      fetch: (input, init) =>
        fetch(input, {
          ...init,
          headers: {
            ...init?.headers,
            Authorization: `Bearer ${token}`,
          },
        }),
    });
  }

Any help is appreciated!

[usmdt]

I just tried to downgrade eventsource version to "^2.0.2" and it seem to help. Anyway the question still remains :)

[rexxars]

It uses the browsers' fetch implementation by default - I'd be curious to hear if you get the same error if you just do a fetch call to the same endpoint?

async function fetchAndStream(url) {
  const response = await fetch(url);

  if (!response.body) {
    console.error("Readable stream not supported");
    return;
  }

  const reader = response.body.getReader();
  const decoder = new TextDecoder();

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;

    const chunk = decoder.decode(value, { stream: true });
    console.log(chunk);
  }

  console.log("Stream complete");
}

fetchAndStream('https://your-sse-endpoint.com/stream');