前端項目中的Vue、React錯誤監(jiān)聽怎么實現(xiàn)

本篇內(nèi)容介紹了“前端項目中的Vue、React錯誤監(jiān)聽怎么實現(xiàn)”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

一、 Vue 錯誤監(jiān)聽

題目:

如何統(tǒng)一監(jiān)聽 Vue 組件報錯？

分析:

真實項目需要閉環(huán)，即考慮各個方面，除了基本的功能外，還要考慮性能優(yōu)化、報錯、統(tǒng)計等。 而個人項目、課程項目一般以實現(xiàn)功能為主，不會考慮這么全面。所以，沒有實際工作經(jīng)驗的同學(xué)，不會了解如此全面。

window.onerror

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

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

errorCaptured 生命周期

會監(jiān)聽所有下級組件的錯誤?？梢苑祷?nbsp;false 阻止向上傳播，因為可能會有多個上級節(jié)點都監(jiān)聽錯誤。

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

errorHandler

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

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

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

PS：還有 warnHandler

異步錯誤

組件內(nèi)的異步錯誤 errorHandler 監(jiān)聽不到，還是需要 window.onerror

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

答案

方式

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

• errorHandler 監(jiān)聽 Vue 全局錯誤

• window.onerror 監(jiān)聽其他的 JS 錯誤，如異步

建議：結(jié)合使用

• 一些重要的、復(fù)雜的、有運行風(fēng)險的組件，可使用 errorCaptured 重點監(jiān)聽

• 然后用 errorHandler window.onerror 候補(bǔ)全局監(jiān)聽，避免意外情況

擴(kuò)展

Promise 監(jiān)聽報錯要使用 window.onunhandledrejection

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

二、React 錯誤監(jiān)聽

題目:

如何統(tǒng)一監(jiān)聽 React 組件報錯？

分析:

真實項目需要閉環(huán)，即考慮各個方面，除了基本的功能外，還要考慮性能優(yōu)化、報錯、統(tǒng)計等。

ErrorBoundary

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

import React from 'react'

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            error: null // 存儲當(dāng)前的報錯信息
        }
    }
    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 <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 無法監(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

建議應(yīng)用到最頂層，監(jiān)聽全局錯誤

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

函數(shù)組件中也可以使用

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

dev 和 build

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

事件報錯

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

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

異步錯誤

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

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

答案

• ErrorBoundary 監(jiān)聽渲染時報錯

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

擴(kuò)展

Promise 監(jiān)聽報錯要使用 window.onunhandledrejection

前端拿到錯誤監(jiān)聽之后，需要傳遞給服務(wù)端，進(jìn)行錯誤收集和分析，然后修復(fù) bug 。

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