From 7a82b176ca86f49cdced08125c4db5183f579449 Mon Sep 17 00:00:00 2001
From: Tristan Chin <23557893+maxijonson@users.noreply.github.com>
Date: Fri, 19 May 2023 11:51:14 -0400
Subject: [PATCH] [web] Implement AppCatcher (#21)
---
packages/web/src/components/AppCatcher.tsx | 134 +++++++++++++++++++++
packages/web/src/index.tsx | 9 +-
2 files changed, 140 insertions(+), 3 deletions(-)
create mode 100644 packages/web/src/components/AppCatcher.tsx
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).
+
+
+
+
+
+ }
+ onClick={() =>
+ window.open(
+ "https://github.com/maxijonson/gpt-turbo/issues/new?assignees=&labels=needs-triage&projects=&template=bug_report.yml&title=%5BBug%5D%3A",
+ "_blank"
+ )
+ }
+ >
+ Report issue on GitHub
+
+ }
+ onClick={() => {
+ localStorage.clear();
+ window.location.reload();
+ }}
+ >
+ Clear local storage
+
+ }
+ onClick={() => window.location.reload()}
+ >
+ Reload
+
+
+
+
+ );
+ }
+}
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(
-
-
-
+
+
+
+
+
);