Vue.js@2.6.10更新內建錯誤處機制，Fundebug同步支援相應錯誤監控

Fundebug發表於2019-05-13
Vue.js

摘要： 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 錯誤

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

錯誤監控測試(TodoMVC)

1. 通過 v-on 定義事件

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

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

Vue.js@2.6.10更新內建錯誤處機制，Fundebug同步支援相應錯誤監控

接下來根據接入程式碼，安裝 Fundebug JavaScript 和 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觸發報錯：

Vue.js@2.6.10更新內建錯誤處機制，Fundebug同步支援相應錯誤監控

Fundebug 成功捕獲該錯誤:

Vue.js@2.6.10更新內建錯誤處機制，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同步支援相應錯誤監控

總結

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

關於Fundebug

Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有Google、360、金山軟體、百姓網等眾多品牌企業。歡迎大家免費試用！

Vue.js@2.6.10更新內建錯誤處機制，Fundebug同步支援相應錯誤監控

版權宣告

轉載時請註明作者Fundebug以及本文地址：blog.fundebug.com/2019/05/13/…

相關文章