mdn / browser-compat-data

This repository contains compatibility data for Web technologies as displayed on MDN
https://developer.mozilla.org
Creative Commons Zero v1.0 Universal
4.95k stars 1.98k forks source link

AbortSignal.timeout() in fetch request always responds with AbortError but not TimeoutError in chromium based browser #20381

Open AayushKarna opened 1 year ago

AayushKarna commented 1 year ago

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/timeout

What specific section or headline is this issue about?

No response

What information was incorrect, unhelpful, or incomplete?

I have following code:

const getData = async function () {
  try {
    const response = await fetch(`${API_URL}/cars`, {
      signal: AbortSignal.timeout(5_000),
    });

    console.log(response);
  } catch (err) {
    console.log(err.name); //AbortError
    console.dir(err);
  }
};

getData();

Here, getData uses fetch() to retrieve data from an API endpoint, I set signal property of request to AbortSignal.timeout(5_000) to implement timeout.

According to the docs, AbortSignal.timeout(TIME_IN_MS) will return AbortSignal that will automatically abort after specified time. The signal aborts with either TimeoutError on timeout, or with AbortError due to pressing a browser stop button, closing the tab (or some other inbuilt "stop" operation). The response that I get every time when running getData() is AbortError with message The user aborted a request. and never TimeoutError, even when I set browser to throttle to slow 3G and set time to 100ms. I also tried setting the response to take 10s in the server and in the front end to no throttle and timeout to 9000ms.

This happens only for chromium-based browsers like Google Chrome and Microsoft Edge, but produces expected output in Firefox browser.

What did you expect to see?

TimeoutError as stated in chromium-based browsers like stated in the docs.

Do you have any supporting links, references, or citations?

In Chromium Based Browsers (Microsoft Edge and Google Chrome): image image

In Firefox Browswer: image

Do you have anything more you want to share?

No response

MDN metadata

Page report details * Folder: `en-us/web/api/abortsignal/timeout` * MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/timeout * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/abortsignal/timeout/index.md * Last commit: https://github.com/mdn/content/commit/135b8311a5e3d12789e8421845be3ce026ef72b8 * Document last modified: 2023-04-06T14:57:25.000Z
teoli2003 commented 1 year ago

This is clearly a bug in Chromium-based browsers. The specs say:

AbortSignal.timeout(milliseconds)

Did you report it to Chromium? Depending on the response we may want to add a note in the BCD table.

AayushKarna commented 1 year ago

Yes I have opened an issue in chromium, here is the link to it: https://bugs.chromium.org/p/chromium/issues/detail?id=1431720

teoli2003 commented 1 year ago

Let's wait for an answer there, then. They may have a rationale for why they deviated from the spec (besides not being precise).

Josh-Cena commented 1 year ago

This is confirmed to be a Chromium bug. It should be transferred to BCD.

caugner commented 1 week ago

The response that I get every time when running getData() is AbortError with message The user aborted a request. and never TimeoutError, even when I set browser to throttle to slow 3G and set time to 100ms. I also tried setting the response to take 10s in the server and in the front end to no throttle and timeout to 9000ms.

This happens only for chromium-based browsers like Google Chrome and Microsoft Edge, but produces expected output in Firefox browser.

I cannot reproduce the issue with Chrome 129, and this example:

getData = async function () {
  const signal = AbortSignal.timeout(1);
  try {
    const response = await fetch("https://www.example.com/", {
      signal,
    });

    console.log(response);
  } catch (err) {
    console.log("signal.reason", signal.reason);
    console.log("error.name", err.name); //AbortError
  }
};

getData();

Both signal.reason and error are a TimeoutError for me.

caugner commented 1 week ago

This seems to have been fixed in Chrome 124:

Chrome 123:

image

Chrome 124:

image
caugner commented 1 week ago

The fix was in this commit belonging to bug 40071725 (which has milestone 119, but was backed out and re-applied in 124).