diff --git a/packages/web/src/components/AppCatcher.tsx b/packages/web/src/components/AppCatcher.tsx new file mode 100644 index 0000000..ec45bd5 --- /dev/null +++ b/packages/web/src/components/AppCatcher.tsx @@ -0,0 +1,134 @@ +import { + Anchor, + Button, + Container, + Group, + Kbd, + List, + Modal, + ScrollArea, + Stack, + Text, + Title, +} from "@mantine/core"; +import React, { ErrorInfo } from "react"; +import { BiBug, BiRefresh, BiTrash } from "react-icons/bi"; + +export interface AppCatcherProps { + children?: React.ReactNode; +} + +export interface AppCatcherState { + hasError: boolean; +} + +export default class AppCatcher extends React.Component< + AppCatcherProps, + AppCatcherState +> { + constructor(props: AppCatcherProps) { + super(props); + this.state = { hasError: false }; + } + + static getDerivedStateFromError(_error: unknown) { + return { hasError: true }; + } + + componentDidCatch(error: Error, errorInfo: ErrorInfo) { + console.error(error, errorInfo); + } + + render() { + const { hasError } = this.state; + const { children } = this.props; + + if (!hasError) { + return children; + } + + return ( + {}} + centered + title={ + + Fatal error + + } + color="red" + size="xl" + scrollAreaComponent={ScrollArea.Autosize} + > + + + + The application encountered a fatal error. Try to + reload the page. If the issue persists, try opening + the app in a private tab: + + + If the app now works in a private tab, you + might have invalid or outdated local storage + data in your browser. Consider clearing your + local storage data{" "} + + which will clear all your settings and + conversations + + + + If the app still does not work in a private + tab, you might have encountered a bug. You + may report it on the project's{" "} + + GitHub issues page + + . In order to help us resolve this issue, + please include a screenshot (or copy paste + the output) of the error in the console ( + F12). + + + + + + + + + + + + ); + } +} diff --git a/packages/web/src/index.tsx b/packages/web/src/index.tsx index c71d662..f6e62b3 100644 --- a/packages/web/src/index.tsx +++ b/packages/web/src/index.tsx @@ -2,11 +2,14 @@ import React from "react"; import ReactDOM from "react-dom/client"; import Providers from "./contexts/providers"; import App from "./components/App"; +import AppCatcher from "./components/AppCatcher"; ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( - - - + + + + + );