improve error handling

johnpc · Jan 2, 2025 · 42575fb · 42575fb
1 parent cc022f1
commit 42575fb
Show file tree

Hide file tree

Showing 16 changed files with 242 additions and 82 deletions.
diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml
@@ -3,7 +3,7 @@ name: Build and Publish Docker Image
 on:
   push:
     tags:
-      - 'v*.*.*'
+      - "v*.*.*"
 
 jobs:
   docker:
@@ -19,8 +19,8 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
-          cache: 'npm'
+          node-version: "18"
+          cache: "npm"
 
       - name: Install dependencies
         run: npm ci

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "lucide-react": "^0.469.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^5.0.0",
     "react-router-dom": "^7.1.1",
     "tailwind-merge": "^2.6.0"
   },

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,5 @@
 import "@radix-ui/themes/styles.css";
+import { ErrorBoundary } from "react-error-boundary";
 import { Theme } from "@radix-ui/themes";
 import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
 import SplashPage from "./components/pages/SplashPage";
@@ -15,9 +16,11 @@ import MusicVideoPage from "./components/pages/MusicVideoPage";
 // Layout component that wraps all routes
 function RootLayout() {
   return (
-    <Theme>
-      <Outlet />
-    </Theme>
+    <ErrorBoundary fallback={<div>Something went wrong</div>}>
+      <Theme>
+        <Outlet />
+      </Theme>
+    </ErrorBoundary>
   );
 }
 

diff --git a/src/components/pages/AudioReviewPage.tsx b/src/components/pages/AudioReviewPage.tsx
@@ -5,8 +5,10 @@ import { Container, Grid, Box, Spinner, Button } from "@radix-ui/themes";
 import { motion } from "framer-motion";
 import { styled } from "@stitches/react";
 import { useNavigate } from "react-router-dom";
