Merge pull request #208 from Monadical-SAS/207-implement-error-handling-make-sure-theyre-displayed-to-the-user-logged-in-sentry

More robust error handling & Display errors to user
2025-12-20 20:29:06 +00:00 · 2023-09-01 12:38:48 +07:00
parent a7f0cdd50e 41ca80358c
commit 487eb1ae22
6 changed files with 144 additions and 46 deletions
--- a/www/app/(errors)/errorContext.tsx
+++ b/www/app/(errors)/errorContext.tsx
@@ -0,0 +1,31 @@
+"use client";
+import React, { createContext, useContext, useState } from "react";
+
+interface ErrorContextProps {
+  error: Error | null;
+  setError: React.Dispatch<React.SetStateAction<Error | null>>;
+}
+
+const ErrorContext = createContext<ErrorContextProps | undefined>(undefined);
+
+export const useError = () => {
+  const context = useContext(ErrorContext);
+  if (!context) {
+    throw new Error("useError must be used within an ErrorProvider");
+  }
+  return context;
+};
+
+interface ErrorProviderProps {
+  children: React.ReactNode;
+}
+
+export const ErrorProvider: React.FC<ErrorProviderProps> = ({ children }) => {
+  const [error, setError] = useState<Error | null>(null);
+
+  return (
+    <ErrorContext.Provider value={{ error, setError }}>
+      {children}
+    </ErrorContext.Provider>
+  );
+};
--- a/www/app/(errors)/errorMessage.tsx
+++ b/www/app/(errors)/errorMessage.tsx
@@ -0,0 +1,34 @@
+"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);
+      Sentry.captureException(error);
+      console.error("Error", error.message, error);
+    }
+  }, [error]);
+
+  if (!isVisible || !error) return null;
+
+  return (
+    <div
+      onClick={() => {
+        setIsVisible(false);
+        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?.message}</span>
+    </div>
+  );
+};
+
+export default ErrorMessage;
--- a/www/app/layout.tsx
+++ b/www/app/layout.tsx
@@ -3,6 +3,8 @@ import { Roboto } from "next/font/google";
 import { Metadata } from "next";
 import FiefWrapper from "./(auth)/fiefWrapper";
 import UserInfo from "./(auth)/userInfo";
+import { ErrorProvider } from "./(errors)/errorContext";
+import ErrorMessage from "./(errors)/errorMessage";

 const roboto = Roboto({ subsets: ["latin"], weight: "400" });

@@ -55,19 +57,24 @@ export default function RootLayout({ children }) {
    <html lang="en">
      <body className={roboto.className + " flex flex-col min-h-screen"}>
        <FiefWrapper>
-          <div id="container">
-            <div className="flex flex-col items-center h-[100svh] bg-gradient-to-r from-[#8ec5fc30] to-[#e0c3fc42]">
-              <UserInfo />
+          <ErrorProvider>
+            <ErrorMessage />
+            <div id="container">
+              <div className="flex flex-col items-center h-[100svh] bg-gradient-to-r from-[#8ec5fc30] to-[#e0c3fc42]">
+                <UserInfo />

-              <div className="h-[13svh] flex flex-col justify-center items-center">
-                <h1 className="text-5xl font-bold text-blue-500">Reflector</h1>
-                <p className="text-gray-500">
-                  Capture The Signal, Not The Noise
-                </p>
+                <div className="h-[13svh] flex flex-col justify-center items-center">
+                  <h1 className="text-5xl font-bold text-blue-500">
+                    Reflector
+                  </h1>
+                  <p className="text-gray-500">
+                    Capture The Signal, Not The Noise
+                  </p>
+                </div>
+                {children}
              </div>
-              {children}
            </div>
-          </div>
+          </ErrorProvider>
        </FiefWrapper>
      </body>
    </html>
--- a/www/app/transcripts/useTranscript.ts
+++ b/www/app/transcripts/useTranscript.ts
@@ -1,19 +1,18 @@
 import { useEffect, useState } from "react";
 import { DefaultApi, V1TranscriptsCreateRequest } from "../api/apis/DefaultApi";
 import { GetTranscript } from "../api";
-import getApi from "../lib/getApi";
+import { useError } from "../(errors)/errorContext";

 type UseTranscript = {
  response: GetTranscript | null;
  loading: boolean;
-  error: string | null;
  createTranscript: () => void;
 };

 const useTranscript = (api: DefaultApi): UseTranscript => {
  const [response, setResponse] = useState<GetTranscript | null>(null);
  const [loading, setLoading] = useState<boolean>(false);
-  const [error, setError] = useState<string | null>(null);
+  const { setError } = useError();

  const createTranscript = () => {
    setLoading(true);
@@ -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";
-        setError(errorString);
-        setLoading(false);
-        console.error("Error creating transcript:", errorString);
+        setError(err);
      });
  };

