How to close the connection from client side about fetch-event-source

[pociej]

@ChepteaCatalin this doesnt work. Im not sure yet what the solution is but I checked above and after controller.abort() call messages are still there. onmessage callback is still firing.

[Systemcluster]

Calling controller.abort() in onerror can't cancel retries with this library.

onerror is called here, after which the retry timer will be reset when it doesn't throw, without checking for aborted again:

fetch-event-source/src/fetch.ts

Lines 129 to 136 in a052949

	if (!curRequestController.signal.aborted) {
	// if we haven't aborted the request ourselves:
	try {
	// check if we need to retry:
	const interval: any = onerror?.(err) ?? retryInterval;
	window.clearTimeout(retryTimer);
	retryTimer = window.setTimeout(create, interval);
	} catch (innerErr) {

The retry timer will call create where a new AbortController is created that starts non-aborted:

fetch-event-source/src/fetch.ts

Lines 102 to 104 in a052949

	async function create() {
	curRequestController = new AbortController();
	try {

Retries will be stopped if controller.abort() was called in onopen, onmessage or onclose, but calls in onerror won't affect it.

Throwing in onerror is absolutely the correct thing to do to stop the request, which is also shown in the readme:

fetch-event-source/README.md

Lines 83 to 86 in a052949

	onerror(err) {
	if (err instanceof FatalError) {
	throw err; // rethrow to stop the operation
	} else {

[nickscamara]

For those having the issue in React, this works:

const [ abortController, setAbortController ] = useState(new AbortController());

fetch(
   signal: abortController.signal
   // ...
)

function stopResponseSSE() {
    abortController.abort();
    setAbortController(new AbortController());
}

As June mentioned, "once an instance of AbortController is used, we need to create a new instance to reset the value."

In React, you most likely will need to set the state with a new Abort Controller.

Hope this helps!

[ChepteaCatalin]

const controller = new AbortController()
const signal = controller.signal

pass signal to the object from the second parameter of fetchEventSource()

When you want to close the connection, just call controller.abort()

https://stackoverflow.com/questions/31061838/how-do-i-cancel-an-http-fetch-request

[JuneDan]

Once an instance of AbortController is used, we need to create a new instance to reset the value.
eg:

function stopResponseSSE() {
    ctrl.abort()
    ctrl = new AbortController();
}

[jchiare]

Curious about this too. Aborting the fetch request didn't seem to work for me. Workaround I use is to throw an error in the onerror and onclose functions

        onclose() {
          // do something
          throw new Error(); // hack to close the connection
        },
        onerror() {
          // do something
          throw new Error(); // hack to close the connection

[xiaohundun]

@ChepteaCatalin this doesnt work. Im not sure yet what the solution is but I checked above and after controller.abort() call messages are still there. onmessage callback is still firing.

Make sure your controller or signal are the same. Especially in React.

[lucrus73]

its easy to do in modern browsers follow this.

Yes, it's easy and it's just as documented, except it doesn't close the connection, at least not in my case.

[Codefa]

its easy to do in modern browsers follow this.

 const controller = new AbortController()
 const { signal } = controller

 await fetchEventSource('your API', {
	onmessage(ev) {
	  console.log('data', ev.data)
	},
	onclose() {
         controller.abort()
	 // do something
       },
       onerror() {
	// do something
       },
       signal,
   })

and When you want to close the connection, just call controller.abort()

[bsaphier]

For those having the issue in React, this works:

const [ abortController, setAbortController ] = useState(new AbortController());

fetch(
   signal: abortController.signal
   // ...
)

function stopResponseSSE() {
    abortController.abort();
    setAbortController(new AbortController());
}

As June mentioned, "once an instance of AbortController is used, we need to create a new instance to reset the value."

In React, you most likely will need to set the state with a new Abort Controller.

Hope this helps!

Better to use a useRef to store the abortController instead of useState as you'll end up triggering a (likely undesired) re-render when you call setAbortController(new AbortController());

[rzec-allma]

As @Systemcluster said, the only thing that works to stop the retry functionality is to throw an error in the onerror callback.

If this is the correct thing to do, it would probably help to add a small section to the readme about this (I would create a PR however I am not sure if this is the expected way to handle this cause or if throwing an error just happens to do what I want).