Line data    Source code

       1              : import * as React from 'react';
       2              : 
       3              : import { stringifyError } from '../platform/logger/logger.js';
       4              : import { useLogger } from '../platform/logger/logger_provider.js';
       5              : import { GitHubTheme } from '../styles/github_theme.js';
       6              : import { Button } from '../ui/foundations/button.js';
       7              : import { ErrorBoundary } from '../ui/foundations/error_boundary.js';
       8              : import * as styles from './shell_error_boundary.module.css';
       9              : 
      10            1 : const LOG_CTX = 'standalone_shell';
      11              : 
      12              : interface Props {
      13              :     reload?: () => void;
      14              :     children: React.ReactNode;
      15              : }
      16              : 
      17              : /// Catch what fails to render in the shell page. The terminal and the database connection are gone by then, only a
      18              : /// reload brings them back. The fallback can't rely on the providers below the boundary.
      19            1 : export function ShellErrorBoundary({ reload = () => window.location.reload(), children }: Props): React.ReactElement {
      20            1 :     const logger = useLogger();
      21            1 :     const onError = (error: unknown, info: React.ErrorInfo) => {
      22            1 :         logger.error('The shell failed to render', { error: stringifyError(error), stack: info.componentStack ?? '' }, LOG_CTX);
      23            1 :     };
      24            1 :     return (
      25            1 :         <ErrorBoundary
      26            1 :             onError={onError}
      27            1 :             fallback={error => (
      28            1 :                 <GitHubTheme>
      29            1 :                     <main className={styles.page} aria-label="HyperDB Shell">
      30            1 :                         <section className={styles.card} role="alert">
      31            1 :                             <h1>The shell stopped working</h1>
      32            1 :                             <p>{stringifyError(error)}</p>
      33            1 :                             <Button onClick={reload}>Reload</Button>
      34            1 :                         </section>
      35            1 :                     </main>
      36            1 :                 </GitHubTheme>
      37              :             )}
      38              :         >
      39            1 :             {children}
      40            1 :         </ErrorBoundary>
      41              :     );
      42            1 : }