前端項目中的Vue、React錯誤監聽怎么實現

本篇內容介紹了“前端項目中的Vue、React錯誤監聽怎么實現”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

一、 Vue 錯誤監聽

題目:

如何統一監聽 Vue 組件報錯？

分析:

真實項目需要閉環，即考慮各個方面，除了基本的功能外，還要考慮性能優化、報錯、統計等。 而個人項目、課程項目一般以實現功能為主，不會考慮這么全面。所以，沒有實際工作經驗的同學，不會了解如此全面。

window.onerror

可以監聽當前頁面所有的 JS 報錯，jQuery 時代經常用。
注意，全局只綁定一次即可。不要放在多次渲染的組件中，這樣容易綁定多次。

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

errorCaptured 生命周期

會監聽所有下級組件的錯誤。可以返回 false 阻止向上傳播，因為可能會有多個上級節點都監聽錯誤。

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

errorHandler

全局的錯誤監聽，所有組件的報錯都會匯總到這里來。PS：如果 errorCaptured 返回 false 則不會到這里。

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

請注意，errorHandler 會阻止錯誤走向 window.onerror。

PS：還有 warnHandler

異步錯誤

組件內的異步錯誤 errorHandler 監聽不到，還是需要 window.onerror

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

答案

方式

• errorCaptured 監聽下級組件的錯誤，可返回 false 阻止向上傳播

• errorHandler 監聽 Vue 全局錯誤

• window.onerror 監聽其他的 JS 錯誤，如異步

建議：結合使用

• 一些重要的、復雜的、有運行風險的組件，可使用 errorCaptured 重點監聽

• 然后用 errorHandler window.onerror 候補全局監聽，避免意外情況

擴展

Promise 監聽報錯要使用 window.onunhandledrejection

前端拿到錯誤監聽之后，需要傳遞給服務端，進行錯誤收集和分析，然后修復 bug 。 后面會有一道面試題專門講解。

二、React 錯誤監聽

題目:

如何統一監聽 React 組件報錯？

分析:

真實項目需要閉環，即考慮各個方面，除了基本的功能外，還要考慮性能優化、報錯、統計等。

ErrorBoundary

React 16+ 引入。可以監聽所有下級組件報錯，同時降級展示 UI 。
代碼參考 ErrorBoundary.js 和 components/ErrorDemo

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 <h2>報錯了</h2>
        }

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

export default ErrorBoundary

FunctionalDemo.js

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>
}

dev 和 build

dev 環境下無法看到 ErrorBoundary 的報錯 UI 效果。會顯示的提示報錯信息。
yarn build 之后再運行，即可看到 UI 效果。

事件報錯

React 不需要 ErrorBoundary 來捕獲事件處理器中的錯誤。與 render 方法和生命周期方法不同，事件處理器不會在渲染期間觸發。

如果你需要在事件處理器內部捕獲錯誤，使用普通的 try-catch 語句。也可以使用全局的 window.onerror 來監聽。

異步錯誤

ErrorBoundary 無法捕捉到異步報錯，可使用 window.onerror 來監聽。

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

答案

• ErrorBoundary 監聽渲染時報錯

• try-catch 和 window.onerror 捕獲其他錯誤

擴展

Promise 監聽報錯要使用 window.onunhandledrejection

前端拿到錯誤監聽之后，需要傳遞給服務端，進行錯誤收集和分析，然后修復 bug 。

“前端項目中的Vue、React錯誤監聽怎么實現”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！