selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-20 20:29:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

More robust error handling & Display errors to user

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

31
www/app/(errors)/errorContext.tsx Normal file
View File

@@ -0,0 +1,31 @@
"use client";
import React, { createContext, useContext, useState } from "react";
interface ErrorContextProps {
error: string;
setError: React.Dispatch<React.SetStateAction<string>>;
}
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<string>("");
return (
<ErrorContext.Provider value={{ error, setError }}>
{children}
</ErrorContext.Provider>
);
};

29
www/app/(errors)/errorMessage.tsx Normal file
View File

@@ -0,0 +1,29 @@
"use client";
import { useError } from "./errorContext";
import { useEffect, useState } from "react";
const ErrorMessage: React.FC = () => {
const { error, setError } = useError();
const [isVisible, setIsVisible] = useState<boolean>(false);
useEffect(() => {
if (error) setIsVisible(true);
}, [error]);
if (!isVisible || !error) return null;
return (
<div
onClick={() => {
setIsVisible(false);
setError("");
}}
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}</span>
</div>
);
};
export default ErrorMessage;

27
www/app/layout.tsx
View File

@@ -3,6 +3,8 @@ import { Roboto } from "next/font/google";
import { Metadata } from "next"; import { Metadata } from "next";
import FiefWrapper from "./(auth)/fiefWrapper"; import FiefWrapper from "./(auth)/fiefWrapper";
import UserInfo from "./(auth)/userInfo"; import UserInfo from "./(auth)/userInfo";
import { ErrorProvider } from "./(errors)/errorContext";
import ErrorMessage from "./(errors)/errorMessage";
const roboto = Roboto({ subsets: ["latin"], weight: "400" }); const roboto = Roboto({ subsets: ["latin"], weight: "400" });
@@ -55,19 +57,24 @@ export default function RootLayout({ children }) {
<html lang="en"> <html lang="en">
<body className={roboto.className + " flex flex-col min-h-screen"}> <body className={roboto.className + " flex flex-col min-h-screen"}>
<FiefWrapper> <FiefWrapper>
<div id="container"> <ErrorProvider>
<div className="flex flex-col items-center h-[100svh] bg-gradient-to-r from-[#8ec5fc30] to-[#e0c3fc42]"> <ErrorMessage />
<UserInfo /> <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"> <div className="h-[13svh] flex flex-col justify-center items-center">
<h1 className="text-5xl font-bold text-blue-500">Reflector</h1> <h1 className="text-5xl font-bold text-blue-500">
<p className="text-gray-500"> Reflector
Capture The Signal, Not The Noise </h1>
</p> <p className="text-gray-500">
Capture The Signal, Not The Noise
</p>
</div>
{children}
</div> </div>
{children}
</div> </div>
</div> </ErrorProvider>
</FiefWrapper> </FiefWrapper>
</body> </body>
</html> </html>

1
www/app/transcripts/new/page.tsx
View File

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

7
www/app/transcripts/useTranscript.ts
View File

@@ -1,19 +1,18 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { DefaultApi, V1TranscriptsCreateRequest } from "../api/apis/DefaultApi"; import { DefaultApi, V1TranscriptsCreateRequest } from "../api/apis/DefaultApi";
import { GetTranscript } from "../api"; import { GetTranscript } from "../api";
import getApi from "../lib/getApi"; import { useError } from "../(errors)/errorContext";
type UseTranscript = { type UseTranscript = {
response: GetTranscript | null; response: GetTranscript | null;
loading: boolean; loading: boolean;
error: string | null;
createTranscript: () => void; createTranscript: () => void;
}; };
const useTranscript = (api: DefaultApi): UseTranscript => { const useTranscript = (api: DefaultApi): UseTranscript => {
const [response, setResponse] = useState<GetTranscript | null>(null); const [response, setResponse] = useState<GetTranscript | null>(null);
const [loading, setLoading] = useState<boolean>(false); const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<string | null>(null); const { setError } = useError();
const createTranscript = () => { const createTranscript = () => {
setLoading(true); setLoading(true);
@@ -48,7 +47,7 @@ const useTranscript = (api: DefaultApi): UseTranscript => {
createTranscript(); createTranscript();
}, []); }, []);
return { response, loading, error, createTranscript }; return { response, loading, createTranscript };
}; };
export default useTranscript; export default useTranscript;

