摘要： Fundebug 的 JavaScript 錯誤監控插件同步支援 Vue.js 異步錯誤監控。
Vue.js 從誕生至今已經 5 年，尤大在今年 2 月份釋出了重大更新，即
Vue 2.6 。更新包括新增 scoped slot 文法、性能提升、動态指令參數等等。其中我們最關注的是錯誤處理。異步錯誤處理
Vue 的内置錯誤處理機制（元件内 errorCaptured hook 和全局 errorHandler hook）現在也會捕獲 v-on 處理程式内部的錯誤。此外，如果任意一個生命周期 hook 或事件處理程式執行了異步操作，現在可以從函數中傳回一個 Promise，Promise 鍊中任何一個未被捕獲的錯誤都會被發送給錯誤處理程式。如果使用了 async/await，則會變得更加容易，因為異步函數隐式傳回 Promise：
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 錯誤
作為最專業的 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
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
和異步錯誤的監控。
版權聲明
轉載時請注明作者
以及本文位址：
https://blog.fundebug.com/2019/05/13/fundebug-support-vue-2-6-10/