Skip to content

Commit 0d31051

Browse files
macjuulmacjuul
committed
change: update error boundary
1 parent 5a9eb2f commit 0d31051

File tree

5 files changed

+252
-120
lines changed

5 files changed

+252
-120
lines changed

‎src/components/App/error.tsx

+212
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
import { Button, Divider, Group, ScrollArea, Text } from "@mantine/core";
2+
import { Box, Paper, Stack, Title } from "@mantine/core";
3+
import { FallbackProps } from "react-error-boundary";
4+
import { Icon } from "../Icon";
5+
import { iconBug, iconCheck, iconCopy, iconReset, iconWarning } from "~/util/icons";
6+
import { adapter } from "~/adapter";
7+
import { useVersionCopy } from "~/hooks/debug";
8+
9+
export function AppErrorHandler({ error, resetErrorBoundary }: FallbackProps) {
10+
const [copyDebug, clipboard] = useVersionCopy();
11+
12+
const message = error instanceof Error
13+
? error.message
14+
: error;
15+
16+
return (
17+
<ScrollArea
18+
h="100%"
19+
bg="slate.9"
20+
>
21+
<Paper
22+
p="xl"
23+
maw={800}
24+
mx="auto"
25+
my={75}
26+
>
27+
<Stack gap="lg">
28+
<Group c="bright">
29+
<Icon path={iconWarning} size="lg" />
30+
<Title>Surrealist encountered an error</Title>
31+
</Group>
32+
33+
<Text>
34+
You can find a detailed error message below. If you believe this is a bug, please report it on our GitHub repository.
35+
</Text>
36+
37+
<Group>
38+
<Button
39+
leftSection={<Icon path={iconReset} />}
40+
onClick={resetErrorBoundary}
41+
color="slate"
42+
radius="xs"
43+
size="xs"
44+
>
45+
Restart Surrealist
46+
</Button>
47+
<Button
48+
leftSection={<Icon path={iconBug} />}
49+
onClick={() => adapter.openUrl('https://github.com/surrealdb/surrealist/issues')}
50+
color="slate"
51+
radius="xs"
52+
size="xs"
53+
>
54+
File an issue
55+
</Button>
56+
<Button
57+
leftSection={<Icon path={clipboard.copied ? iconCheck : iconCopy} />}
58+
onClick={copyDebug}
59+
color="slate"
60+
radius="xs"
61+
size="xs"
62+
>
63+
{clipboard.copied ? 'Copied!' : 'Copy version information'}
64+
</Button>
65+
</Group>
66+
67+
<Divider />
68+
69+
{message && (
70+
<Box>
71+
<Title order={3}>
72+
Message
73+
</Title>
74+
75+
<Text
76+
mt="xs"
77+
ff="mono"
78+
c="slate"
79+
>
80+
{message}
81+
</Text>
82+
</Box>
83+
)}
84+
85+
{error.cause && (
86+
<Box>
87+
<Title order={3}>
88+
Cause
89+
</Title>
90+
91+
<Box
92+
mt="xs"
93+
ff="mono"
94+
c="slate"
95+
style={{
96+
whiteSpace: 'pre',
97+
overflowX: 'auto',
98+
maxWidth: '90vw',
99+
WebkitUserSelect: 'initial',
100+
userSelect: 'initial'
101+
}}
102+
>
103+
{error.cause}
104+
</Box>
105+
</Box>
106+
)}
107+
108+
{error.stack && (
109+
<Box>
110+
<Title order={3}>
111+
Stack trace
112+
</Title>
113+
114+
<Box
115+
mt="xs"
116+
ff="mono"
117+
c="slate"
118+
style={{
119+
whiteSpace: 'pre',
120+
overflowX: 'auto',
121+
maxWidth: '90vw',
122+
WebkitUserSelect: 'initial',
123+
userSelect: 'initial'
124+
}}
125+
>
126+
{error.stack}
127+
</Box>
128+
</Box>
129+
)}
130+
</Stack>
131+
</Paper>
132+
</ScrollArea>
133+
// <div style={{
134+
// width: '100%',
135+
// display: 'flex',
136+
// justifyContent: 'center',
137+
// paddingTop: '50px',
138+
// }}>
139+
// <div style={{
140+
// display: 'flex',
141+
// flexDirection: 'column',
142+
// justifyContent: 'center',
143+
// }}>
144+
// <h1>Something went wrong!</h1>
145+
// {error.name && <h2>{error.name}</h2>}
146+
// <div style={{
147+
// padding: '0px 10px',
148+
// border: '1px solid black'
149+
// }}>
150+
// <h3>Message</h3>
151+
// <p style={{
152+
// whiteSpace: 'pre',
153+
// overflowX: 'auto',
154+
// maxWidth: '90vw'
155+
// }}>
156+
// {message}
157+
// </p>
158+
// </div>
159+
// {error.cause && (
160+
// <div style={{
161+
// padding: '0px 10px',
162+
// border: '1px solid black',
163+
// marginTop: '20px',
164+
// }}>
165+
// <h3>Cause</h3>
166+
// <p style={{
167+
// whiteSpace: 'pre',
168+
// overflowX: 'auto',
169+
// maxWidth: '90vw'
170+
// }}>
171+
// {error.cause}
172+
// </p>
173+
// </div>
174+
// )}
175+
// {error.stack && (
176+
// <div style={{
177+
// padding: '0px 10px',
178+
// border: '1px solid black',
179+
// marginTop: '20px',
180+
// }}>
181+
// <h3>Stack trace</h3>
182+
// <p style={{
183+
// whiteSpace: 'pre',
184+
// overflowX: 'auto',
185+
// maxWidth: '90vw',
186+
// lineHeight: '30px',
187+
// }}>
188+
// {error.stack}
189+
// </p>
190+
// </div>
191+
// )}
192+
// <div style={{
193+
// display: 'flex',
194+
// justifyContent: 'center',
195+
// marginTop: '40px',
196+
// }}>
197+
// <button onClick={resetErrorBoundary} style={{
198+
// padding: '10px',
199+
// background: 'black',
200+
// color: 'white',
201+
// border: 'none',
202+
// cursor: 'pointer',
203+
// fontSize: '16px',
204+
// fontWeight: '600',
205+
// }}>
206+
// Reload Surrealist
207+
// </button>
208+
// </div>
209+
// </div>
210+
// </div>
211+
);
212+
}

