[email protected]更新內建錯誤處機制，Fundebug同步支援相應錯誤監控

摘要：Fundebug 的 JavaScript 錯誤監控外掛同步支援 Vue.js 非同步錯誤監控。

Vue.js 從誕生至今已經 5 年，尤大在今年 2 月份釋出了重大更新，即 Vue 2.6 。更新包括新增 scoped slot 語法、效能提升、動態指令引數等等。其中我們最關注的是 錯誤處理 。

export default {
async mounted() {
// if an async error is thrown here, it now will get
// caught by errorCaptured and Vue.config.errorHandler
this.posts = await api.getPosts();
}
};

根據官方介紹，錯誤處理的改進包括兩個方面：

• 捕獲 v-on 處理程式內部的錯誤
• 非同步 Promise 錯誤

Fundebug作為最專業的 BUG(錯誤)監控服務平臺，已經服務數千家企業，數萬名開發者。據統計，所有的前端專案中，有 22.5% 使用 Vue.js 開發。之前有使用 Vue.js 框架開發的客戶反饋有 bug 監控不到。此次 Vue.js 更新，我們對 JavaScript 的監控外掛 做了相應的更新，來更好地支援使用 Vue.js 框架開發的應用錯誤的監控。

錯誤監控測試(TodoMVC)

1. 通過 v-on 定義事件

我們使用經典的 todoMVC 專案來進行測試。

首先接入 Fundebug 監控外掛，在 Fundebug 官網建立一個 Vue.js 監控專案。

接下來根據接入程式碼，安裝 Fundebug JavaScript 和 Vue 外掛：

• 通過 npm 安裝 fundebug-javascript 與 fundebug-vue

npm install fundebug-javascript fundebug-vue --save

• 配置 apikey

import * as fundebug from "fundebug-javascript";
import fundebugVue from "fundebug-vue";
fundebug.apikey = "API-KEY";
fundebugVue(fundebug, Vue);

​ 其中，獲取 apikey 需要免費註冊帳號並且建立專案。

然後，我們對右下角的 Clear Completed 按鈕對應的程式碼進行更改，通過 v-on 來定義點選事件，然後對應的 deleteCompleted 函式故意將 todos 寫成 todo 。

<button class="clear-completed" v-show="completed" v-on:click="deleteCompleted">
Clear Completed
</button>

deleteCompleted() {
this.todos = this.todo.filter(todo => !todo.completed);
}

點選 Clear Completed 觸發報錯：

Fundebug 成功捕獲該錯誤:

2. 非同步 Promise 錯誤

通過 axios 傳送一個 GET 請求獲取資料，然後將返回資料處理。假定不小心將 data 寫成了 date ，那麼 data.length 會觸發錯誤。

deleteCompleted() {
return axios
.get("https://jsonplaceholder.typicode.com/todos/")
.then(response => {
let data = response.date;
let len = data.length;
});
}

程式執行後，Fundebug 成功捕獲該錯誤：

總結

Vue.js 更新到 2.6.10，對錯誤處理提供了更加強大的支援。Fundebug 的 JavaScript 監控外掛支援 Vue.js 專案中 v-on 和非同步錯誤的監控。