polish(core): better styling for error screens (#8736)

Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>

packages/docusaurus-theme-classic/src/theme/ErrorPageContent.tsx

@@ -7,6 +7,10 @@
 
 import React from 'react';
 import Translate from '@docusaurus/Translate';
+import {
+  ErrorBoundaryError,
+  ErrorBoundaryTryAgainButton,
+} from '@docusaurus/theme-common';
 import type {Props} from '@theme/Error';
 
 export default function ErrorPageContent({
@@ -24,15 +28,15 @@ export default function ErrorPageContent({
               This page crashed.
             </Translate>
           </h1>
-          <p>{error.message}</p>
-          <div>
-            <button type="button" onClick={tryAgain}>
-              <Translate
-                id="theme.ErrorPageContent.tryAgain"
-                description="The label of the button to try again when the page crashed">
-                Try again
-              </Translate>
-            </button>
+          <div className="margin-vert--lg">
+            <ErrorBoundaryTryAgainButton
+              onClick={tryAgain}
+              className="button button--primary shadow--lw"
+            />
+          </div>
+          <hr />
+          <div className="margin-vert--md">
+            <ErrorBoundaryError error={error} />
           </div>
         </div>
       </div>

packages/docusaurus-theme-common/src/index.ts

@@ -89,3 +89,8 @@ export {
   SkipToContentFallbackId,
   SkipToContentLink,
 } from './utils/skipToContentUtils';
+
+export {
+  ErrorBoundaryTryAgainButton,
+  ErrorBoundaryError,
+} from './utils/errorBoundaryUtils';

packages/docusaurus-theme-common/src/utils/errorBoundaryUtils.module.css

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+
+.errorBoundaryError {
+  white-space: pre-wrap;
+  color: red;
+}

packages/docusaurus-theme-common/src/utils/errorBoundaryUtils.tsx

@@ -0,0 +1,28 @@
+/**
+ * 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, {type ComponentProps} from 'react';
+import Translate from '@docusaurus/Translate';
+import styles from './errorBoundaryUtils.module.css';
+
+export function ErrorBoundaryTryAgainButton(
+  props: ComponentProps<'button'>,
+): JSX.Element {
+  return (
+    <button type="button" {...props}>
+      <Translate
+        id="theme.ErrorPageContent.tryAgain"
+        description="The label of the button to try again rendering when the React error boundary captures an error">
+        Try again
+      </Translate>
+    </button>
+  );
+}
+
+export function ErrorBoundaryError({error}: {error: Error}): JSX.Element {
+  return <p className={styles.errorBoundaryError}>{error.message}</p>;
+}

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

@@ -21,16 +21,28 @@ function ErrorDisplay({error, tryAgain}: Props): JSX.Element {
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'center',
-        alignItems: 'center',
-        height: '50vh',
+        alignItems: 'flex-start',
+        minHeight: '100vh',
         width: '100%',
+        maxWidth: '80ch',
         fontSize: '20px',
+        margin: '0 auto',
+        padding: '1rem',
       }}>
-      <h1>This page crashed.</h1>
-      <p>{error.message}</p>
-      <button type="button" onClick={tryAgain}>
+      <h1 style={{fontSize: '3rem'}}>This page crashed</h1>
+      <button
+        type="button"
+        onClick={tryAgain}
+        style={{
+          margin: '1rem 0',
+          fontSize: '2rem',
+          cursor: 'pointer',
+          borderRadius: 20,
+          padding: '1rem',
+        }}>
         Try again
       </button>
+      <p style={{whiteSpace: 'pre-wrap'}}>{error.message}</p>
     </div>
   );
 }

website/src/components/ErrorBoundaryTestButton/index.tsx

@@ -14,7 +14,7 @@ export default function ErrorBoundaryTestButton({
 }): JSX.Element {
   const [state, setState] = useState(false);
   if (state) {
-    throw new Error('Boom!');
+    throw new Error('Boom!\nSomething bad happened, but you can try again!');
   }
   return (
     <button type="button" onClick={() => setState(true)}>

website/testCSSOrder.mjs

@@ -31,7 +31,6 @@ const EXPECTED_CSS_MARKERS = [
   // See https://github.com/facebook/docusaurus/pull/6222
   '.markdown>h2',
   '.button--outline.button--active',
-  '.DocSearch-Hit-content-wrapper',
   '--ifm-color-scheme:light',
   '.col[class*=col--]',
   '.padding-vert--xl',
@@ -49,6 +48,7 @@ const EXPECTED_CSS_MARKERS = [
 
   // Lazy-loaded lib
   '.DocSearch-Modal',
+  '.DocSearch-Hit-content-wrapper',
 ];
 
 const cssDirName = fileURLToPath(new URL('build/assets/css', import.meta.url));