Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(core): ensure core error boundary is able to render theme layout #9852

Merged
merged 2 commits into from Feb 15, 2024
Merged

fix(core): ensure core error boundary is able to render theme layout #9852

merged 2 commits into from Feb 15, 2024

Conversation

slorber
Copy link
Collaborator

@slorber slorber commented Feb 15, 2024 •
edited

Motivation

There are cases where the core React error boundary will catch a React rendering error, and display a fallback UI, trying to eventually display that error in the current theme layout.

But due to a missing routeContext, the classic theme layout will always error, trigger the re-rendering of the error without the theme layout, and produce unexpected error messages unrelated to the user's mistake.

Notably, the classic theme layout uses useRouteContext() to retrieve the current plugin name and add it to <html> classes, for CSS targeting purposes. But the core error boundary will try to render the theme layout without and route context provider, so it crashes:

We should prevent that from happening and make it possible to render caught errors inside the theme layout whenever possible.

For that reason I'm adding a kind-of artificial route context for rendering caught errors. It's not super elegant but it solves the problem.

Before:

CleanShot 2024-02-15 at 16 59 45@2x

console:

// This is the user's mistake
Uncaught Invariant Violation: You may be attempting to nest <Helmet> components within each other, which is not allowed. Refer to our API for more information.
    at invariant (webpack-internal:///../node_modules/invariant/browser.js:38:15)

// This is a totally unrelated, unhelpful error:
Unexpected: no Docusaurus route context found
    at useRouteContext (webpack-internal:///../packages/docusaurus/lib/client/exports/useRouteContext.js:18:15)
    at PluginHtmlClassNameProvider (webpack-internal:///../packages/docusaurus-theme-common/lib/utils/metadataUtils.js:142:97)
    at renderWithHooks (webpack-internal:///../no

After:

CleanShot 2024-02-15 at 17 01 02@2x

console:

// This is the user's mistake
Uncaught Invariant Violation: You may be attempting to nest <Helmet> components within each other, which is not allowed. Refer to our API for more information.
    at invariant (webpack-internal:///../node_modules/invariant/browser.js:38:15)

Test Plan

none, local test 😅

Test links

https://deploy-preview-9852--docusaurus-2.netlify.app/

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Feb 15, 2024
@netlify Netlify
Copy link

netlify bot commented Feb 15, 2024 •
edited

✅ [V2]

Name Link
🔨 Latest commit 428684f
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/65ce35fd1c79ae0008be0340
😎 Deploy Preview https://deploy-preview-9852--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@slorber slorber added pr: bug fix This PR fixes a bug in a past release. to backport This PR is planned to be backported to a stable version of Docusaurus labels Feb 15, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented Feb 15, 2024 •
edited

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO PWA Report
/ 🟠 67 🟢 98 🟢 96 🟢 100 🟠 88 Report
/docs/installation 🟠 68 🟢 96 🟢 100 🟢 100 🟠 88 Report
/docs/category/getting-started 🟠 74 🟢 100 🟢 100 🟢 90 🟠 88 Report
/blog 🟠 69 🟢 100 🟢 100 🟢 90 🟠 88 Report
/blog/preparing-your-site-for-docusaurus-v3 🟠 63 🟢 96 🟢 100 🟢 100 🟠 88 Report
/blog/tags/release 🟠 70 🟢 100 🟢 100 🟠 80 🟠 88 Report
/blog/tags 🟠 75 🟢 100 🟢 100 🟢 90 🟠 88 Report

@github-actions GitHub Actions
Copy link

Size Change: +162 B (0%)

Total Size: 992 kB

Filename Size Change
website/build/assets/js/main.********.js 765 kB +162 B (0%)
ℹ️ View Unchanged
Filename Size
website/.docusaurus/globalData.json 75.4 kB
website/build/assets/css/styles.********.css 114 kB
website/build/index.html 37.9 kB

compressed-size-action

@slorber slorber merged commit b26e262 into main Feb 15, 2024
31 checks passed
@slorber slorber deleted the slorber/improve-core-error-boundary branch February 15, 2024 16:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Josh-Cena Josh-Cena Awaiting requested review from Josh-Cena Josh-Cena is a code owner

Assignees
No one assigned
Labels
CLA Signed Signed Facebook CLA pr: bug fix This PR fixes a bug in a past release. to backport This PR is planned to be backported to a stable version of Docusaurus
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@slorber @facebook-github-bot