window.onerror = function(msg, source, line, column, error) {
    console.log('window.onerror---------', msg, source, line, column, error)
}
// 注意，如果用 window.addEventListener('error', event => {}) 參數(shù)不一樣?。?！

errorCaptured(error, instance, info) {
    console.log('errorCaptured--------', error, instance, info)
}

const app = createApp(App)
app.config.errorHandler = (error, instance, info) => {
    console.log('errorHandler--------', error, instance, info)
}

mounted() {
    setTimeout(() => {
        throw new Error('setTimeout 報錯')
    }, 1000)
},

import React from 'react'

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            error: null // 存儲當前的報錯信息
        }
    }
    static getDerivedStateFromError(error) {
        // 更新 state 使下一次渲染能夠顯示降級后的 UI
        console.info('getDerivedStateFromError...', error)
        return { error }
    }
    componentDidCatch(error, errorInfo) {
        // 統(tǒng)計上報錯誤信息
        console.info('componentDidCatch...', error, errorInfo)
    }
    render() {
        if (this.state.error) {
            // 提示錯誤
            return <h1>報錯了</h1>
        }

        // 沒有錯誤，就渲染子組件
        return this.props.children
    }
}

export default ErrorBoundary

import { useState, useEffect } from 'react'

function ErrorDemo() {
    const [num] = useState(100)

    function clickHandler() {
        num() // ErrorBoundary 無法監(jiān)聽事件報錯，需要自行 try-catch
    }

    useEffect(() => {
        // throw new Error('mounted error') // ErrorBoundary 可監(jiān)聽渲染過程的報錯
    }, [])

    return <div>
        <p>error demo - functional</p>
        <button onClick={clickHandler}>error</button>
    </div>
}

export default ErrorDemo

// index.js 入口文件
ReactDOM.render(
  <React.StrictMode>
    <ErrorBoundary>
      <App />
    </ErrorBoundary>
  </React.StrictMode>,
  document.getElementById('root')
);

function App(props) {
    return <ErrorBoundary>
        {props.children}
    </ErrorBoundary>
}

window.onerror = function(msg, source, line, column, error) {
    console.log('window.onerror---------', msg, source, line, column, error)
}
// 注意，如果用 window.addEventListener('error', event => {}) 參數(shù)不一樣?。。?/pre>