NetworkError on aborting PixiJS Loader fetch

Resolution

PixiJS 6.x does not provide a native abort() or timeout method within the Loader class. To cancel an in-progress load or enforce a timeout, you must wrap the loader.load() promise in a Promise.race() and manually trigger the underlying browser request cancellation.

Implementation Strategy

Because the Loader abstracts the transport layer, you cannot call abort() directly on the Loader instance. Instead, implement a timeout wrapper that rejects the operation and handles the resulting NetworkError.

const timeout = (ms) => new Promise((_, reject) => 
    setTimeout(() => reject(new Error('Timeout')), ms)
);

try {
    // Race the loader against a timer
    await Promise.race([
        loader.load("assets.json"),
        timeout(5000)
    ]);
} catch (err) {
    if (err.message === 'Timeout') {
        console.warn('Load timed out. Note: The underlying fetch may still continue until the browser terminates it.');
    } else {
        // PixiJS wraps aborted fetches/XHR as 'NetworkError'
        console.error('Resource load failed:', err);
    }
}

Technical Explanation

Confirmed Behavior

• Loader.destroy(): This method is intended for GPU and CPU memory cleanup. It does not terminate active network sockets or trigger AbortController signals.
• Error Wrapping: When a fetch request is aborted (either by the browser or via an external AbortController), the browser throws an AbortError. PixiJS catches this and re-throws it as a generic NetworkError.
• Promise Rejection: The promise returned by load() will reject upon abortion, but it does not provide a distinct error type to differentiate a manual abort from a server-side failure.

Assumptions and Uncertainties

This behavior assumes a PixiJS 6.x environment using the Fetch API transport. In older versions relying on XMLHttpRequest, the error surfacing may differ slightly depending on the browser's implementation of XHR aborts. There is currently no official roadmap indicating a high-level abort() API for the Loader in upcoming releases.

Verification Steps

1. Wrap your load call in the Promise.race pattern shown above.
2. Open Browser DevTools > Network Tab.
3. Trigger the timeout/abort and verify the request status changes to (canceled).
4. Confirm the .catch() block receives an error containing the string "NetworkError".

Diagnostic Detail Needed: Are you using a custom resource loader or the default PixiJS asset manifest system? Custom loaders may allow for direct AbortController integration.