Improve UI error view

frontend/src/pages/UIError.tsx

@@ -7,18 +7,30 @@ 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 }) => {
+  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>
@@ -30,8 +42,8 @@ const UIError: FunctionComponent<Props> = ({ error }) => (
           </Text>
         </Title>
       </Center>
-    <Center>
+      <Center my="xl">
-      <Text mb="lg">{error.message}</Text>
+        <Code>{stack}</Code>
       </Center>
       <Group position="center">
         <Anchor href={`${GithubRepoRoot}/issues/new/choose`} target="_blank">
@@ -43,5 +55,6 @@ const UIError: FunctionComponent<Props> = ({ error }) => (
       </Group>
     </Container>
   );
+};
 
 export default UIError;