More robust error handling & Display errors to user

This commit is contained in:
Koper
2023-08-31 19:11:22 +07:00
parent df078f7bd6
commit 11bd568a6b
7 changed files with 139 additions and 41 deletions

View File

@@ -9,6 +9,7 @@ import useAudioDevice from "../useAudioDevice";
import "../../styles/button.css";
import { Topic } from "../webSocketTypes";
import getApi from "../../lib/getApi";
import { useError } from "../../(errors)/errorContext";
const App = () => {
const [stream, setStream] = useState<MediaStream | null>(null);

View File

@@ -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);
@@ -48,7 +47,7 @@ const useTranscript = (api: DefaultApi): UseTranscript => {
createTranscript();
}, []);
return { response, loading, error, createTranscript };
return { response, loading, createTranscript };
};
export default useTranscript;

View File

@@ -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);
});
}
});

View File

@@ -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,50 @@ 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:
console.error("Unknown event:", message.event);
setError(`Received unknown WebSocket event: ${message.event}`);
}
} catch (error) {
setError(`Failed to process WebSocket message: ${error.message}`);
}
};
ws.onerror = (error) => {
console.error("WebSocket error:", error);
setError("A WebSocket error occurred.");
};
ws.onclose = () => {
ws.onclose = (event) => {
console.debug("WebSocket connection closed");
if (event.code !== 1000) {
setError(`WebSocket closed unexpectedly with code: ${event.code}`);
}
};
return () => {