Skip to content

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

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

Merged
slorber merged 2 commits into from
Feb 15, 2024
Merged

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

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5af92b9
Ensure core error boundary is able to render layout
slorber Feb 15, 2024
428684f
add useful comment
slorber Feb 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 30 additions & 12 deletions packages/docusaurus/src/client/theme-fallback/Error/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,13 @@
// Should we translate theme-fallback?
/* eslint-disable @docusaurus/no-untranslated-text */

import React from 'react';
import React, {type ReactNode} from 'react';
import Head from '@docusaurus/Head';
import ErrorBoundary from '@docusaurus/ErrorBoundary';
import {getErrorCausalChain} from '@docusaurus/utils-common';
import Layout from '@theme/Layout';
import type {Props} from '@theme/Error';
import {RouteContextProvider} from '../../routeContext';

function ErrorDisplay({error, tryAgain}: Props): JSX.Element {
return (
Expand Down Expand Up @@ -54,21 +55,38 @@ function ErrorBoundaryError({error}: {error: Error}): JSX.Element {
return <p style={{whiteSpace: 'pre-wrap'}}>{fullMessage}</p>;
}

// A bit hacky: we need to add an artificial RouteContextProvider here
// The goal is to be able to render the error inside the theme layout
// Without this, our theme classic would crash due to lack of route context
// See also https://github.com/facebook/docusaurus/pull/9852
function ErrorRouteContextProvider({children}: {children: ReactNode}) {
return (
<RouteContextProvider
value={{
plugin: {name: 'docusaurus-core-error-boundary', id: 'default'},
}}>
{children}
</RouteContextProvider>
);
}

export default function Error({error, tryAgain}: Props): JSX.Element {
// We wrap the error in its own error boundary because the layout can actually
// throw too... Only the ErrorDisplay component is simple enough to be
// considered safe to never throw
return (
<ErrorBoundary
// Note: we display the original error here, not the error that we
// captured in this extra error boundary
fallback={() => <ErrorDisplay error={error} tryAgain={tryAgain} />}>
<Head>
<title>Page Error</title>
</Head>
<Layout>
<ErrorDisplay error={error} tryAgain={tryAgain} />
</Layout>
</ErrorBoundary>
<ErrorRouteContextProvider>
<ErrorBoundary
// Note: we display the original error here, not the error that we
// captured in this extra error boundary
fallback={() => <ErrorDisplay error={error} tryAgain={tryAgain} />}>
<Head>
<title>Page Error</title>
</Head>
<Layout>
<ErrorDisplay error={error} tryAgain={tryAgain} />
</Layout>
</ErrorBoundary>
</ErrorRouteContextProvider>
);
}