Improve UI error view

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<Props> = ({ error }) => (
+const UIError: FunctionComponent<Props> = ({ error }) => {
-  <Container my="lg">
+  const stack = useMemo(() => {
-    <Center>
+    let callStack = error.stack ?? "";
-      <Title>
+
-        <Box component="span" mr="md">
+    // Remove sensitive information from the stack
-          <FontAwesomeIcon icon={faDizzy}></FontAwesomeIcon>
+    callStack = callStack.replaceAll(window.location.hostname, Placeholder);
-        </Box>
+
-        <Text component="span" inherit>
+    return callStack;
-          Oops! UI is crashed!
+  }, [error.stack]);
-        </Text>
+  return (
-      </Title>
+    <Container my="lg">
-    </Center>
+      <Center>
-    <Center>
+        <Title>
-      <Text mb="lg">{error.message}</Text>
+          <Box component="span" mr="md">
-    </Center>
+            <FontAwesomeIcon icon={faDizzy}></FontAwesomeIcon>
-    <Group position="center">
+          </Box>
-      <Anchor href={`${GithubRepoRoot}/issues/new/choose`} target="_blank">
+          <Text component="span" inherit>
-        <Button color="yellow">Report Issue</Button>
+            Oops! UI is crashed!
-      </Anchor>
+          </Text>
-      <Button onClick={Reload} color="light">
+        </Title>
-        Reload Page
+      </Center>
-      </Button>
+      <Center my="xl">
-    </Group>
+        <Code>{stack}</Code>
-  </Container>
+      </Center>
-);
+      <Group position="center">
+        <Anchor href={`${GithubRepoRoot}/issues/new/choose`} target="_blank">
+          <Button color="yellow">Report Issue</Button>
+        </Anchor>
+        <Button onClick={Reload} color="light">
+          Reload Page
+        </Button>
+      </Group>
+    </Container>
+  );
+};
 
 export default UIError;