diff --git a/frontend/src/pages/UIError.tsx b/frontend/src/pages/UIError.tsx index 22def326b..7f84ab91b 100644 --- a/frontend/src/pages/UIError.tsx +++ b/frontend/src/pages/UIError.tsx @@ -7,41 +7,54 @@ import { Box, Button, Center, + Code, Container, Group, Text, Title, } from "@mantine/core"; -import { FunctionComponent } from "react"; +import { FunctionComponent, useMemo } from "react"; + +const Placeholder = "********"; interface Props { error: Error; } -const UIError: FunctionComponent = ({ error }) => ( - -
- - <Box component="span" mr="md"> - <FontAwesomeIcon icon={faDizzy}></FontAwesomeIcon> - </Box> - <Text component="span" inherit> - Oops! UI is crashed! - </Text> - -
-
- {error.message} -
- - - - - - -
-); +const UIError: FunctionComponent = ({ error }) => { + const stack = useMemo(() => { + let callStack = error.stack ?? ""; + + // Remove sensitive information from the stack + callStack = callStack.replaceAll(window.location.hostname, Placeholder); + + return callStack; + }, [error.stack]); + return ( + +
+ + <Box component="span" mr="md"> + <FontAwesomeIcon icon={faDizzy}></FontAwesomeIcon> + </Box> + <Text component="span" inherit> + Oops! UI is crashed! + </Text> + +
+
+ {stack} +
+ + + + + + +
+ ); +}; export default UIError;