diff --git a/src/components/ErrorBoundary/ErrorBoundary.tsx b/src/components/ErrorBoundary/ErrorBoundary.tsx new file mode 100644 index 0000000..97d228c --- /dev/null +++ b/src/components/ErrorBoundary/ErrorBoundary.tsx @@ -0,0 +1,74 @@ +import { Component, ErrorInfo, ReactNode } from 'react' +import { Link } from 'react-router-dom' +import Alert from '@mui/material/Alert' +import Box from '@mui/material/Box' +import IconButton from '@mui/material/IconButton' +import Typography from '@mui/material/Typography' +import CloseIcon from '@mui/icons-material/Close' + +import { routes } from 'config/routes' + +interface Props { + children?: ReactNode +} + +interface State { + error: Error | null + showError: boolean +} + +// Adapted from https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/error_boundaries/ +export class ErrorBoundary extends Component { + public state: State = { + error: null, + showError: false, + } + + public static getDerivedStateFromError(error: Error): State { + return { error, showError: true } + } + + public componentDidCatch(error: Error, errorInfo: ErrorInfo) { + console.error('Uncaught error:', error, errorInfo) + } + + public render() { + if (this.state.error && this.state.showError) { + const { name, message, stack } = this.state.error + + return ( + + { + this.setState({ error: null, showError: false }) + }} + > + + + + + } + > + +
{name}
+
+ + {message} + +
{stack}
+
+
+ ) + } + + return this.props.children + } +} + +export default ErrorBoundary diff --git a/src/components/ErrorBoundary/index.ts b/src/components/ErrorBoundary/index.ts new file mode 100644 index 0000000..2bca71d --- /dev/null +++ b/src/components/ErrorBoundary/index.ts @@ -0,0 +1 @@ +export * from './ErrorBoundary' diff --git a/src/components/Shell/Shell.tsx b/src/components/Shell/Shell.tsx index c1f28e1..e6f16ec 100644 --- a/src/components/Shell/Shell.tsx +++ b/src/components/Shell/Shell.tsx @@ -15,6 +15,7 @@ import { AlertColor } from '@mui/material/Alert' import { ShellContext } from 'contexts/ShellContext' import { SettingsContext } from 'contexts/SettingsContext' import { AlertOptions } from 'models/shell' +import { ErrorBoundary } from 'components/ErrorBoundary' import { Drawer } from './Drawer' import { UpgradeDialog } from './UpgradeDialog' @@ -170,7 +171,10 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => { theme={theme} userPeerId={userPeerId} /> - {children} + + + {children} + diff --git a/src/config/routes.ts b/src/config/routes.ts index 4497da6..711ed58 100644 --- a/src/config/routes.ts +++ b/src/config/routes.ts @@ -1,6 +1,5 @@ export enum routes { ABOUT = '/about', - HOME = '/home', INDEX_HTML = '/index.html', PUBLIC_ROOM = '/public/:roomId', ROOT = '/',