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

slorber · 2024-02-15T15:55:46Z

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:

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:

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/

netlify · 2024-02-15T15:58:52Z

✅ [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... Use your smartphone camera to open QR code link.

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

github-actions · 2024-02-15T16:02:31Z

⚡️ 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 · 2024-02-15T16:13:46Z

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}

Ensure core error boundary is able to render layout

5af92b9

slorber requested a review from Josh-Cena as a code owner February 15, 2024 15:55

facebook-github-bot added the CLA Signed Signed Facebook CLA label Feb 15, 2024

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

add useful comment

428684f

slorber merged commit b26e262 into main Feb 15, 2024
31 checks passed

slorber deleted the slorber/improve-core-error-boundary branch February 15, 2024 16:25

This was referenced May 19, 2024

[Snyk] Upgrade @docusaurus/core from 3.1.1 to 3.2.1 scribe-security/authentik#14

Open

[Snyk] Upgrade @docusaurus/plugin-content-docs from 3.1.1 to 3.2.1 scribe-security/authentik#15

Open

Abuchtela mentioned this pull request May 20, 2024

[Snyk] Upgrade @docusaurus/preset-classic from 3.0.0 to 3.2.1 Abuchtela/aptos-core#42

Closed

gabber235 mentioned this pull request May 24, 2024

[Snyk] Upgrade @docusaurus/preset-classic from 3.1.1 to 3.3.2 gabber235/TypeWriter#193

Closed

This was referenced May 25, 2024

[Snyk] Upgrade @docusaurus/core from 3.1.1 to 3.3.2 SherfeyInv/lerna#4

Merged

[Snyk] Upgrade @docusaurus/plugin-sitemap from 3.1.1 to 3.3.2 SherfeyInv/lerna#5

Open

[Snyk] Upgrade @docusaurus/preset-classic from 3.1.1 to 3.3.2 SherfeyInv/lerna#6

Open

This was referenced May 26, 2024

[Snyk] Upgrade @docusaurus/module-type-aliases from 3.0.0 to 3.3.2 qdraw/starsky#1593

Closed

[Snyk] Upgrade @docusaurus/types from 3.0.0 to 3.3.2 qdraw/starsky#1594

Closed

[Snyk] Upgrade @docusaurus/tsconfig from 3.0.0 to 3.3.2 qdraw/starsky#1595

Closed

This was referenced May 27, 2024

[Snyk] Upgrade @docusaurus/preset-classic from 3.1.1 to 3.3.2 gabber235/TypeWriter#196

Closed

[Snyk] Upgrade @docusaurus/preset-classic from 3.1.1 to 3.3.2 gabber235/TypeWriter#197

Closed

Exkaleburx mentioned this pull request May 28, 2024

[Snyk] Upgrade @docusaurus/utils from 3.1.1 to 3.3.2 Exkaleburx/chakra-ui#33

Open

This was referenced May 28, 2024

[Snyk] Upgrade @docusaurus/plugin-sitemap from 3.1.1 to 3.3.2 SherfeyInv/lerna#7

Open

[Snyk] Upgrade @docusaurus/preset-classic from 3.1.1 to 3.3.2 SherfeyInv/lerna#8

Open

This was referenced Aug 21, 2024

[Snyk] Upgrade @docusaurus/core from 3.1.1 to 3.4.0 ramzimalhas/gptscript#2

Open

[Snyk] Upgrade @docusaurus/preset-classic from 3.1.1 to 3.4.0 ramzimalhas/gptscript#3

Open

Ramyromel mentioned this pull request Aug 28, 2024

[Snyk] Upgrade @docusaurus/core from 2.4.3 to 3.4.0 Ramyromel/polkadot-wiki#11

Merged

Herychukwu mentioned this pull request Aug 31, 2024

[Snyk] Upgrade @docusaurus/core from 3.0.0 to 3.5.1 Herychukwu/solana-program-library#8

Open

This was referenced Sep 3, 2024

[Snyk] Upgrade @docusaurus/module-type-aliases from 2.4.3 to 3.5.1 Ramyromel/polkadot-wiki#12

Open

[Snyk] Upgrade @docusaurus/plugin-client-redirects from 2.4.3 to 3.5.1 Ramyromel/polkadot-wiki#13

Open

Exkaleburx mentioned this pull request Sep 5, 2024

[Snyk] Upgrade @docusaurus/utils from 3.1.1 to 3.5.2 Exkaleburx/chakra-ui#182

Open

This was referenced Sep 8, 2024

[Snyk] Upgrade @docusaurus/module-type-aliases from 3.0.0 to 3.5.2 qdraw/starsky#1698

Closed

[Snyk] Upgrade @docusaurus/types from 3.0.0 to 3.5.2 qdraw/starsky#1699

Closed

qdraw mentioned this pull request Sep 14, 2024

[Snyk] Upgrade: , qdraw/starsky#1719

Closed

Exkaleburx mentioned this pull request Sep 19, 2024

[Snyk] Upgrade: , focus-visible, framer-motion, react-spinners Exkaleburx/chakra-ui#202

Open

qdraw mentioned this pull request Sep 21, 2024

[Snyk] Upgrade: , , prism-react-renderer qdraw/starsky#1728

Closed

galopeian1 mentioned this pull request Sep 26, 2024

[Snyk] Upgrade @docusaurus/core from 3.0.1 to 3.5.2 galopeian1/bitsy#9

Open

This was referenced Sep 28, 2024

[Snyk] Upgrade @docusaurus/module-type-aliases from 3.0.0 to 3.5.2 qdraw/starsky#1738

Closed

[Snyk] Upgrade @docusaurus/types from 3.0.0 to 3.5.2 qdraw/starsky#1739

Closed

InfiniteLove2020 mentioned this pull request Oct 4, 2024

[Snyk] Upgrade @docusaurus/plugin-sitemap from 2.1.0 to 3.5.2 InfiniteLove2020/HTMLHint#9

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

slorber commented Feb 15, 2024 •

edited

Loading

netlify bot commented Feb 15, 2024 •

edited

Loading

github-actions bot commented Feb 15, 2024 •

edited

Loading

github-actions bot commented Feb 15, 2024

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

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

Conversation

slorber commented Feb 15, 2024 • edited Loading

Motivation

Before:

After:

Test Plan

Test links

netlify bot commented Feb 15, 2024 • edited Loading

✅ [V2]

github-actions bot commented Feb 15, 2024 • edited Loading

⚡️ Lighthouse report for the deploy preview of this PR

github-actions bot commented Feb 15, 2024

slorber commented Feb 15, 2024 •

edited

Loading

netlify bot commented Feb 15, 2024 •

edited

Loading

github-actions bot commented Feb 15, 2024 •

edited

Loading