28
www/app/transcripts/useWebRTC.ts
View File

@@ -4,7 +4,7 @@ import {
DefaultApi, DefaultApi,
V1TranscriptRecordWebrtcRequest, V1TranscriptRecordWebrtcRequest,
} from "../api/apis/DefaultApi"; } from "../api/apis/DefaultApi";
import { Configuration } from "../api/runtime"; import { useError } from "../(errors)/errorContext";
const useWebRTC = ( const useWebRTC = (
stream: MediaStream | null, stream: MediaStream | null,
@@ -12,13 +12,25 @@ const useWebRTC = (
api: DefaultApi, api: DefaultApi,
): Peer => { ): Peer => {
const [peer, setPeer] = useState<Peer | null>(null); const [peer, setPeer] = useState<Peer | null>(null);
const { setError } = useError();
useEffect(() => { useEffect(() => {
if (!stream || !transcriptId) { if (!stream || !transcriptId) {
return; 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) => { p.on("signal", (data: any) => {
if ("sdp" in data) { if ("sdp" in data) {
@@ -33,10 +45,18 @@ const useWebRTC = (
api api
.v1TranscriptRecordWebrtc(requestParameters) .v1TranscriptRecordWebrtc(requestParameters)
.then((answer) => { .then((answer) => {
p.signal(answer); try {
p.signal(answer);
} catch (error) {
setError(`Failed to signal answer: ${error.message}`);
}
}) })
.catch((err) => { .catch((err) => {
console.error("WebRTC signaling error:", err); const errorString =
"WebRTC signaling error: " +
(err.response || err.message || "Unknown error");
setError(errorString);
console.error(errorString);
}); });
} }
}); });

57
www/app/transcripts/useWebSockets.ts
View File

@@ -1,5 +1,6 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Topic, FinalSummary, Status } from "./webSocketTypes"; import { Topic, FinalSummary, Status } from "./webSocketTypes";
import { useError } from "../(errors)/errorContext";
type UseWebSockets = { type UseWebSockets = {
transcriptText: string; transcriptText: string;
@@ -15,6 +16,7 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
summary: "", summary: "",
}); });
const [status, setStatus] = useState<Status>({ value: "disconnected" }); const [status, setStatus] = useState<Status>({ value: "disconnected" });
const { setError } = useError();
useEffect(() => { useEffect(() => {
document.onkeyup = (e) => { document.onkeyup = (e) => {
@@ -77,41 +79,50 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
ws.onmessage = (event) => { ws.onmessage = (event) => {
const message = JSON.parse(event.data); const message = JSON.parse(event.data);
switch (message.event) { try {
case "TRANSCRIPT": switch (message.event) {
if (message.data.text) { case "TRANSCRIPT":
setTranscriptText((message.data.text ?? "").trim()); if (message.data.text) {
console.debug("TRANSCRIPT event:", message.data); setTranscriptText((message.data.text ?? "").trim());
} console.debug("TRANSCRIPT event:", message.data);
break; }
break;
case "TOPIC": case "TOPIC":
setTopics((prevTopics) => [...prevTopics, message.data]); setTopics((prevTopics) => [...prevTopics, message.data]);
console.debug("TOPIC event:", message.data); console.debug("TOPIC event:", message.data);
break; break;
case "FINAL_SUMMARY": case "FINAL_SUMMARY":
if (message.data) { if (message.data) {
setFinalSummary(message.data); setFinalSummary(message.data);
console.debug("FINAL_SUMMARY event:", message.data); console.debug("FINAL_SUMMARY event:", message.data);
} }
break; break;
case "STATUS": case "STATUS":
setStatus(message.data); setStatus(message.data);
break; break;
default: default:
console.error("Unknown event:", message.event); 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) => { ws.onerror = (error) => {
console.error("WebSocket error:", error); console.error("WebSocket error:", error);
setError("A WebSocket error occurred.");
}; };
ws.onclose = () => { ws.onclose = (event) => {
console.debug("WebSocket connection closed"); console.debug("WebSocket connection closed");
if (event.code !== 1000) {
setError(`WebSocket closed unexpectedly with code: ${event.code}`);
}
}; };
return () => { return () => {