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
1x
1x
1x
1x
1x
 
 
 
3x
2x
 
 
 
 
 
2x
 
 
 
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
 
 
1x
 
import React from 'react';
import ControlButtons from '@/components/ControlButtons';
import SEO from '@/components/SEO';
import Dialog from '@/components/Dialog';
import Layout from '@/components/Layout';
 
class ErrorBoundary extends React.Component<React.PropsWithChildren<unknown>, { hasError: boolean; error?: Error }> {
    constructor(props: React.PropsWithChildren<unknown>) {
        super(props);
        this.state = {
            hasError: false,
        };
    }
 
    static getDerivedStateFromError(error: Error) {
        return { hasError: true, error };
    }
 
    render() {
        if (this.state.hasError) {
            return (
                <Layout>
                    <>
                        <SEO
                            meta={{
                                title: 'Error | Oh! sorry, an error has occurred',
                                description: 'Oh! sorry, an error has occurred',
                                noindex: true,
                            }}
                        />
                        <Dialog
                            open
                            modalMode
                            withPadding
                            header={<ControlButtons disabled />}
                            body={
                                <div style={{ display: 'grid', placeContent: 'center', height: 'inherit' }}>
                                    {this.state.error?.message || 'An unknown error occurred'}
                                </div>
                            }
                        />
                    </>
                </Layout>
            );
        }
 
        return this.props.children;
    }
}
 
export default ErrorBoundary;