fix: let error boundaries handle chunk loading failures - #1440
Conversation
🦋 Changeset detectedLatest commit: 4b946c9 The changes in this PR will be included in the next version bump. This PR includes changesets to release 6 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
@MikitasK is attempting to deploy a commit to the Callstack Team on Vercel. A member of the Team first needs to authorize it. |
| Object.getOwnPropertyNames(originalWebpackRequire).forEach((key) => { | ||
| // @ts-ignore | ||
| guardedWebpackRequire[key] = originalWebpackRequire[key]; | ||
| var descriptor = Object.getOwnPropertyDescriptor( |
There was a problem hiding this comment.
how do these changes to copy the properties impact the fix? or does it solve some other issue?
There was a problem hiding this comment.
good catch, thanks 👍 basically, these changes don't directly impact 'chunk load error' fix.
so I just reverted it to keep this PR focused on chunk loading error & not brake any existing logic
| var inGuard = false; | ||
| var originalWebpackRequire = __webpack_require__; | ||
|
|
||
| function isChunkLoadError(error: unknown) { |
There was a problem hiding this comment.
@MikitasK hey, ChunkLoadError is not the only error that can cause this issue. For example, we encountered Module Federation errors containing a #RUNTIME-\d+ code that also crashed the app, so we added a check for them in our code as well. Could we check for and handle these errors here too?
Summary
Closes #1428
MF v.2 can surface failed remote chunk load through synthetic module factory. Resulting
ChunkLoadErrorpasses through Re.Pack's guarded__webpack_require__, where it's reported as fatal. This bypasses dynamic-import rejection path preventingReact.lazyError Boundaries from handling failure & causing Release app to terminatechunk_loading_error_on_prod.mp4
PR change keeps Metro-compatible guarded require but allows
ChunkLoadErrorto propagate to dynamic-import promise. promise can then reject normally & be handled by nearest Error BoundaryErrorUtils.reportFatalErrorrequire()failures remain catchablefixed_chunk_loading_error_on_prod.mp4
Test plan
In repo root:
pnpm --filter @callstack/repack typecheckpnpm --filter @callstack/repack run build:jspnpm --filter @callstack/repack run build:tspnpm --filter integration-test test -- RepackTargetPlugin.test.tsIn
apps/tester-federation-v2:build/mini-appon port 8082:adb reverse tcp:8082 tcp:8082Galleryin appExpected result:
ChunkLoadErrorGalleryrenders "Failed to load Mini App" fallback