Skip to content

Commit

Permalink
Add error fallback component
Browse files Browse the repository at this point in the history
  • Loading branch information
P-man2976 committed Oct 15, 2023
1 parent cea9fb5 commit 771daee
Show file tree
Hide file tree
Showing 8 changed files with 158 additions and 8 deletions.
42 changes: 41 additions & 1 deletion packages/react/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion packages/react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
62 changes: 62 additions & 0 deletions packages/react/src/components/common/ErrorFallback.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
27 changes: 27 additions & 0 deletions packages/react/src/components/common/TwitterFeed.tsx
Original file line number Diff line number Diff line change
@@ -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 }} />
);
}
6 changes: 5 additions & 1 deletion packages/react/src/components/layout/Frame.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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 />
Expand Down
9 changes: 8 additions & 1 deletion packages/react/src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";
Expand All @@ -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>
Expand Down
10 changes: 6 additions & 4 deletions packages/react/src/routes/home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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
Expand Down
6 changes: 6 additions & 0 deletions packages/react/src/routes/router.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"));
Expand All @@ -23,6 +24,7 @@ const router = createBrowserRouter([
{
path: "/",
element: <Frame />,
ErrorBoundary: ErrorFallback,
children: [
{
path: "favorites",
Expand Down Expand Up @@ -120,6 +122,10 @@ const router = createBrowserRouter([
path: "debug/run",
element: <div>Debug Run</div>,
},
{
path: "*",
element: <div>Not found</div>,
},
],
},
]);
Expand Down

0 comments on commit 771daee

Please sign in to comment.