net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK) and abortController don't work

[YakumoAoi]

trafficstars

const abortController = new AbortController()
  await fetchEventSource(
    `https://xxx/xx/xx/xx?query=${questionSended}&dialog_id=${this.currentDialogID}&is_stream=1`,
    {
      headers: {
        Authorization: userinfo.token
      },
      signal: abortController.signal,
      openWhenHidden: true,
      onopen: async response => {
        console.log('onopen', response)
        if (response.status !== 200) {
          throw new Error(`${response.status}(${response.statusText})`)
        }
        return
      },
      onmessage: res => {
        const data = JSON.parse(res.data)
        console.log(data)
        if (data.plugin_id) return
        if (data.error_code) {
          throw new Error(`${data.error_code}(${data.error_msg})`)
        }
        if (data.prompt) {
          this.relatedQuestion = data.prompt
        } else {
     
        }
      },
      onclose: () => {
        console.log('closed')
      },
      onerror: err => {
        console.log('err', err)
        if (abortController.signal.aborted) return
        this.dialogDetailList[contextIndex].answer =
          'error'
        abortController.abort()
      }
    }
  )

The error occured in the middle of request, and the browser start another request to continue receiving stream data. And the same error occured. such back and forth And l can read true value of 'abortController.signal.aborted' in error callback, but the request still continue

[SadEaston]

same error

[Cai-Quan]

Me too. Have you solved the problem?

[mqyqingfeng]

'use client';

import { fetchEventSource } from '@microsoft/fetch-event-source';
import { useEffect, useState } from "react";

export default function Home() {

  const [text, setText] = useState('')

  useEffect(() => {
    const ctrl = new AbortController();
    fetchEventSource('/api/sse4', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        foo: 'bar'
      }),
      signal: ctrl.signal,
      onmessage: function (event) {
        console.log('Received message:', event.data)
        setText((pre) => pre + event.data);
      }
    });

    return () => {
      ctrl.abort()
    }
  }, [])

  return (
    <p>{text}</p>
  );
}

[wooly99]

https://github.com/Azure/fetch-event-source/issues/46 https://github.com/Azure/fetch-event-source/issues/24

It seems that you need to throw an error in the onerror callback