Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
AayushKarna opened this issue Apr 9, 2023 · 7 comments · May be fixed by #24688
Assignees
Labels
data:api 🐇 Compat data for Web APIs. https://developer.mozilla.org/docs/Web/API

Comments

@AayushKarna
Copy link

AayushKarna commented Apr 9, 2023

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
@teoli2003
Copy link
Contributor

teoli2003 commented Apr 9, 2023

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
Copy link
Author

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
Copy link
Contributor

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
Copy link
Member

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

@sideshowbarker sideshowbarker transferred this issue from mdn/content Jul 20, 2023
@queengooborg queengooborg added the data:api 🐇 Compat data for Web APIs. https://developer.mozilla.org/docs/Web/API label Mar 15, 2024
@caugner
Copy link
Contributor

caugner commented Oct 10, 2024

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
Copy link
Contributor

caugner commented Oct 10, 2024

This seems to have been fixed in Chrome 124:

Chrome 123:
image

Chrome 124:
image

@caugner
Copy link
Contributor

caugner commented Oct 10, 2024

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

@caugner caugner self-assigned this Oct 10, 2024
@caugner caugner linked a pull request Oct 10, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
data:api 🐇 Compat data for Web APIs. https://developer.mozilla.org/docs/Web/API
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants