每個web專案上線後，難免會出現各種奇奇怪怪的bug，或網路，或系統無法，或相容適配，或測試遺漏等等原因。為了能更快的定位問題，解決問題，所以新增前端異常監控至關重要。本文就具體介紹一下怎麼在Vue3專案中配置全域性異常監控。

一、方法介紹

在Vue專案中，錯誤異常監控可從以下三個方法入手：

1. JS全域性onerror

特點：

• 全域性監聽所有JS錯誤
• 無法識別 Vue 元件資訊
• 可以捕獲一些 Vue 監聽不到的錯誤，如：非同步錯誤

語法：

window.onerror = function(message, source, lineno, colno, error) {
  console.log(message, source, lineno, colno, error)
  // do something
}

// or

window.addEventListener('error', function(event) { 
  console.log(event)
  // do something
})
 

引數：

• message：錯誤訊息（字串）
• source：引發錯誤的指令碼的URL（字串）
• lineno：發生錯誤的行號（數值）
• colno：發生錯誤的行的列號（數值）
• error：錯誤物件（物件）

2. Vue配置方法errorHandler

特點：

• Vue全域性錯誤監聽，所有元件錯誤都會彙總到這裡

• errorCaptured 返回 false ，錯誤會被提前攔截阻止，這裡無法捕獲

• 監聽所有 下級 元件的錯誤

• 返回 false 會阻止錯誤向上傳播

配置：

app.config.errorHandler = (err, vm, info) => {
  console.log(err, vm, info)
  // do something
}
 

引數：

• err：具體錯誤資訊
• vm：當前錯誤所在的Vue例項
• info：Vue特定的錯誤資訊，錯誤所在的生命週期鉤子

3. 生命週期鉤子errorCaptured

特點：

• 監聽所有 下級 元件的錯誤
• 返回 false 會阻止錯誤向上傳播

配置：

<script setup>
  import { onErrorCaptured } from 'vue'

  onErrorCaptured((err, vm, info)=>{
    console.log(err, vm, info)
    // do something
  })
</script>  
 

引數和全域性 errorHandler 完全一致

二、方法封裝

1. 新建 commonApi.js 檔案，封裝 http 介面請求

// src/api/commonApi.js

import store from '@/store';

const osType = (function () {
  const ua = window.navigator.userAgent;
  if (/(Android)/.test(ua)) {
    return 1;
  }
  if (/(iPhone|iPad)/.test(ua)) {
    return 2;
  }
  return 3;
}());

const isProd = process.env.NODE_ENV === 'production';

export default {
  postErrorLogs(prams) {
    /*
    * project 發生專案 可自行定義
    * errorType 錯誤型別: 1介面報錯 2程式碼報錯
    * terminal 終端平臺: 1安卓 2ios 3web
    * */
    if (!isProd) return;
    return ajax({
      url: '/api/common/log/error',
      method: 'POST',
      data: {
        ...prams,
        userInfo: store.getters['User/getUserInfo'].userId || '',
        pageUrl: window.location.href,
        project: 'xxx',
        terminal: osType,
      },
    });
  },
}

2. 新建 errorHandler.js 檔案，封裝 error 監聽方法

// src/common/errorHandler.js

import { nextTick } from 'vue';
import CommonApi from '@/api/CommonApi';

export default {
  errorHandler(err, vm, info) {
    nextTick(async () => {
      await CommonApi.postErrorLogs({
        errorType: 2, // 錯誤型別: 1介面報錯 2程式碼報錯
        errorInfo: err.toString(),
        note: `元件：${vm.$.vnode.type.__file} \n發生錯誤：${err} \n所在生命週期：${info}`,
      });
    });
  },
  
  async onerror(message, source, lineno, colno, error) {
    await CommonApi.postErrorLogs({
      errorType: 2, // 錯誤型別: 1介面報錯 2程式碼報錯
      errorInfo: `錯誤原因：${message}\n錯誤URL: ${source}\n錯誤行號: ${lineno}`,
    });
  },
};

三、專案配置

在入口檔案 main.js 中配置監控方法

// src/main.js

import { createApp } from 'vue'
import ErrorFn from './common/errorHandler';
import App from './App.vue'

const isProd = process.env.NODE_ENV === 'production';

// ...

const app = createApp(App)

if (isProd) {
  app.config.errorHandler = ErrorFn.errorHandler
  window.onerror = ErrorFn.onerror
}

// ...

app.mount('#app')

溫馨提示：

1. onErrorCaptured 鉤子監聽可以在一些業務比較重要的元件進行配置，收集詳細錯誤資訊。
2. 使用了 onErrorCaptured 建議返回 false，避免收集重複的錯誤資訊。
3. errorHandler 和 onErrorCaptured 不能收集非同步錯誤。
4. Vue2 和 Vue3 中的使用方法類似，onErrorCaptured 是Vue3組合式API的方法，Vue2中使用 errorCaptured 鉤子即可。

《Vue3學習與實戰》系列

• Vue3學習與實戰 · 全域性異常監控（本文）
• Vue3學習與實戰 · 元件通訊
• Vue3學習與實戰 · 全域性掛載使用Axios
• Vue3學習與實戰 · 配置使用vue-router路由
• Vue3學習與實戰 · Vuex狀態管理
• vue3 + vite實現非同步元件和路由懶載入
• Vite+Vue3+Vant快速構建專案

歡迎訪問：天問部落格