@@ -48,7 +44,7 @@ const useTranscript = (api: DefaultApi): UseTranscript => {
    createTranscript();
  }, []);

-  return { response, loading, error, createTranscript };
+  return { response, loading, createTranscript };
 };

 export default useTranscript;
--- a/www/app/transcripts/useWebRTC.ts
+++ b/www/app/transcripts/useWebRTC.ts
@@ -4,7 +4,7 @@ import {
  DefaultApi,
  V1TranscriptRecordWebrtcRequest,
 } from "../api/apis/DefaultApi";
-import { Configuration } from "../api/runtime";
+import { useError } from "../(errors)/errorContext";

 const useWebRTC = (
  stream: MediaStream | null,
@@ -12,13 +12,25 @@ const useWebRTC = (
  api: DefaultApi,
 ): Peer => {
  const [peer, setPeer] = useState<Peer | null>(null);
+  const { setError } = useError();

  useEffect(() => {
    if (!stream || !transcriptId) {
      return;
    }

-    let p: Peer = new Peer({ initiator: true, stream: stream });
+    let p: Peer;
+
+    try {
+      p = new Peer({ initiator: true, stream: stream });
+    } catch (error) {
+      setError(error);
+      return;
+    }
+
+    p.on("error", (err) => {
+      setError(new Error(`WebRTC error: ${err}`));
+    });

    p.on("signal", (data: any) => {
      if ("sdp" in data) {
@@ -33,10 +45,14 @@ const useWebRTC = (
        api
          .v1TranscriptRecordWebrtc(requestParameters)
          .then((answer) => {
-            p.signal(answer);
+            try {
+              p.signal(answer);
+            } catch (error) {
+              setError(error);
+            }
          })
-          .catch((err) => {
-            console.error("WebRTC signaling error:", err);
+          .catch((error) => {
+            setError(error);
          });
      }
    });
--- a/www/app/transcripts/useWebSockets.ts
+++ b/www/app/transcripts/useWebSockets.ts
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { Topic, FinalSummary, Status } from "./webSocketTypes";
+import { useError } from "../(errors)/errorContext";

 type UseWebSockets = {
  transcriptText: string;
@@ -15,6 +16,7 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
    summary: "",
  });
  const [status, setStatus] = useState<Status>({ value: "disconnected" });
+  const { setError } = useError();

  useEffect(() => {
    document.onkeyup = (e) => {
@@ -77,41 +79,53 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
    ws.onmessage = (event) => {
      const message = JSON.parse(event.data);

-      switch (message.event) {
-        case "TRANSCRIPT":
-          if (message.data.text) {
-            setTranscriptText((message.data.text ?? "").trim());
-            console.debug("TRANSCRIPT event:", message.data);
-          }
-          break;
+      try {
+        switch (message.event) {
+          case "TRANSCRIPT":
+            if (message.data.text) {
+              setTranscriptText((message.data.text ?? "").trim());
+              console.debug("TRANSCRIPT event:", message.data);
+            }
+            break;

-        case "TOPIC":
-          setTopics((prevTopics) => [...prevTopics, message.data]);
-          console.debug("TOPIC event:", message.data);
-          break;
+          case "TOPIC":
+            setTopics((prevTopics) => [...prevTopics, message.data]);
+            console.debug("TOPIC event:", message.data);
+            break;

-        case "FINAL_SUMMARY":
-          if (message.data) {
-            setFinalSummary(message.data);
-            console.debug("FINAL_SUMMARY event:", message.data);
-          }
-          break;
+          case "FINAL_SUMMARY":
+            if (message.data) {
+              setFinalSummary(message.data);
+              console.debug("FINAL_SUMMARY event:", message.data);
+            }
+            break;

-        case "STATUS":
-          setStatus(message.data);
-          break;
+          case "STATUS":
+            setStatus(message.data);
+            break;

-        default:
-          console.error("Unknown event:", message.event);
+          default:
+            setError(
+              new Error(`Received unknown WebSocket event: ${message.event}`),
+            );
+        }
+      } catch (error) {
+        setError(error);
      }
    };

    ws.onerror = (error) => {
      console.error("WebSocket error:", error);
+      setError(new Error("A WebSocket error occurred."));
    };

-    ws.onclose = () => {
+    ws.onclose = (event) => {
      console.debug("WebSocket connection closed");
+      if (event.code !== 1000) {
+        setError(
+          new Error(`WebSocket closed unexpectedly with code: ${event.code}`),
+        );
+      }
    };

    return () => {