summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorLASER-Yi <[email protected]>2022-06-07 02:52:08 +0800
committerLASER-Yi <[email protected]>2022-06-07 02:52:08 +0800
commit0e7c5410d4fd15dd3c0a9a1041013417b14f3490 (patch)
tree669726b01c17ba6dcfee76b08a6d0ebd2a0a96cf
parent51d1c46b18dce4d677422d1726ed177a3e81bfe3 (diff)
downloadbazarr-0e7c5410d4fd15dd3c0a9a1041013417b14f3490.tar.gz
bazarr-0e7c5410d4fd15dd3c0a9a1041013417b14f3490.zip
Improve UI error viewv1.0.5-beta.22
-rw-r--r--frontend/src/pages/UIError.tsx65
1 files changed, 39 insertions, 26 deletions
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<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;