Merge pull request #302 from Monadical-SAS/sara/improve-errors

Proposal : improve error messages

www/app/(errors)/errorContext.tsx

@@ -3,7 +3,8 @@ import React, { createContext, useContext, useState } from "react";
 
 interface ErrorContextProps {
   error: Error | null;
-  setError: React.Dispatch<React.SetStateAction<Error | null>>;
+  humanMessage?: string;
+  setError: (error: Error, humanMessage?: string) => void;
 }
 
 const ErrorContext = createContext<ErrorContextProps | undefined>(undefined);
@@ -22,9 +23,16 @@ interface ErrorProviderProps {
 
 export const ErrorProvider: React.FC<ErrorProviderProps> = ({ children }) => {
   const [error, setError] = useState<Error | null>(null);
+  const [humanMessage, setHumanMessage] = useState<string | undefined>();
 
+  const declareError = (error, humanMessage?) => {
+    setError(error);
+    setHumanMessage(humanMessage);
+  };
   return (
-    <ErrorContext.Provider value={{ error, setError }}>
+    <ErrorContext.Provider
+      value={{ error, setError: declareError, humanMessage }}
+    >
       {children}
     </ErrorContext.Provider>
   );

www/app/(errors)/errorMessage.tsx

@@ -4,29 +4,51 @@ import { useEffect, useState } from "react";
 import * as Sentry from "@sentry/react";
 
 const ErrorMessage: React.FC = () => {
-  const { error, setError } = useError();
+  const { error, setError, humanMessage } = useError();
   const [isVisible, setIsVisible] = useState<boolean>(false);
 
+  // Setup Shortcuts
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      switch (event.key) {
+        case "^":
+          throw new Error("Unhandled Exception thrown by '^' shortcut");
+        case "$":
+          setError(
+            new Error("Unhandled Exception thrown by '$' shortcut"),
+            "You did this to yourself",
+          );
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyPress);
+    return () => document.removeEventListener("keydown", handleKeyPress);
+  }, []);
+
   useEffect(() => {
     if (error) {
-      setIsVisible(true);
-      Sentry.captureException(error);
-      console.error("Error", error.message, error);
+      if (humanMessage) {
+        setIsVisible(true);
+        Sentry.captureException(Error(humanMessage, { cause: error }));
+      } else {
+        Sentry.captureException(error);
+      }
+
+      console.error("Error", error);
     }
   }, [error]);
 
-  if (!isVisible || !error) return null;
+  if (!isVisible || !humanMessage) return null;
 
   return (
     <button
       onClick={() => {
         setIsVisible(false);
-        setError(null);
       }}
       className="max-w-xs z-50 fixed bottom-5 right-5 md:bottom-10 md:right-10 border-solid 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-80 focus-visible:opacity-80 cursor-pointer transform hover:scale-105 focus-visible:scale-105"
       role="alert"
     >
-      <span className="block sm:inline">{error?.message}</span>
+      <span className="block sm:inline">{humanMessage}</span>
     </button>
   );
 };

www/app/[domain]/browse/pagination.tsx

