AbortError

What is AbortError?

AbortError is thrown when an asynchronous operation is intentionally cancelled before it completes. Unlike most runtime errors, an AbortError usually doesn't indicate that something is broken. It simply means that an operation was stopped because the application, user, or another part of the system requested cancellation. You'll most commonly encounter AbortError when working with fetch(), AbortController, streams, timers, file operations, and network requests. If you've added request timeouts or cancellation logic to your application, seeing an AbortError is often expected behavior. Imagine your application starts downloading a large file. Halfway through the download, the user closes the page. Continuing the download would waste bandwidth and system resources, so your application cancels the request. Instead of completing successfully, the operation throws an AbortError. In other words: The operation didn't fail because of invalid code or a server problem—it stopped because cancellation was requested.

Common Causes

• Request Timeout: Developers often create an AbortController to stop requests that take too long.
• User Cancellation: A user clicks 'Cancel Upload' or navigates away from the page, prompting the application to abort the request intentionally.
• Multiple Search Requests: Instead of waiting for every keypress request to finish, the application cancels older queries to only allow the latest to complete, improving responsiveness.
• Stream Cancellation: Readable streams are aborted if the stream closes before reading is complete, throwing an AbortError.

Common Mistakes

• Treating AbortError like every other error: Many applications log it as a critical exception, which creates unnecessary noise in logs.
• Ignoring AbortError completely: While expected cancellations can be ignored, unexpected ones may indicate that your cancellation logic is firing too early.
• Reusing AbortController instances: An AbortController cannot be 'reset'. Once abort() has been called, its signal remains aborted. Create a new controller for each new operation.

How to Fix

Framework-Specific Examples

const controller = new AbortController();

setTimeout(() => controller.abort(), 3000);

async function loadUser() {
    try {
        const response = await fetch(
            "https://jsonplaceholder.typicode.com/users/1",
            {
                signal: controller.signal
            }
        );

        const data = await response.json();
        console.log(data);

    } catch (error) {
        if (error.name === "AbortError") {
            console.log("Request cancelled.");
            return;
        }
        console.error(error);
    }
}

loadUser();

Server Configuration Examples

proxy_ignore_client_abort off;

Best Practices

• Create a new AbortController instance for each independent request.
• Catch and evaluate AbortError separately from other exceptions.
• Avoid reporting expected cancellations to error monitoring services (e.g. Sentry).
• Use cancellation to improve user experience, not to hide server performance problems.
• Display appropriate UI feedback when an operation is cancelled.

Frequently Asked Questions (FAQ)