ErrorBoundary: chunk load failures need a stable signal and consistent routing
Since #8998, a component whose chunk fails to import no longer loops, and the nearest <ErrorBoundary> renders its fallback. I think that is the right default, but two things are missing.
Apps cannot reliably detect a chunk load failure
The error that reaches onError$ is the browser's TypeError and the phase is render. The message differs per browser:
- Chrome:
Failed to fetch dynamically imported module - Firefox:
error loading dynamically imported module - Safari:
Importing a module script failed
The usual fix for a chunk 404 after a deploy is location.reload(), and onError$ has no stable way to tell "code is missing" from "code threw". Options:
- add an
ErrorBoundaryPhase.Importvalue - or tag the error in the
.catchadded by #8998 inexecuteComponentChore(packages/qwik/src/core/shared/cursor/chore-execution.ts)
Event handler chunk failures are not routed to boundaries
When an onClick$ chunk fails to import, the qwikloader emits qerror with importError set, and handleQError returns early (packages/qwik/src/core/shared/error/error-handling.ts). The error only reaches console.error. There is a test for this.
So today a broken component chunk shows the fallback, while a broken handler chunk shows nothing. Both are the same situation for the user. If we add an import phase, the qwikloader case should go through it too.
Verified
Spec run on current main:
| Failure | Inside <ErrorBoundary> |
Without a boundary |
|---|---|---|
| Component chunk import rejects | Fallback renders, phase render |
Subtree stays empty, error logged async |
useTask$ throws a rejected promise |
Fallback renders, phase hook |
Logged, render finishes |
onClick$ chunk import rejects |
Nothing, console.error only |
Same |
Source: QwikDev/qwik