/
ErrorBoundary.tsx
86 lines (71 loc) · 2.19 KB
/
ErrorBoundary.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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import React from 'react';
import queryString from 'query-string';
import { Button } from 'antd';
import { urlUtil } from '@leaa/dashboard/src/utils/url.util';
import { Rcon } from '@leaa/dashboard/src/components/Rcon/Rcon';
import style from './style.module.less';
interface IProps {}
interface IState {
hasError: boolean;
errorInfo: {};
}
const CATCH_HAS_REFRESH_URL_PARAM = '____catch-has-refresh';
export class ErrorBoundary extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
hasError: false,
errorInfo: {},
};
}
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(error: Error, info: {}) {
// TIPS: Many times DidCatch is because the JS file can't be retrieved, so refresh it first.
const qs = queryString.parse(window.location.search);
if (!qs[CATCH_HAS_REFRESH_URL_PARAM]) {
window.location.href = urlUtil.mergeParamToUrlQuery({
window,
params: { [CATCH_HAS_REFRESH_URL_PARAM]: 1 },
replace: false,
});
}
console.log('---- ALL-STACK ----', info, error);
this.setState({ errorInfo: error.message });
}
onGoToHome = () => {
window.location.href = '/';
};
render() {
if (this.state.hasError) {
return (
<div className={style['wrapper']}>
<div className={style['container']}>
<div className={style['title']}>
<Button
type="primary"
shape="circle"
icon={<Rcon type="ri-arrow-left-line" />}
onClick={this.onGoToHome}
className={style['goto-home-button']}
/>
<strong>Server Error</strong>
</div>
<div className={style['error-info']}>
<code>{JSON.stringify(this.state.errorInfo)}</code>
<Button
shape="circle"
icon={<Rcon type="ri-close-line" />}
size="small"
onClick={this.onGoToHome}
className={style['close-error-info']}
/>
</div>
</div>
</div>
);
}
return this.props.children;
}
}