‎src/components/App/index.tsx

+8-90
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,8 @@ import { useStable } from "~/hooks/stable";
66
import { Icon } from "../Icon";
77
import { adapter } from "~/adapter";
88
import { useInterfaceStore } from "~/stores/interface";
9-
import { useConfigStore } from "~/stores/config";
109
import { Scaffold } from "../Scaffold";
11-
import { ErrorBoundary, FallbackProps } from "react-error-boundary";
10+
import { ErrorBoundary } from "react-error-boundary";
1211
import { MANTINE_THEME } from "~/util/mantine";
1312
import { useColorScheme, useIsLight } from "~/hooks/theme";
1413
import { ContextMenuProvider } from "mantine-contextmenu";
@@ -17,9 +16,9 @@ import { iconClose } from "~/util/icons";
1716
import { FeatureFlagsProvider } from "~/providers/FeatureFlags";
1817
import { ConfirmationProvider } from "~/providers/Confirmation";
1918
import { useUrlHandler } from "~/hooks/url";
19+
import { AppErrorHandler } from "./error";
2020

2121
export function App() {
22-
const { softReset } = useConfigStore.getState();
2322
const { hideAvailableUpdate } = useInterfaceStore.getState();
2423

2524
const isLight = useIsLight();
@@ -37,6 +36,10 @@ export function App() {
3736
closeUpdate();
3837
});
3938

39+
const handleReset = useStable(() => {
40+
location.reload();
41+
});
42+
4043
useUrlHandler();
4144

4245
return (
@@ -57,7 +60,7 @@ export function App() {
5760
<InspectorProvider>
5861
<ErrorBoundary
5962
FallbackComponent={AppErrorHandler}
60-
onReset={softReset}
63+
onReset={handleReset}
6164
>
6265
<Scaffold />
6366
</ErrorBoundary>
@@ -103,89 +106,4 @@ export function App() {
103106
</MantineProvider>
104107
</FeatureFlagsProvider>
105108
);
106-
}
107-
108-
function AppErrorHandler({ error, resetErrorBoundary }: FallbackProps) {
109-
const message = error instanceof Error ? error.message : error;
110-
111-
return (
112-
<div style={{
113-
width: '100%',
114-
display: 'flex',
115-
justifyContent: 'center',
116-
paddingTop: '50px',
117-
}}>
118-
<div style={{
119-
display: 'flex',
120-
flexDirection: 'column',
121-
justifyContent: 'center',
122-
}}>
123-
<h1>Something went wrong!</h1>
124-
{error.name && <h2>{error.name}</h2>}
125-
<div style={{
126-
padding: '0px 10px',
127-
border: '1px solid black'
128-
}}>
129-
<h3>Message</h3>
130-
<p style={{
131-
whiteSpace: 'pre',
132-
overflowX: 'auto',
133-
maxWidth: '90vw'
134-
}}>
135-
{message}
136-
</p>
137-
</div>
138-
{error.cause && (
139-
<div style={{
140-
padding: '0px 10px',
141-
border: '1px solid black',
142-
marginTop: '20px',
143-
}}>
144-
<h3>Cause</h3>
145-
<p style={{
146-
whiteSpace: 'pre',
147-
overflowX: 'auto',
148-
maxWidth: '90vw'
149-
}}>
150-
{error.cause}
151-
</p>
152-
</div>
153-
)}
154-
{error.stack && (
155-
<div style={{
156-
padding: '0px 10px',
157-
border: '1px solid black',
158-
marginTop: '20px',
159-
}}>
160-
<h3>Stack trace</h3>
161-
<p style={{
162-
whiteSpace: 'pre',
163-
overflowX: 'auto',
164-
maxWidth: '90vw',
165-
lineHeight: '30px',
166-
}}>
167-
{error.stack}
168-
</p>
169-
</div>
170-
)}
171-
<div style={{
172-
display: 'flex',
173-
justifyContent: 'center',
174-
marginTop: '40px',
175-
}}>
176-
<button onClick={resetErrorBoundary} style={{
177-
padding: '10px',
178-
background: 'black',
179-
color: 'white',
180-
border: 'none',
181-
cursor: 'pointer',
182-
fontSize: '16px',
183-
fontWeight: '600',
184-
}}>
185-
Reload Surrealist
186-
</button>
187-
</div>
188-
</div>
189-
</div>
190-
);
191-
}
109+
}

0 commit comments

Comments
 (0)