-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.tsx
69 lines (62 loc) · 1.9 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import React, { ReactElement } from 'react';
import FrontendCrash from '../../../assets/error/frontendCrash.png';
type Props = { readonly children: ReactElement };
type State = { readonly hasError: boolean };
export default class ErrorBoundary extends React.PureComponent<Props, State> {
public readonly state: State = { hasError: false };
public static getDerivedStateFromError(): State {
return { hasError: true };
}
public componentDidCatch(error: Error | null, info: object): void {
// eslint-disable-next-line no-console
console.log({ error, info }); // necessary for error logging!
}
private ignoreError = (): void => this.setState({ hasError: false });
public render(): ReactElement {
const { children } = this.props;
const { hasError } = this.state;
if (hasError) {
return (
<div>
<img
src={FrontendCrash}
alt="Uh oh - we broke something"
style={{
width: '100vw',
height: '100vh',
objectFit: 'cover',
objectPosition: 'center',
position: 'absolute',
zIndex: -1,
left: 0,
top: 0,
}}
/>
<div style={{
position: 'fixed',
bottom: 0,
right: 0,
padding: '10px',
textAlign: 'right',
fontSize: '150%',
}}
>
<p>
Come yell at us:
<a
style={{ color: 'white', textDecoration: 'underline' }}
href="https://goo.gl/forms/PZUZ1Ze6kN82EmcD2"
>
Send Feedback
</a>
</p>
<button type="button" onClick={this.ignoreError}>
Click me to refresh the page. It may help.
</button>
</div>
</div>
);
}
return children;
}
}