morpheus65535/bazarr
1
1
Fork 0
mirror of https://github.com/morpheus65535/bazarr.git synced 2025-01-10 00:37:49 +08:00
Code Issues Projects Releases Packages Wiki Activity

Improve UI error view

Browse source
This commit is contained in:
LASER-Yi 2022-06-07 02:52:08 +08:00
parent 51d1c46b18
commit 0e7c5410d4
1 changed files with 39 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
frontend/src/pages/UIError.tsx
View file

@ -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;