@@ -40,7 +40,7 @@ export default function Pagination(props: PaginationProps) {
   return (
     <div className="flex justify-center space-x-4 my-4">
       <button
-        className={`w-10 h-10 rounded-full p-2 border border-gray-300 rounded-full disabled:bg-white ${
+        className={`w-10 h-10 rounded-full p-2 border border-gray-300 disabled:bg-white ${
           canGoPrevious ? "text-gray-500" : "text-gray-300"
         }`}
         onClick={() => handlePageChange(page - 1)}
@@ -52,7 +52,7 @@ export default function Pagination(props: PaginationProps) {
       {pageNumbers.map((pageNumber) => (
         <button
           key={pageNumber}
-          className={`w-10 h-10 rounded-full p-2 border rounded-full ${
+          className={`w-10 h-10 rounded-full p-2 border ${
             page === pageNumber ? "border-gray-600" : "border-gray-300"
           } rounded`}
           onClick={() => handlePageChange(pageNumber)}
@@ -62,7 +62,7 @@ export default function Pagination(props: PaginationProps) {
       ))}
 
       <button
-        className={`w-10 h-10 rounded-full p-2 border border-gray-300 rounded-full disabled:bg-white ${
+        className={`w-10 h-10 rounded-full p-2 border border-gray-300 disabled:bg-white ${
           canGoNext ? "text-gray-500" : "text-gray-300"
         }`}
         onClick={() => handlePageChange(page + 1)}

www/app/[domain]/transcripts/[transcriptId]/page.tsx

@@ -61,7 +61,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
                 transcriptId={transcript.response.id}
               />
             )}
-            {waveform?.loading === false && (
+            {!waveform?.loading && (
               <Recorder
                 topics={topics?.topics || []}
                 useActiveTopic={useActiveTopic}

www/app/[domain]/transcripts/createTranscript.ts

@@ -45,7 +45,10 @@ const useCreateTranscript = (): CreateTranscript => {
         console.debug("New transcript created:", result);
       })
       .catch((err) => {
-        setError(err);
+        setError(
+          err,
+          "There was an issue creating a transcript, please try again.",
+        );
         setErrorState(err);
         setLoading(false);
       });

www/app/[domain]/transcripts/recorder.tsx

@@ -13,7 +13,6 @@ import { Topic } from "./webSocketTypes";
 import { AudioWaveform } from "../../api";
 import AudioInputsDropdown from "./audioInputsDropdown";
 import { Option } from "react-dropdown";
-import { useError } from "../../(errors)/errorContext";
 import { waveSurferStyles } from "../../styles/recorder";
 import useMp3 from "./useMp3";
 
@@ -51,7 +50,6 @@ export default function Recorder(props: RecorderProps) {
   const [activeTopic, setActiveTopic] = props.useActiveTopic;
   const topicsRef = useRef(props.topics);
   const [showDevices, setShowDevices] = useState(false);
-  const { setError } = useError();
 
   // Function used to setup keyboard shortcuts for the streamdeck
   const setupProjectorKeys = (): (() => void) => {
@@ -73,9 +71,6 @@ export default function Recorder(props: RecorderProps) {
           if (!record.isRecording()) return;
           handleRecClick();
           break;
-        case "%":
-          setError(new Error("Error triggered by '%' shortcut"));
-          break;
         case "^":
           throw new Error("Unhandled Exception thrown by '^' shortcut");
         case "(":
@@ -162,7 +157,7 @@ export default function Recorder(props: RecorderProps) {
     if (!wavesurfer) return;
     if (!props.mp3Blob) return;
     wavesurfer.loadBlob(props.mp3Blob);
-  }, [props.mp3Blob]);
+  }, [props.mp3Blob, wavesurfer]);
 
   useEffect(() => {
     topicsRef.current = props.topics;

www/app/[domain]/transcripts/useMp3.ts

@@ -1,13 +1,9 @@
 import { useContext, useEffect, useState } from "react";
-import {
-  DefaultApi,
-  // V1TranscriptGetAudioMp3Request,
-} from "../../api/apis/DefaultApi";
-import {} from "../../api";
 import { useError } from "../../(errors)/errorContext";
 import { DomainContext } from "../domainContext";
 import getApi from "../../lib/getApi";
 import { useFiefAccessTokenInfo } from "@fief/fief/build/esm/nextjs/react";
+import { shouldShowError } from "../../lib/errorUtils";
 
 type Mp3Response = {
   url: string | null;
@@ -52,7 +48,6 @@ const useMp3 = (protectedPath: boolean, id: string): Mp3Response => {
     if (accessTokenInfo) {
       headers.set("Authorization", "Bearer " + accessTokenInfo.access_token);
     }
-
     fetch(localUrl, {
       method: "GET",
       headers,
@@ -65,8 +60,13 @@ const useMp3 = (protectedPath: boolean, id: string): Mp3Response => {
         });
       })
       .catch((err) => {
-        setError(err);
         setErrorState(err);
+        const shouldShowHuman = shouldShowError(error);
+        if (shouldShowHuman) {
+          setError(err, "There was an error loading the audio");
+        } else {
+          setError(err);
+        }
       });
   };
 

www/app/[domain]/transcripts/useTopics.ts

@@ -6,6 +6,7 @@ import {
 import { useError } from "../../(errors)/errorContext";
 import { Topic } from "./webSocketTypes";
 import getApi from "../../lib/getApi";
+import { shouldShowError } from "../../lib/errorUtils";
 
 type TranscriptTopics = {
   topics: Topic[] | null;
@@ -35,8 +36,13 @@ const useTopics = (protectedPath, id: string): TranscriptTopics => {
         console.debug("Transcript topics loaded:", result);
       })
       .catch((err) => {
-        setError(err);
         setErrorState(err);
+        const shouldShowHuman = shouldShowError(err);
+        if (shouldShowHuman) {
+          setError(err, "There was an error loading the topics");
+        } else {
+          setError(err);
+        }
       });
   }, [id, api]);
 

www/app/[domain]/transcripts/useTranscript.ts

@@ -3,6 +3,7 @@ import { V1TranscriptGetRequest } from "../../api/apis/DefaultApi";
 import { GetTranscript } from "../../api";
 import { useError } from "../../(errors)/errorContext";
 import getApi from "../../lib/getApi";
+import { shouldShowError } from "../../lib/errorUtils";
 
 type Transcript = {
   response: GetTranscript | null;
@@ -34,9 +35,14 @@ const useTranscript = (
         setLoading(false);
         console.debug("Transcript Loaded:", result);
       })
-      .catch((err) => {
-        setError(err);
-        setErrorState(err);
+      .catch((error) => {
+        const shouldShowHuman = shouldShowError(error);
+        if (shouldShowHuman) {
+          setError(error, "There was an error loading the transcript");
+        } else {
+          setError(error);
+        }
+        setErrorState(error);
       });
   }, [id, !api]);
 

www/app/[domain]/transcripts/useWaveform.ts

@@ -6,6 +6,7 @@ import {
 import { AudioWaveform } from "../../api";
 import { useError } from "../../(errors)/errorContext";
 import getApi from "../../lib/getApi";
+import { shouldShowError } from "../../lib/errorUtils";
 
 type AudioWaveFormResponse = {
   waveform: AudioWaveform | null;
@@ -22,7 +23,6 @@ const useWaveform = (protectedPath, id: string): AudioWaveFormResponse => {
 
   useEffect(() => {
     if (!id || !api) return;
-
     setLoading(true);
     const requestParameters: V1TranscriptGetAudioWaveformRequest = {
       transcriptId: id,
@@ -35,8 +35,13 @@ const useWaveform = (protectedPath, id: string): AudioWaveFormResponse => {
         console.debug("Transcript waveform loaded:", result);
       })
       .catch((err) => {
-        setError(err);
         setErrorState(err);
+        const shouldShowHuman = shouldShowError(err);
+        if (shouldShowHuman) {
+          setError(err, "There was an error loading the waveform");
+        } else {
+          setError(err);
+        }
       });
   }, [id, api]);
 

www/app/[domain]/transcripts/useWebRTC.ts

@@ -28,7 +28,7 @@ const useWebRTC = (
     try {
       p = new Peer({ initiator: true, stream: stream });
     } catch (error) {
-      setError(error);
+      setError(error, "Error creating WebRTC");
       return;
     }
 
@@ -57,7 +57,7 @@ const useWebRTC = (
             }
           })
           .catch((error) => {
-            setError(error);
+            setError(error, "Error loading WebRTCOffer");
           });
       }
     });

www/app/[domain]/transcripts/useWebSockets.ts

@@ -22,7 +22,7 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
   const [finalSummary, setFinalSummary] = useState<FinalSummary>({
     summary: "",
   });
-  const [status, setStatus] = useState<Status>({ value: "disconnected" });
+  const [status, setStatus] = useState<Status>({ value: "initial" });
   const { setError } = useError();
   const router = useRouter();
 
@@ -350,11 +350,14 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
             if (message.data.value === "ended") {
               const newUrl = "/transcripts/" + transcriptId;
               router.push(newUrl);
-              console.debug(
-                "FINAL_LONG_SUMMARY event:",
-                message.data,
-                "newUrl",
-                newUrl,
+              console.debug("FINAL_LONG_SUMMARY event:", message.data);
+            }
+            if (message.data.value === "error") {
+              const newUrl = "/transcripts/" + transcriptId;
+              router.push(newUrl);
+              setError(
+                Error("Websocket error status"),
+                "There was an error processing this meeting.",
               );
             }
             setStatus(message.data);

www/app/lib/edgeConfig.ts

@@ -3,7 +3,7 @@ import { isDevelopment } from "./utils";
 
 const localConfig = {
   features: {
-    requireLogin: false,
+    requireLogin: true,
     privacy: true,
     browse: true,
   },

www/app/lib/errorUtils.ts

@@ -0,0 +1,8 @@
+function shouldShowError(error: Error | null | undefined) {
+  if (error?.name == "ResponseError" && error["response"].status == 404)
+    return false;
+  if (error?.name == "FetchError") return false;
+  return true;
+}
+
+export { shouldShowError };

www/app/lib/getApi.ts

@@ -14,9 +14,7 @@ export default function getApi(protectedPath: boolean): DefaultApi | undefined {
   if (!api_url) throw new Error("no API URL");
 
   useEffect(() => {
-    // console.log('trying auth', protectedPath, requireLogin, accessTokenInfo)
     if (protectedPath && requireLogin && !accessTokenInfo) {
-      // console.log('waiting auth')
       return;
     }