Improve UI error view

morpheus65535 · Jun 6, 2022 · 0e7c541 · 0e7c541
1 parent 51d1c46
commit 0e7c541
Showing 1 changed file with 39 additions and 26 deletions.
diff --git 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<Props> = ({ error }) => (
-  <Container my="lg">
-    <Center>
-      <Title>
-        <Box component="span" mr="md">
-          <FontAwesomeIcon icon={faDizzy}></FontAwesomeIcon>
-        </Box>
-        <Text component="span" inherit>
-          Oops! UI is crashed!
-        </Text>
-      </Title>
-    </Center>
-    <Center>
-      <Text mb="lg">{error.message}</Text>
-    </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>
-);
+const UIError: FunctionComponent<Props> = ({ 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 (
+    <Container my="lg">
+      <Center>
+        <Title>
+          <Box component="span" mr="md">
+            <FontAwesomeIcon icon={faDizzy}></FontAwesomeIcon>
+          </Box>
+          <Text component="span" inherit>
+            Oops! UI is crashed!
+          </Text>
+        </Title>
+      </Center>
+      <Center my="xl">
+        <Code>{stack}</Code>
+      </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;