From 41ca80358c67cd2721054383dffd5236f1cd2b33 Mon Sep 17 00:00:00 2001 From: Koper Date: Fri, 1 Sep 2023 12:36:13 +0700 Subject: [PATCH] Refactoring to use Error instead of string in the useError hook state variable --- www/app/(errors)/errorContext.tsx | 6 +++--- www/app/(errors)/errorMessage.tsx | 11 ++++++++--- www/app/(errors)/handleError.ts | 18 ------------------ www/app/transcripts/useTranscript.ts | 6 +----- www/app/transcripts/useWebRTC.ts | 23 +++++------------------ www/app/transcripts/useWebSockets.ts | 20 ++++++-------------- 6 files changed, 23 insertions(+), 61 deletions(-) delete mode 100644 www/app/(errors)/handleError.ts diff --git a/www/app/(errors)/errorContext.tsx b/www/app/(errors)/errorContext.tsx index 31c5c505..d8a80c04 100644 --- a/www/app/(errors)/errorContext.tsx +++ b/www/app/(errors)/errorContext.tsx @@ -2,8 +2,8 @@ import React, { createContext, useContext, useState } from "react"; interface ErrorContextProps { - error: string; - setError: React.Dispatch>; + error: Error | null; + setError: React.Dispatch>; } const ErrorContext = createContext(undefined); @@ -21,7 +21,7 @@ interface ErrorProviderProps { } export const ErrorProvider: React.FC = ({ children }) => { - const [error, setError] = useState(""); + const [error, setError] = useState(null); return ( diff --git a/www/app/(errors)/errorMessage.tsx b/www/app/(errors)/errorMessage.tsx index 874a5b8f..d5109733 100644 --- a/www/app/(errors)/errorMessage.tsx +++ b/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(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 = () => {
{ 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" > - {error} + {error?.message}
); }; diff --git a/www/app/(errors)/handleError.ts b/www/app/(errors)/handleError.ts deleted file mode 100644 index 1b9f64e3..00000000 --- a/www/app/(errors)/handleError.ts +++ /dev/null @@ -1,18 +0,0 @@ -import * as Sentry from "@sentry/react"; -import { Dispatch, SetStateAction } from "react"; - -const handleError = ( - setError: Dispatch>, - errorString: string, - errorObj?: any, -) => { - setError(errorString); - - if (errorObj) { - Sentry.captureException(errorObj); - } else { - Sentry.captureMessage(errorString); - } -}; - -export default handleError; diff --git a/www/app/transcripts/useTranscript.ts b/www/app/transcripts/useTranscript.ts index cc0d4bde..f2188f62 100644 --- a/www/app/transcripts/useTranscript.ts +++ b/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); }); }; diff --git a/www/app/transcripts/useWebRTC.ts b/www/app/transcripts/useWebRTC.ts index c5b55315..b99382ab 100644 --- a/www/app/transcripts/useWebRTC.ts +++ b/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); }); } }); diff --git a/www/app/transcripts/useWebSockets.ts b/www/app/transcripts/useWebSockets.ts index 4e0cc4b3..7bde6d9b 100644 --- a/www/app/transcripts/useWebSockets.ts +++ b/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}`), ); } };