QwikDev / QwikDev/qwik

ErrorBoundary: chunk load failures need a stable signal and consistent routing

Open
#9,003 0 comments 0 reactions 0 assignees View on GitHub

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.Import value
  • or tag the error in the .catch added by #8998 in executeComponentChore (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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.