Skip to content

Commit

Permalink
change: update error boundary
Browse files Browse the repository at this point in the history
  • Loading branch information
@macjuul
macjuul committed Apr 24, 2024
1 parent 5a9eb2f commit 0d31051
Show file tree
Hide file tree
Showing 5 changed files with 252 additions and 120 deletions.
212 changes: 212 additions & 0 deletions src/components/App/error.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
import { Button, Divider, Group, ScrollArea, Text } from "@mantine/core";
import { Box, Paper, Stack, Title } from "@mantine/core";
import { FallbackProps } from "react-error-boundary";
import { Icon } from "../Icon";
import { iconBug, iconCheck, iconCopy, iconReset, iconWarning } from "~/util/icons";
import { adapter } from "~/adapter";
import { useVersionCopy } from "~/hooks/debug";

export function AppErrorHandler({ error, resetErrorBoundary }: FallbackProps) {
const [copyDebug, clipboard] = useVersionCopy();

const message = error instanceof Error
? error.message
: error;

return (
<ScrollArea
h="100%"
bg="slate.9"
>
<Paper
p="xl"
maw={800}
mx="auto"
my={75}
>
<Stack gap="lg">
<Group c="bright">
<Icon path={iconWarning} size="lg" />
<Title>Surrealist encountered an error</Title>
</Group>

<Text>
You can find a detailed error message below. If you believe this is a bug, please report it on our GitHub repository.
</Text>

<Group>
<Button
leftSection={<Icon path={iconReset} />}
onClick={resetErrorBoundary}
color="slate"
radius="xs"
size="xs"
>
Restart Surrealist
</Button>
<Button
leftSection={<Icon path={iconBug} />}
onClick={() => adapter.openUrl('https://github.com/surrealdb/surrealist/issues')}
color="slate"
radius="xs"
size="xs"
>
File an issue
</Button>
<Button
leftSection={<Icon path={clipboard.copied ? iconCheck : iconCopy} />}
onClick={copyDebug}
color="slate"
radius="xs"
size="xs"
>
{clipboard.copied ? 'Copied!' : 'Copy version information'}
</Button>
</Group>

<Divider />

{message && (
<Box>
<Title order={3}>
Message
</Title>

<Text
mt="xs"
ff="mono"
c="slate"
>
{message}
</Text>
</Box>
)}

{error.cause && (
<Box>
<Title order={3}>
Cause
</Title>

<Box
mt="xs"
ff="mono"
c="slate"
style={{
whiteSpace: 'pre',
overflowX: 'auto',
maxWidth: '90vw',
WebkitUserSelect: 'initial',
userSelect: 'initial'
}}
>
{error.cause}
</Box>
</Box>
)}

{error.stack && (
<Box>
<Title order={3}>
Stack trace
</Title>

<Box
mt="xs"
ff="mono"
c="slate"
style={{
whiteSpace: 'pre',
overflowX: 'auto',
maxWidth: '90vw',
WebkitUserSelect: 'initial',
userSelect: 'initial'
}}
>
{error.stack}
</Box>
</Box>
)}
</Stack>
</Paper>
</ScrollArea>
// <div style={{
// width: '100%',
// display: 'flex',
// justifyContent: 'center',
// paddingTop: '50px',
// }}>
// <div style={{
// display: 'flex',
// flexDirection: 'column',
// justifyContent: 'center',
// }}>
// <h1>Something went wrong!</h1>
// {error.name && <h2>{error.name}</h2>}
// <div style={{
// padding: '0px 10px',
// border: '1px solid black'
// }}>
// <h3>Message</h3>
// <p style={{
// whiteSpace: 'pre',
// overflowX: 'auto',
// maxWidth: '90vw'
// }}>
// {message}
// </p>
// </div>
// {error.cause && (
// <div style={{
// padding: '0px 10px',
// border: '1px solid black',
// marginTop: '20px',
// }}>
// <h3>Cause</h3>
// <p style={{
// whiteSpace: 'pre',
// overflowX: 'auto',
// maxWidth: '90vw'
// }}>
// {error.cause}
// </p>
// </div>
// )}
// {error.stack && (
// <div style={{
// padding: '0px 10px',
// border: '1px solid black',
// marginTop: '20px',
// }}>
// <h3>Stack trace</h3>
// <p style={{
// whiteSpace: 'pre',
// overflowX: 'auto',
// maxWidth: '90vw',
// lineHeight: '30px',
// }}>
// {error.stack}
// </p>
// </div>
// )}
// <div style={{
// display: 'flex',
// justifyContent: 'center',
// marginTop: '40px',
// }}>
// <button onClick={resetErrorBoundary} style={{
// padding: '10px',
// background: 'black',
// color: 'white',
// border: 'none',
// cursor: 'pointer',
// fontSize: '16px',
// fontWeight: '600',
// }}>
// Reload Surrealist
// </button>
// </div>
// </div>
// </div>
);
}
98 changes: 8 additions & 90 deletions src/components/App/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@ import { useStable } from "~/hooks/stable";
import { Icon } from "../Icon";
import { adapter } from "~/adapter";
import { useInterfaceStore } from "~/stores/interface";
import { useConfigStore } from "~/stores/config";
import { Scaffold } from "../Scaffold";
import { ErrorBoundary, FallbackProps } from "react-error-boundary";
import { ErrorBoundary } from "react-error-boundary";
import { MANTINE_THEME } from "~/util/mantine";
import { useColorScheme, useIsLight } from "~/hooks/theme";
import { ContextMenuProvider } from "mantine-contextmenu";
Expand All @@ -17,9 +16,9 @@ import { iconClose } from "~/util/icons";
import { FeatureFlagsProvider } from "~/providers/FeatureFlags";
import { ConfirmationProvider } from "~/providers/Confirmation";
import { useUrlHandler } from "~/hooks/url";
import { AppErrorHandler } from "./error";

