Add error fallback component

HolodexNet · Oct 15, 2023 · 771daee · 771daee
1 parent cea9fb5
commit 771daee
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 8 deletions.
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -44,6 +44,7 @@
     "oauth-open": "^1.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.11",
     "react-grid-layout": "^1.4.2",
     "react-helmet-async": "^1.3.0",
     "react-i18next": "^13.2.2",
@@ -53,7 +54,8 @@
     "react-virtuoso": "^4.6.1",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
-    "use-seconds": "^1.7.0"
+    "use-seconds": "^1.7.0",
+    "usehooks-ts": "^2.9.1"
   },
   "devDependencies": {
     "@iconify/json": "^2.2.126",

diff --git a/packages/react/src/components/common/ErrorFallback.tsx b/packages/react/src/components/common/ErrorFallback.tsx
@@ -0,0 +1,62 @@
+import { FallbackProps } from "react-error-boundary";
+import { Trans, useTranslation } from "react-i18next";
+import { TwitterFeed } from "./TwitterFeed";
+import { useRouteError } from "react-router-dom";
+import { Button } from "@/shadcn/ui/button";
+import { useAuth } from "@/hooks/useAuth";
+
+export function ErrorFallback(props?: FallbackProps | {}) {
+  const routeError = useRouteError() as Error | null;
+  const { t } = useTranslation();
+  const { logout } = useAuth();
+
+  // @ts-ignore
+  const error = routeError ?? (props?.error as Error | null);
+
+  return (
+    <div className=" w-full h-full p-8 overflow-y-auto">
+      <div className="mx-auto w-full h-full max-w-screen-lg flex flex-col items-center gap-4">
+        <h2 className="font-bold text-3xl">{t("Gomenasorry!")}</h2>
+        <p>
+          <Trans>
+            There was an error retrieving content, please check{" "}
+            <a className="underline text-blue-500" href="https://x.com/holodex">
+              Twitter
+            </a>{" "}
+            or report an error through the{" "}
+            <a
+              className="underline text-blue-500"
+              href="https://discord.gg/jctkgHBt4b"
+            >
+              Discord
+            </a>
+            .
+          </Trans>
+        </p>
+        <div className="flex gap-4">
+          <Button size="lg" onClick={() => window.location.reload()}>
+            {t("Reload")}
+          </Button>
+          <Button
+            size="lg"
+            variant="secondary"
+            onClick={() => {
+              logout();
+              window.localStorage.clear();
+              window.location.assign("/");
+            }}
+          >
+            {t("Logout / Clear cache")}
+          </Button>
+        </div>
+        <code className="max-w-full px-2 py-0 shrink-0 bg-black/10 rounded-md text-sm whitespace-pre overflow-x-auto">
+          {error?.message}
+        </code>
+        <code className="max-w-full shrink-0 p-2 bg-black/10 rounded-md text-xs whitespace-pre overflow-x-auto">
+          {error?.stack}
+        </code>
+        <TwitterFeed className="flex justify-center w-[min(800px, calc(100vw - 40px))] h-[400px]" />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/react/src/components/common/TwitterFeed.tsx b/packages/react/src/components/common/TwitterFeed.tsx
@@ -0,0 +1,27 @@
+import { DetailedHTMLProps, HTMLAttributes, useEffect, useRef } from "react";
+import { useScript } from "usehooks-ts";
+
+declare global {
+  // eslint-disable-next-line
+  var twttr: any;
+}
+
+const html = `<a class="twitter-timeline" data-dnt="true" data-height="400" data-width="${Math.min(
+  window.innerWidth - 40,
+  800,
+)}" href="https://twitter.com/holodex?ref_src=twsrc%5Etfw">Tweets by Holodex</a>`;
+
+export function TwitterFeed(
+  props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+) {
+  const ref = useRef<HTMLDivElement>(null);
+  const status = useScript("https://platform.twitter.com/widgets.js");
+
+  useEffect(() => {
+    if (status === "ready") window.twttr?.widgets.load();
+  }, [status]);
+
+  return (
+    <div {...props} ref={ref} dangerouslySetInnerHTML={{ __html: html }} />
+  );
+}
diff --git a/packages/react/src/components/layout/Frame.tsx b/packages/react/src/components/layout/Frame.tsx
@@ -16,6 +16,8 @@ import { Header } from "@/components/header/header";
 import { Toaster } from "@/shadcn/ui/toaster";
 import clsx from "clsx";
 import { orgAtom } from "@/store/org";
+import { ErrorFallback } from "../common/ErrorFallback";
+import { ErrorBoundary } from "react-error-boundary";
 
 export function Frame() {
   const location = useLocation();
@@ -54,7 +56,9 @@ export function Frame() {
       </aside>
       <Header onClick={toggle} id="header" />
       <main className="">
-        <Outlet />
+        <ErrorBoundary FallbackComponent={ErrorFallback}>
+          <Outlet />
+        </ErrorBoundary>
       </main>
       {isMobile && <footer className="">Footer</footer>}
       <Toaster />

diff --git a/packages/react/src/main.tsx b/packages/react/src/main.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { GoogleOAuthProvider } from "@react-oauth/google";
 import { HelmetProvider } from "react-helmet-async";
+import { ErrorBoundary } from "react-error-boundary";
 import "./index.css";
 import "uno.css";
 import { useThemeInit } from "./hooks/useTheme";
@@ -10,6 +11,7 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import "./lib/i18n";
 import { RouterProvider } from "react-router-dom";
 import router from "./routes/router";
+import { ErrorFallback } from "./components/common/ErrorFallback";
 
 const GOOGLE_CLIENT_ID =
   "275540829388-87s7f9v2ht3ih51ah0tjkqng8pd8bqo2.apps.googleusercontent.com";
@@ -34,7 +36,12 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
       <QueryClientProvider client={queryClient}>
         <ReactQueryDevtools />
         <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
-          <App />
+          <ErrorBoundary
+            FallbackComponent={ErrorFallback}
+            onReset={() => window.location.reload()}
+          >
+            <App />
+          </ErrorBoundary>
         </GoogleOAuthProvider>
       </QueryClientProvider>
     </HelmetProvider>

diff --git a/packages/react/src/routes/home.tsx b/packages/react/src/routes/home.tsx
@@ -8,10 +8,12 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shadcn/ui/tabs";
 import { videoCardSizeAtom } from "@/store/video";
 import { useAtom } from "jotai";
 import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Navigate, useParams } from "react-router-dom";
 import { VirtuosoGrid } from "react-virtuoso";
 
 export function Home() {
+  const { t } = useTranslation();
   const { org } = useParams();
   const [tab, setTab] = useState("live");
   const { data: live, isLoading: liveLoading } = useLive(
@@ -80,24 +82,24 @@ export function Home() {
     >
       <TabsList className="flex w-full bg-base-2 rounded-none justify-start overflow-x-auto overflow-y-hidden z-20">
         <TabsTrigger className="text-lg" value="live">
-          Live
+          {t("Live")}
           {live && (
             <span className="mx-1 p-1 bg-secondary-5 rounded-sm text-sm">
               {live?.filter(({ status }) => status === "live").length}
             </span>
           )}
-          / Upcoming
+          / {t("Upcoming")}
           {live && (
             <span className="ml-1 p-1 bg-secondary-5 rounded-sm text-sm">
               {live?.filter(({ status }) => status === "upcoming").length}
             </span>
           )}
         </TabsTrigger>
         <TabsTrigger className="text-lg" value="archive">
-          Archive
+          {t("Archive")}
         </TabsTrigger>
         <TabsTrigger className="text-lg" value="clips">
-          Clips
+          {t("Clips")}
         </TabsTrigger>
         <div className="flex grow" />
         <Button

diff --git a/packages/react/src/routes/router.tsx b/packages/react/src/routes/router.tsx
@@ -11,6 +11,7 @@ import { Frame } from "@/components/layout/Frame";
 // import { Channel } from "./channel";
 import { NavigateToMusicdex } from "@/components/channel/NavigateToMusicdex";
 import React from "react";
+import { ErrorFallback } from "@/components/common/ErrorFallback";
 
 const Login = React.lazy(() => import("./login"));
 const Settings = React.lazy(() => import("./settings"));
@@ -23,6 +24,7 @@ const router = createBrowserRouter([
   {
     path: "/",
     element: <Frame />,
+    ErrorBoundary: ErrorFallback,
     children: [
       {
         path: "favorites",
@@ -120,6 +122,10 @@ const router = createBrowserRouter([
         path: "debug/run",
         element: <div>Debug Run</div>,
       },
+      {
+        path: "*",
+        element: <div>Not found</div>,
+      },
     ],
   },
 ]);