More robust error handling & Display errors to user

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(`Failed to create WebRTC Peer: ${error.message}`);
+      return;
+    }
+
+    p.on("error", (err) => {
+      setError(`WebRTC error: ${err.message}`);
+    });
 
     p.on("signal", (data: any) => {
       if ("sdp" in data) {
@@ -33,10 +45,18 @@ const useWebRTC = (
         api
           .v1TranscriptRecordWebrtc(requestParameters)
           .then((answer) => {
-            p.signal(answer);
+            try {
+              p.signal(answer);
+            } catch (error) {
+              setError(`Failed to signal answer: ${error.message}`);
+            }
           })
           .catch((err) => {
-            console.error("WebRTC signaling error:", err);
+            const errorString =
+              "WebRTC signaling error: " +
+              (err.response || err.message || "Unknown error");
+            setError(errorString);
+            console.error(errorString);
           });
       }
     });