前端项目中的Vue、React错误监听

window.onerror = function(msg, source, line, column, error) {
    console.log('window.onerror---------', msg, source, line, column, error)
}
// 注意，如果用 window.addEventListener('error', event => {}) 参数不一样！！！

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) {
        // 统计上报错误信息
        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 无法监听事件报错，需要自行 try-catch
    }

    useEffect(() => {
        // throw new Error('mounted error') // ErrorBoundary 可监听渲染过程的报错
    }, [])

    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 => {}) 参数不一样！！！