From 26330b9de243bcbe4862e6c3b86188ba8720b4e5 Mon Sep 17 00:00:00 2001
From: Sara <sara@monadical.com>
Date: Fri, 3 Nov 2023 17:15:03 +0100
Subject: [PATCH] Triage error and better websocket handling

---
 www/app/(errors)/errorContext.tsx                  |  3 ---
 www/app/[domain]/browse/pagination.tsx             |  2 +-
 .../[domain]/transcripts/[transcriptId]/page.tsx   |  2 +-
 www/app/[domain]/transcripts/recorder.tsx          |  2 +-
 www/app/[domain]/transcripts/useMp3.ts             | 14 +++++++-------
 www/app/[domain]/transcripts/useTopics.ts          |  8 +++++++-
 www/app/[domain]/transcripts/useTranscript.ts      | 13 ++++++++++---
 www/app/[domain]/transcripts/useWaveform.ts        | 10 ++++++++--
 www/app/[domain]/transcripts/useWebSockets.ts      | 10 ++--------
 www/app/lib/edgeConfig.ts                          |  2 +-
 www/app/lib/errorUtils.ts                          |  7 +++++++
 11 files changed, 45 insertions(+), 28 deletions(-)
 create mode 100644 www/app/lib/errorUtils.ts

diff --git a/www/app/(errors)/errorContext.tsx b/www/app/(errors)/errorContext.tsx
index e3e58ea5..d541c6f0 100644
--- a/www/app/(errors)/errorContext.tsx
+++ b/www/app/(errors)/errorContext.tsx
@@ -28,9 +28,6 @@ export const ErrorProvider: React.FC<ErrorProviderProps> = ({ children }) => {
   const declareError = (error, humanMessage?) => {
     setError(error);
     setHumanMessage(humanMessage);
-    console.log(error.message, { ...error });
-    //TODO ignore not found in request errors (in useTopics, useTranscript...)
-    // if (error.name == ResponseError && error.response.status == 404)
   };
   return (
     <ErrorContext.Provider
diff --git a/www/app/[domain]/browse/pagination.tsx b/www/app/[domain]/browse/pagination.tsx
index 8716b634..e10d5321 100644
--- a/www/app/[domain]/browse/pagination.tsx
+++ b/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)}
diff --git a/www/app/[domain]/transcripts/[transcriptId]/page.tsx b/www/app/[domain]/transcripts/[transcriptId]/page.tsx
index 9f9348c8..3668ba5f 100644
--- a/www/app/[domain]/transcripts/[transcriptId]/page.tsx
+++ b/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}
diff --git a/www/app/[domain]/transcripts/recorder.tsx b/www/app/[domain]/transcripts/recorder.tsx
index 2d641264..a1027da8 100644
--- a/www/app/[domain]/transcripts/recorder.tsx
+++ b/www/app/[domain]/transcripts/recorder.tsx
@@ -157,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;
diff --git a/www/app/[domain]/transcripts/useMp3.ts b/www/app/[domain]/transcripts/useMp3.ts
index dcc2dde2..16470af3 100644
--- a/www/app/[domain]/transcripts/useMp3.ts
+++ b/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 { shouldShowGet } 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, "There was an error loading the audio");
         setErrorState(err);
+        const shouldShowHuman = shouldShowGet(error);
+        if (shouldShowHuman) {
+          setError(err, "There was an error loading the audio");
+        } else {
+          setError(err);
+        }
       });
   };
 
diff --git a/www/app/[domain]/transcripts/useTopics.ts b/www/app/[domain]/transcripts/useTopics.ts
index 3a88e1a9..3efddeb4 100644
--- a/www/app/[domain]/transcripts/useTopics.ts
+++ b/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 { shouldShowGet } 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, "There was an error loading the topics");
         setErrorState(err);
+        const shouldShowHuman = shouldShowGet(err);
+        if (shouldShowHuman) {
+          setError(err, "There was an error loading the topics");
+        } else {
+          setError(err);
+        }
       });
   }, [id, api]);
 
diff --git a/www/app/[domain]/transcripts/useTranscript.ts b/www/app/[domain]/transcripts/useTranscript.ts
index 3445a9a1..9b923353 100644
--- a/www/app/[domain]/transcripts/useTranscript.ts
+++ b/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 { shouldShowGet } from "../../lib/errorUtils";
 
 type Transcript = {
   response: GetTranscript | null;
@@ -34,9 +35,15 @@ const useTranscript = (
         setLoading(false);
         console.debug("Transcript Loaded:", result);
       })
-      .catch((err) => {
-        setError(err, "There was an error loading the transcript");
-        setErrorState(err);
+      .catch((error) => {
+        const shouldShowHuman = shouldShowGet(error);
+        console.log({ ...error });
+        if (shouldShowHuman) {
+          setError(error, "There was an error loading the transcript");
+        } else {
+          setError(error);
+        }
+        setErrorState(error);
       });
   }, [id, !api]);
 
diff --git a/www/app/[domain]/transcripts/useWaveform.ts b/www/app/[domain]/transcripts/useWaveform.ts
index 71105fa5..9a450708 100644
--- a/www/app/[domain]/transcripts/useWaveform.ts
+++ b/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 { shouldShowGet } from "../../lib/errorUtils";
 
 type AudioWaveFormResponse = {
   waveform: AudioWaveform | null;
@@ -22,7 +23,7 @@ const useWaveform = (protectedPath, id: string): AudioWaveFormResponse => {
 
   useEffect(() => {
     if (!id || !api) return;
-
+    console.log("hee");
     setLoading(true);
     const requestParameters: V1TranscriptGetAudioWaveformRequest = {
       transcriptId: id,
@@ -35,8 +36,13 @@ const useWaveform = (protectedPath, id: string): AudioWaveFormResponse => {
         console.debug("Transcript waveform loaded:", result);
       })
       .catch((err) => {
-        setError(err, "There was an error loading the waveform");
         setErrorState(err);
+        const shouldShowHuman = shouldShowGet(err);
+        if (shouldShowHuman) {
+          setError(err, "There was an error loading the waveform");
+        } else {
+          setError(err);
+        }
       });
   }, [id, api]);
 
diff --git a/www/app/[domain]/transcripts/useWebSockets.ts b/www/app/[domain]/transcripts/useWebSockets.ts
index b19e4fc7..bcf6b163 100644
--- a/www/app/[domain]/transcripts/useWebSockets.ts
+++ b/www/app/[domain]/transcripts/useWebSockets.ts
@@ -350,20 +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);
-              // TODO Test
               setError(
                 Error("Websocket error status"),
-                "There was an issue processing your transcript",
+                "There was an error processing this meeting.",
               );
             }
             setStatus(message.data);
diff --git a/www/app/lib/edgeConfig.ts b/www/app/lib/edgeConfig.ts
index 83037725..5527121a 100644
--- a/www/app/lib/edgeConfig.ts
+++ b/www/app/lib/edgeConfig.ts
@@ -3,7 +3,7 @@ import { isDevelopment } from "./utils";
 
 const localConfig = {
   features: {
-    requireLogin: false,
+    requireLogin: true,
     privacy: true,
     browse: true,
   },
diff --git a/www/app/lib/errorUtils.ts b/www/app/lib/errorUtils.ts
new file mode 100644
index 00000000..a6056c79
--- /dev/null
+++ b/www/app/lib/errorUtils.ts
@@ -0,0 +1,7 @@
+function shouldShowGet(error: Error | null | undefined) {
+  if (error?.name == "ResponseError" && error["response"].status == 404)
+    return false;
+  return true;
+}
+
+export { shouldShowGet };