react_materials/19_error_boundaries.html at master · neethu-satheesh/react_materials · GitHub

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
<script src="https://unpkg.com/react@16.12.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
<script src="https://unpkg.com/react-error-boundary@1.2.5/dist/umd/react-error-boundary.js"></script>

<script type="text/babel">
    const ErrorBoundary = ReactErrorBoundary.ErrorBoundary

    // class ErrorBoundary extends React.Component {
    //     state = {error: null}
    //     static getDerivedStateFromError(error) {
    //         return {error}
    //     }
    //     render() {
    //         const {error} = this.state
    //         if(error)
    //             return <this.props.FallbackComponent error={error}/>
    //             // return <div>Oh no!</div>
    //         return this.props.children
    //     }
    // }

    const ErrorFallback = ({error}) => {
        return(
            <div>
                <p>Something went wrong</p>
                <pre>{error.message}</pre>
            </div>
        )
    }
    const Bomb = () => {
        throw new Error('Exploded!!!')
    }

    const App = () => {
        console.log('App render')
        const [explode, setExplode] = React.useState('')
        const setExplodeHandler = () => {
            setExplode(true)
        }

        return (
            <ErrorBoundary FallbackComponent={ErrorFallback}>
                <div>
                    <button onClick={setExplodeHandler}>SetBomb</button>
                    <ErrorBoundary FallbackComponent={ErrorFallback}>
                        {explode ? <Bomb /> : null}
                    </ErrorBoundary>
                </div>
            </ErrorBoundary>
        )
    }
    const renderApp = () => ReactDOM.render(<App />, document.getElementById("root"))
    renderApp()
</script>

<body>
    <div id="root"></div>
</body>