feat(core): Add React ErrorBoundary component + theme default boundaries

packages/docusaurus-theme-classic/src/theme/Layout/index.tsx

@@ -9,6 +9,7 @@ import React, {ReactNode} from 'react';
 import Head from '@docusaurus/Head';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import DocusaurusErrorBoundary from '@docusaurus/DocusaurusErrorBoundary';
 
 import ThemeProvider from '@theme/ThemeProvider';
 import UserPreferencesProvider from '@theme/UserPreferencesProvider';
@@ -88,7 +89,9 @@ function Layout(props: Props): JSX.Element {
       </Head>
       <AnnouncementBar />
       <Navbar />
-      <div className="main-wrapper">{children}</div>
+      <div className="main-wrapper">
+        <DocusaurusErrorBoundary>{children}</DocusaurusErrorBoundary>
+      </div>
       {!noFooter && <Footer />}
     </Providers>
   );

packages/docusaurus/src/client/App.tsx

@@ -13,6 +13,7 @@ import globalData from '@generated/globalData';
 import siteMetadata from '@generated/site-metadata';
 import renderRoutes from './exports/renderRoutes';
 import DocusaurusContext from './exports/context';
+import ErrorBoundary from './ErrorBoundary';
 import PendingNavigation from './PendingNavigation';
 
 import './client-lifecycles-dispatcher';
@@ -24,13 +25,18 @@ function App(): JSX.Element {
     setIsClient(true);
   }, []);
 
+  const logError = process.env.NODE_ENV !== 'production';
+  const showError = process.env.NODE_ENV !== 'production';
+
   return (
-    <DocusaurusContext.Provider
-      value={{siteConfig, siteMetadata, globalData, isClient}}>
-      <PendingNavigation routes={routes}>
-        {renderRoutes(routes)}
-      </PendingNavigation>
-    </DocusaurusContext.Provider>
+    <ErrorBoundary logError={logError} showError={showError}>
+      <DocusaurusContext.Provider
+        value={{siteConfig, siteMetadata, globalData, isClient}}>
+        <PendingNavigation routes={routes}>
+          {renderRoutes(routes)}
+        </PendingNavigation>
+      </DocusaurusContext.Provider>
+    </ErrorBoundary>
   );
 }
 

packages/docusaurus/src/client/ErrorBoundary.tsx

@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import {withRouter} from 'react-router-dom';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import siteConfig from '@generated/docusaurus.config';
+
+interface Props {
+  logError: boolean;
+  showError: boolean;
+}
+
+interface State {
+  error: Error | null;
+  errorInfo: React.ErrorInfo | null;
+}
+
+class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    const {logError = false} = this.props;
+    const {
+      errorBoundary: {
+        consoleHeading = 'An error occurred, here are the details.',
+      } = {},
+    } = siteConfig;
+
+    // Catch errors in any components below and re-render with error message
+    if (ExecutionEnvironment.canUseDOM) {
+      this.setState({
+        error,
+        errorInfo,
+      });
+    }
+
+    // Log our errors to the console as well
+    if (logError) {
+      console.error(consoleHeading, error, errorInfo);
+    }
+  }
+
+  render() {
+    const {children, showError = false} = this.props;
+    const {error, errorInfo} = this.state;
+    const {
+      errorBoundary: {
+        heading = 'An error occurred, please contact the development team.',
+      } = {},
+    } = siteConfig;
+
+    if (errorInfo) {
+      // Let's output our error
+      return (
+        <div>
+          <h2>{heading}</h2>
+          {showError && (
+            <details style={{whiteSpace: 'pre-wrap'}}>
+              {error && error.toString()}
+              <br />
+              {errorInfo.componentStack}
+            </details>
+          )}
+        </div>
+      );
+    }
+
+    // Normally, just render children
+    return children;
+  }
+}
+
+export default withRouter(ErrorBoundary);

packages/docusaurus/src/client/exports/DocusaurusErrorBoundary.tsx

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {ReactNode} from 'react';
+
+import ExecutionEnvironment from './ExecutionEnvironment';
+import Error from '@theme/Error';
+
+interface Props {
+  renderError?: any;
+  tryAgain?: any;
+  children: ReactNode;
+}
+
+interface State {
+  error: Error | null;
+  errorInfo: React.ErrorInfo | null;
+}
+
+class DocusaurusErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    // Catch errors in any components below and re-render with error message
+    if (ExecutionEnvironment.canUseDOM) {
+      this.setState({
+        error,
+        errorInfo,
+      });
+    }
+  }
+
+  render() {
+    const {children, renderError, tryAgain} = this.props;
+    const {error, errorInfo} = this.state;
+
+    if (errorInfo) {
+      // Let's output our error
+      if (!renderError) {
+        return (
+          <Error error={error} errorInfo={errorInfo} tryAgain={tryAgain} />
+        );
+      }
+
+      return renderError(error, errorInfo);
+    }
+
+    // Normally, just render children
+    return children;
+  }
+}
+
+export default DocusaurusErrorBoundary;

packages/docusaurus/src/client/theme-fallback/Error/index.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+function Error({error, tryAgain}) {
+  return (
+    <div>
+      <h1>An error occurred while processing your request</h1>
+      <p>{error.message}</p>
+      {tryAgain && (
+        <button type="button" onClick={tryAgain}>
+          Try again (attempt to re-render)
+        </button>
+      )}
+    </div>
+  );
+}
+
+export default Error;