Skip to content

fix: add ErrorBoundary to Search modal and fix MobileMenu error recovery#17755

Merged
wackerow merged 1 commit into
devfrom
fix/search-chunk-load-error-boundary
Mar 12, 2026
Merged

fix: add ErrorBoundary to Search modal and fix MobileMenu error recovery#17755
wackerow merged 1 commit into
devfrom
fix/search-chunk-load-error-boundary

Conversation

@pettinarip
Copy link
Copy Markdown
Member

@pettinarip pettinarip commented Mar 11, 2026

Summary

  • Wrap the dynamically-imported SearchModal with an ErrorBoundary so that a ChunkLoadError shows a recovery dialog ("Refresh page" / "Close") instead of crashing the entire app to a black screen
  • Fix the MobileMenu error fallback to use window.location.reload() instead of reset, since reset just re-triggers the same failed dynamic import

Context

The webpack runtime in Next.js 14 App Router uses [chunkhash] instead of [contenthash] (vercel/next.js#78756), so its filename can stay the same across deploys even when chunk mappings change. Browsers that cached the old runtime serve stale chunk hashes, causing 404s on lazy imports like SearchModal. This is fixed upstream in Next.js 15.3.4+ (vercel/next.js#80153).

Test plan

  • Click Search button — modal opens normally
  • Simulate chunk load failure (e.g. block the chunk URL in DevTools) — error dialog appears with "Refresh page" and "Close" buttons instead of black screen
  • Click "Close" — dialog dismisses, page remains usable
  • Click "Refresh page" — page reloads
  • Open mobile menu — menu works normally
  • Simulate chunk failure on mobile menu — same recovery dialog behavior

The SearchModal is dynamically imported and can fail with ChunkLoadError
when the webpack runtime references stale chunk hashes after a deploy
(Next.js 14 App Router bug: vercel/next.js#78756). Without an error
boundary, this crashes the entire React tree and shows a black screen.

- Wrap SearchModal with ErrorBoundary showing a recovery dialog
- Fix MobileMenu error fallback to use page reload instead of reset,
  since reset just re-triggers the same failed import
@netlify
Copy link
Copy Markdown

netlify Bot commented Mar 11, 2026

Deploy Preview for ethereumorg ready!

Name Link
🔨 Latest commit 1b85732
🔍 Latest deploy log https://app.netlify.com/projects/ethereumorg/deploys/69b1894e79d6a71879b42d4f
😎 Deploy Preview https://deploy-preview-17755.ethereum.it
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
7 paths audited
Performance: 58 (🟢 up 5 from production)
Accessibility: 94 (🟢 up 1 from production)
Best Practices: 100 (no change from production)
SEO: 99 (no change from production)
PWA: 59 (no change from production)
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@wackerow wackerow merged commit 9d35b58 into dev Mar 12, 2026
7 checks passed
@wackerow wackerow deleted the fix/search-chunk-load-error-boundary branch March 12, 2026 15:50
@wackerow
Copy link
Copy Markdown
Member

Looks like we may be duplicating much of the error fallback between Search and MobileMenu (same structure, slightly different container styles). Could consider extracting that into a shared component (e.g., ChunkLoadErrorFallback)... just an idea, didn't need to block

@wackerow wackerow mentioned this pull request Mar 13, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants