Refactoring to use Error instead of string in the useError hook state variable

www/app/(errors)/errorContext.tsx

@@ -2,8 +2,8 @@
 import React, { createContext, useContext, useState } from "react";
 
 interface ErrorContextProps {
-  error: string;
-  setError: React.Dispatch<React.SetStateAction<string>>;
+  error: Error | null;
+  setError: React.Dispatch<React.SetStateAction<Error | null>>;
 }
 
 const ErrorContext = createContext<ErrorContextProps | undefined>(undefined);
@@ -21,7 +21,7 @@ interface ErrorProviderProps {
 }
 
 export const ErrorProvider: React.FC<ErrorProviderProps> = ({ children }) => {
-  const [error, setError] = useState<string>("");
+  const [error, setError] = useState<Error | null>(null);
 
   return (
     <ErrorContext.Provider value={{ error, setError }}>

www/app/(errors)/errorMessage.tsx

@@ -1,13 +1,18 @@
 "use client";
 import { useError } from "./errorContext";
 import { useEffect, useState } from "react";
+import * as Sentry from "@sentry/react";
 
 const ErrorMessage: React.FC = () => {
   const { error, setError } = useError();
   const [isVisible, setIsVisible] = useState<boolean>(false);
 
   useEffect(() => {
-    if (error) setIsVisible(true);
+    if (error) {
+      setIsVisible(true);
+      Sentry.captureException(error);
+      console.error("Error", error.message, error);
+    }
   }, [error]);
 
   if (!isVisible || !error) return null;
@@ -16,12 +21,12 @@ const ErrorMessage: React.FC = () => {
     <div
       onClick={() => {
         setIsVisible(false);
-        setError("");
+        setError(null);
       }}
       className="max-w-xs z-50 fixed top-16 right-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded transition-opacity duration-300 ease-out opacity-100 hover:opacity-75 cursor-pointer transform hover:scale-105"
       role="alert"
     >
-      <span className="block sm:inline">{error}</span>
+      <span className="block sm:inline">{error?.message}</span>
     </div>
   );
 };

www/app/(errors)/handleError.ts

@@ -1,18 +0,0 @@
-import * as Sentry from "@sentry/react";
-import { Dispatch, SetStateAction } from "react";
-
-const handleError = (
-  setError: Dispatch<SetStateAction<String>>,
-  errorString: string,
-  errorObj?: any,
-) => {
-  setError(errorString);
-
-  if (errorObj) {
-    Sentry.captureException(errorObj);
-  } else {
-    Sentry.captureMessage(errorString);
-  }
-};
-
-export default handleError;

www/app/transcripts/useTranscript.ts

@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
 import { DefaultApi, V1TranscriptsCreateRequest } from "../api/apis/DefaultApi";
 import { GetTranscript } from "../api";
 import { useError } from "../(errors)/errorContext";
-import handleError from "../(errors)/handleError";
 
 type UseTranscript = {
   response: GetTranscript | null;
@@ -37,10 +36,7 @@ const useTranscript = (api: DefaultApi): UseTranscript => {
         console.debug("New transcript created:", result);
       })
       .catch((err) => {
-        const errorString = err.response || err.message || "Unknown error";
-        handleError(setError, errorString, err);
-        setLoading(false);
-        console.error("Error creating transcript:", errorString);
+        setError(err);
       });
   };
 

www/app/transcripts/useWebRTC.ts

@@ -5,7 +5,6 @@ import {
   V1TranscriptRecordWebrtcRequest,
 } from "../api/apis/DefaultApi";
 import { useError } from "../(errors)/errorContext";
-import handleError from "../(errors)/handleError";
 
 const useWebRTC = (
   stream: MediaStream | null,
@@ -25,16 +24,12 @@ const useWebRTC = (
     try {
       p = new Peer({ initiator: true, stream: stream });
     } catch (error) {
-      handleError(
-        setError,
-        `Failed to create WebRTC Peer: ${error.message}`,
-        error,
-      );
+      setError(error);
       return;
     }
 
     p.on("error", (err) => {
-      handleError(setError, `WebRTC error: ${err.message}`, err);
+      setError(new Error(`WebRTC error: ${err}`));
     });
 
     p.on("signal", (data: any) => {
@@ -53,19 +48,11 @@ const useWebRTC = (
             try {
               p.signal(answer);
             } catch (error) {
-              handleError(
-                setError,
-                `Failed to signal answer: ${error.message}`,
-                error,
-              );
+              setError(error);
             }
           })
-          .catch((err) => {
-            const errorString =
-              "WebRTC signaling error: " +
-              (err.response || err.message || "Unknown error");
-            handleError(setError, errorString, err);
-            console.error(errorString);
+          .catch((error) => {
+            setError(error);
           });
       }
     });

www/app/transcripts/useWebSockets.ts

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import { Topic, FinalSummary, Status } from "./webSocketTypes";
 import { useError } from "../(errors)/errorContext";
-import handleError from "../(errors)/handleError";
 
 type UseWebSockets = {
   transcriptText: string;
@@ -106,32 +105,25 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
             break;
 
           default:
-            console.error("Unknown event:", message.event);
-            handleError(
-              setError,
-              `Received unknown WebSocket event: ${message.event}`,
+            setError(
+              new Error(`Received unknown WebSocket event: ${message.event}`),
             );
         }
       } catch (error) {
-        handleError(
-          setError,
-          `Failed to process WebSocket message: ${error.message}`,
-          error,
-        );
+        setError(error);
       }
     };
 
     ws.onerror = (error) => {
       console.error("WebSocket error:", error);
-      handleError(setError, "A WebSocket error occurred.", error);
+      setError(new Error("A WebSocket error occurred."));
     };
 
     ws.onclose = (event) => {
       console.debug("WebSocket connection closed");
       if (event.code !== 1000) {
-        handleError(
-          setError,
-          `WebSocket closed unexpectedly with code: ${event.code}`,
+        setError(
+          new Error(`WebSocket closed unexpectedly with code: ${event.code}`),
         );
       }
     };