ErrorBoundary: chunk load failures need a stable signal and consistent routing
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 22.1k
- Forks
- 1.4k
- Avg merge
- 1d 10h
- Merged PRs (30d)
- 52
Description
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 |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Read packages/qwik/src/core/shared/cursor/chore-execution.ts at the catch added by #8998 and packages/qwik/src/core/shared/error/error-handling.ts at handleQError, then inspect the existing test for qwikloader import failures. Define a stable import-failure signal and route component and event-handler chunk failures consistently through ErrorBoundary handling, with tests covering both paths.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, testing, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100