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

adds timeout and humanMessage

Browse Source
This commit is contained in:
Sara
2023-11-02 18:49:37 +01:00
parent 6282583d92
commit 73327d2e9e
11 changed files with 68 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
www/app/(errors)/errorContext.tsx
View File

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

48
www/app/(errors)/errorMessage.tsx
View File

@@ -4,29 +4,67 @@ 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);
const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>();
// 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) {
if (humanMessage) {
setIsVisible(true);
Sentry.captureException(Error(humanMessage, { cause: error }));
} else {
Sentry.captureException(error);
console.error("Error", error.message, error);
}
console.error("Error", error);
}
}, [error]);
if (!isVisible || !error) return null;
useEffect(() => {
if (isVisible) {
setTimeoutId(
setTimeout(() => {
setIsVisible(false);
setTimeoutId(undefined);
}, 30000),
);
}
if (!isVisible && timeoutId) {
clearTimeout(timeoutId);
}
}, [isVisible]);
if (!isVisible || !humanMessage) return null;
return (
<button
onClick={() => {
setIsVisible(false);
setError(null);
setIsVisible(false);
}}
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>
);
};

4
www/app/[domain]/browse/pagination.tsx
View File

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

5
www/app/[domain]/transcripts/createTranscript.ts
View File

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

5
www/app/[domain]/transcripts/recorder.tsx
View File

@@ -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 "(":

2
www/app/[domain]/transcripts/useMp3.ts
View File

@@ -65,7 +65,7 @@ const useMp3 = (protectedPath: boolean, id: string): Mp3Response => {
});
})
.catch((err) => {
setError(err);
setError(err, "There was an error loading the audio");
setErrorState(err);
});
};

2
www/app/[domain]/transcripts/useTopics.ts
View File

@@ -35,7 +35,7 @@ const useTopics = (protectedPath, id: string): TranscriptTopics => {
console.debug("Transcript topics loaded:", result);
})
.catch((err) => {
setError(err);
setError(err, "There was an error loading the topics");
setErrorState(err);
});
}, [id, api]);

2
www/app/[domain]/transcripts/useTranscript.ts
View File

@@ -35,7 +35,7 @@ const useTranscript = (
console.debug("Transcript Loaded:", result);
})
.catch((err) => {
setError(err);
setError(err, "There was an error loading the transcript");
setErrorState(err);
});
}, [id, !api]);

2
www/app/[domain]/transcripts/useWaveform.ts
View File

@@ -35,7 +35,7 @@ const useWaveform = (protectedPath, id: string): AudioWaveFormResponse => {
console.debug("Transcript waveform loaded:", result);
})
.catch((err) => {
setError(err);
setError(err, "There was an error loading the waveform");
setErrorState(err);
});
}, [id, api]);

4
www/app/[domain]/transcripts/useWebRTC.ts
View File

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

2
www/app/[domain]/transcripts/useWebSockets.ts
View File

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