export function App() {
const { softReset } = useConfigStore.getState();
const { hideAvailableUpdate } = useInterfaceStore.getState();

const isLight = useIsLight();
Expand All @@ -37,6 +36,10 @@ export function App() {
closeUpdate();
});

const handleReset = useStable(() => {
location.reload();
});

useUrlHandler();

return (
Expand All @@ -57,7 +60,7 @@ export function App() {
<InspectorProvider>
<ErrorBoundary
FallbackComponent={AppErrorHandler}
onReset={softReset}
onReset={handleReset}
>
<Scaffold />
</ErrorBoundary>
Expand Down Expand Up @@ -103,89 +106,4 @@ export function App() {
</MantineProvider>
</FeatureFlagsProvider>
);
}

function AppErrorHandler({ error, resetErrorBoundary }: FallbackProps) {
const message = error instanceof Error ? error.message : error;

return (
<div style={{
width: '100%',
display: 'flex',
justifyContent: 'center',
paddingTop: '50px',
}}>
<div style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
}}>
<h1>Something went wrong!</h1>
{error.name && <h2>{error.name}</h2>}
<div style={{
padding: '0px 10px',
border: '1px solid black'
}}>
<h3>Message</h3>
<p style={{
whiteSpace: 'pre',
overflowX: 'auto',
maxWidth: '90vw'
}}>
{message}
</p>
</div>
{error.cause && (
<div style={{
padding: '0px 10px',
border: '1px solid black',
marginTop: '20px',
}}>
<h3>Cause</h3>
<p style={{
whiteSpace: 'pre',
overflowX: 'auto',
maxWidth: '90vw'
}}>
{error.cause}
</p>
</div>
)}
{error.stack && (
<div style={{
padding: '0px 10px',
border: '1px solid black',
marginTop: '20px',
}}>
<h3>Stack trace</h3>
<p style={{
whiteSpace: 'pre',
overflowX: 'auto',
maxWidth: '90vw',
lineHeight: '30px',
}}>
{error.stack}
</p>
</div>
)}
<div style={{
display: 'flex',
justifyContent: 'center',
marginTop: '40px',
}}>
<button onClick={resetErrorBoundary} style={{
padding: '10px',
background: 'black',
color: 'white',
border: 'none',
cursor: 'pointer',
fontSize: '16px',
fontWeight: '600',
}}>
Reload Surrealist
</button>
</div>
</div>
</div>
);
}
}
Loading

0 comments on commit 0d31051

Please sign in to comment.