+import { useErrorBoundary } from "react-error-boundary";
 
 export default function AudioReviewPage() {
+  const { showBoundary } = useErrorBoundary();
   const navigate = useNavigate();
 
   const [isLoading, setIsLoading] = useState(true);
@@ -15,8 +17,13 @@ export default function AudioReviewPage() {
   useEffect(() => {
     const setup = async () => {
       setIsLoading(true);
-      setAudios(await listAudio());
-      setIsLoading(false);
+      try {
+        setAudios(await listAudio());
+      } catch (e) {
+        showBoundary(e);
+      } finally {
+        setIsLoading(false);
+      }
     };
     setup();
   }, []);

diff --git a/src/components/pages/FavoriteActorsPage.tsx b/src/components/pages/FavoriteActorsPage.tsx
@@ -10,8 +10,10 @@ import { useNavigate } from "react-router-dom";
 import { generateGuid } from "@/lib/utils";
 import { BaseItemPerson } from "@jellyfin/sdk/lib/generated-client";
 import { ActorCard } from "./MoviesReviewPage/ActorCard";
+import { useErrorBoundary } from "react-error-boundary";
 
 export default function FavoriteActorsPage() {
+  const { showBoundary } = useErrorBoundary();
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(true);
   const [favoriteActors, setFavoriteActors] = useState<
@@ -27,8 +29,13 @@ export default function FavoriteActorsPage() {
   useEffect(() => {
     const setup = async () => {
       setIsLoading(true);
-      setFavoriteActors(await listFavoriteActors());
-      setIsLoading(false);
+      try {
+        setFavoriteActors(await listFavoriteActors());
+      } catch (e) {
+        showBoundary(e);
+      } finally {
+        setIsLoading(false);
+      }
     };
     setup();
   }, []);

diff --git a/src/components/pages/LiveTvReviewPage.tsx b/src/components/pages/LiveTvReviewPage.tsx
@@ -6,6 +6,7 @@ import { styled } from "@stitches/react";
 import { Card, Text, Flex } from "@radix-ui/themes";
 import { formatDuration } from "@/lib/utils";
 import { useNavigate } from "react-router-dom";
+import { useErrorBoundary } from "react-error-boundary";
 
 interface ChannelCardProps {
   channelName: string;
@@ -34,18 +35,25 @@ export function ChannelCard({ channelName, duration }: ChannelCardProps) {
 }
 
 export default function LiveTvReviewPage() {
+  const { showBoundary } = useErrorBoundary();
+
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(true);
   const [channels, setChannels] = useState<ChannelCardProps[]>([]);
 
   useEffect(() => {
     const setup = async () => {
       setIsLoading(true);
-      const channelData = await listLiveTvChannels();
-      // Sort channels by duration in descending order
-      channelData.sort((a, b) => b.duration - a.duration);
-      setChannels(channelData);
-      setIsLoading(false);
+      try {
+        const channelData = await listLiveTvChannels();
+        // Sort channels by duration in descending order
+        channelData.sort((a, b) => b.duration - a.duration);
+        setChannels(channelData);
+      } catch (e) {
+        showBoundary(e);
+      } finally {
+        setIsLoading(false);
+      }
     };
     setup();
   }, []);

diff --git a/src/components/pages/MoviesReviewPage.tsx b/src/components/pages/MoviesReviewPage.tsx
@@ -6,17 +6,24 @@ import { motion } from "framer-motion";
 import { itemVariants, Title } from "../ui/styled";
 import { useNavigate } from "react-router-dom";
 import { generateGuid } from "@/lib/utils";
+import { useErrorBoundary } from "react-error-boundary";
 
 export default function MoviesReviewPage() {
+  const { showBoundary } = useErrorBoundary();
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(true);
   const [movies, setMovies] = useState<SimpleItemDto[]>([]);
 
   useEffect(() => {
     const setup = async () => {
       setIsLoading(true);
-      setMovies(await listMovies());
-      setIsLoading(false);
+      try {
+        setMovies(await listMovies());
+      } catch (error) {
+        showBoundary(error);
+      } finally {
+        setIsLoading(false);
+      }
     };
     setup();
   }, []);

diff --git a/src/components/pages/MusicVideoPage.tsx b/src/components/pages/MusicVideoPage.tsx
@@ -1,12 +1,17 @@
 import { useState, useEffect } from "react";
-import { listMusicVideos, SimpleItemDto } from "@/lib/playback-reporting-queries";
+import {
+  listMusicVideos,
+  SimpleItemDto,
+} from "@/lib/playback-reporting-queries";
 import { MovieCard } from "./MoviesReviewPage/MovieCard";
 import { Container, Grid, Box, Spinner, Button } from "@radix-ui/themes";
 import { motion } from "framer-motion";
 import { styled } from "@stitches/react";
 import { useNavigate } from "react-router-dom";
+import { useErrorBoundary } from "react-error-boundary";
 
 export default function MusicVideoPage() {
+  const { showBoundary } = useErrorBoundary();
   const navigate = useNavigate();
 
   const [isLoading, setIsLoading] = useState(true);
@@ -15,8 +20,13 @@ export default function MusicVideoPage() {
   useEffect(() => {
     const setup = async () => {
       setIsLoading(true);
-      setMusicVideos(await listMusicVideos());
-      setIsLoading(false);
+      try {
+        setMusicVideos(await listMusicVideos());
+      } catch (error) {
+        showBoundary(error);
+      } finally {
+        setIsLoading(false);
+      }
     };
     setup();
   }, []);

diff --git a/src/components/pages/OldestMoviePage.tsx b/src/components/pages/OldestMoviePage.tsx
@@ -6,24 +6,32 @@ import { motion } from "framer-motion";
 import { styled } from "@stitches/react";
 import { useNavigate } from "react-router-dom";
 import { Subtitle } from "../ui/styled";
+import { useErrorBoundary } from "react-error-boundary";
 
 export default function OldestMoviePage() {
+  const { showBoundary } = useErrorBoundary();
+
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(true);
   const [movie, setMovie] = useState<SimpleItemDto>();
 
   useEffect(() => {
     const setup = async () => {
       setIsLoading(true);
-      const movies = await listMovies();
-      movies.sort((a, b) => {
-        const aDate = new Date(a.date!);
-        const bDate = new Date(b.date!);
-        return aDate.getTime() - bDate.getTime();
-      });
-      const m = movies.find((s) => s)!;
-      setMovie(m);
-      setIsLoading(false);
+      try {
+        const movies = await listMovies();
+        movies.sort((a, b) => {
+          const aDate = new Date(a.date!);
+          const bDate = new Date(b.date!);
+          return aDate.getTime() - bDate.getTime();
+        });
+        const m = movies.find((s) => s)!;
+        setMovie(m);
+      } catch (e) {
+        showBoundary(e);
+      } finally {
+        setIsLoading(false);
+      }
     };
     setup();
   }, []);
@@ -72,7 +80,8 @@ export default function OldestMoviePage() {
         <Grid gap="6">
           <div style={{ textAlign: "center" }}>
             <Title as={motion.h1} variants={itemVariants}>
-              It's {new Date().getFullYear()}, but you've time traveled back to {movie?.productionYear}
+              It's {new Date().getFullYear()}, but you've time traveled back to{" "}
+              {movie?.productionYear}
             </Title>
 
             <Subtitle
@@ -81,17 +90,14 @@ export default function OldestMoviePage() {
               variants={itemVariants}
             >
               {movie?.name} came out on{" "}
-              {new Date(movie?.date ?? '').toLocaleDateString(undefined, {
+              {new Date(movie?.date ?? "").toLocaleDateString(undefined, {
                 year: "numeric",
                 month: "long",
                 day: "numeric",
               })}
             </Subtitle>
           </div>
-          <MovieCard
-            key={movie!.id}
-            item={movie!}
-          />
+          <MovieCard key={movie!.id} item={movie!} />
         </Grid>
       </Container>
       <Button

diff --git a/src/components/pages/OldestShowPage.tsx b/src/components/pages/OldestShowPage.tsx
@@ -6,8 +6,10 @@ import { motion } from "framer-motion";
 import { styled } from "@stitches/react";
 import { useNavigate } from "react-router-dom";
 import { Subtitle } from "../ui/styled";
+import { useErrorBoundary } from "react-error-boundary";
 
 export default function OldestShowPage() {
+  const { showBoundary } = useErrorBoundary();
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(true);
   const [show, setShow] = useState<{
@@ -20,16 +22,21 @@ export default function OldestShowPage() {
   useEffect(() => {
     const setup = async () => {
       setIsLoading(true);
-      const shows = await listShows();
-      shows.sort((a, b) => {
-        const aDate = new Date(a.item.date!);
-        const bDate = new Date(b.item.date!);
-        return aDate.getTime() - bDate.getTime();
-      });
-      const s = shows.find((s) => s)!;
-      console.log({ s });
-      setShow(s);
-      setIsLoading(false);
+      try {
+        const shows = await listShows();
+        shows.sort((a, b) => {
+          const aDate = new Date(a.item.date!);
+          const bDate = new Date(b.item.date!);
+          return aDate.getTime() - bDate.getTime();
+        });
+        const s = shows.find((s) => s)!;
+        console.log({ s });
+        setShow(s);
+      } catch (e) {
+        showBoundary(e);
+      } finally {
+        setIsLoading(false);
+      }
     };
     setup();
   }, []);