Vue.js 從誕生至今已經(jīng) 5 年，尤大在今年 2 月份發(fā)布了重大更新，即Vue 2.6。更新包括新增 scoped slot 語法、性能提升、動(dòng)態(tài)指令參數(shù)等等。其中我們最關(guān)注的是錯(cuò)誤處理。

異步錯(cuò)誤處理

Vue 的內(nèi)置錯(cuò)誤處理機(jī)制（組件內(nèi) errorCaptured hook 和全局 errorHandler hook）現(xiàn)在也會(huì)捕獲 v-on 處理程序內(nèi)部的錯(cuò)誤。此外，如果任意一個(gè)生命周期 hook 或事件處理程序執(zhí)行了異步操作，現(xiàn)在可以從函數(shù)中返回一個(gè) Promise，Promise 鏈中任何一個(gè)未被捕獲的錯(cuò)誤都會(huì)被發(fā)送給錯(cuò)誤處理程序。如果使用了 async/await，則會(huì)變得更加容易，因?yàn)楫惒胶瘮?shù)隱式返回 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();
 }
};

根據(jù)官方介紹，錯(cuò)誤處理的改進(jìn)包括兩個(gè)方面：

捕獲 v-on 處理程序內(nèi)部的錯(cuò)誤異步 Promise 錯(cuò)誤

Fundebug作為最專業(yè)的 BUG(錯(cuò)誤)監(jiān)控服務(wù)平臺(tái)，已經(jīng)服務(wù)數(shù)千家企業(yè)，數(shù)萬名開發(fā)者。據(jù)統(tǒng)計(jì)，所有的前端項(xiàng)目中，有22.5%使用 Vue.js 開發(fā)。之前有使用 Vue.js 框架開發(fā)的客戶反饋有 bug 監(jiān)控不到。此次 Vue.js 更新，我們對(duì)JavaScript 的監(jiān)控插件做了相應(yīng)的更新，來更好地支持使用 Vue.js 框架開發(fā)的應(yīng)用錯(cuò)誤的監(jiān)控。

錯(cuò)誤監(jiān)控測試(TodoMVC)

1. 通過 v-on 定義事件

我們使用經(jīng)典的 todoMVC 項(xiàng)目來進(jìn)行測試。

首先接入 Fundebug 監(jiān)控插件，在 Fundebug 官網(wǎng)創(chuàng)建一個(gè) Vue.js 監(jiān)控項(xiàng)目。

接下來根據(jù)接入代碼，安裝 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需要免費(fèi)注冊(cè)帳號(hào)并且創(chuàng)建項(xiàng)目。

然后，我們對(duì)右下角的Clear Completed按鈕對(duì)應(yīng)的代碼進(jìn)行更改，通過v-on來定義點(diǎn)擊事件，然后對(duì)應(yīng)的deleteCompleted函數(shù)故意將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);
 }

點(diǎn)擊Clear Completed觸發(fā)報(bào)錯(cuò)：

Fundebug 成功捕獲該錯(cuò)誤:

2. 異步 Promise 錯(cuò)誤

通過axios發(fā)送一個(gè) GET 請(qǐng)求獲取數(shù)據(jù)，然后將返回?cái)?shù)據(jù)處理。假定不小心將data寫成了date，那么data.length會(huì)觸發(fā)錯(cuò)誤。

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

程序運(yùn)行后，F(xiàn)undebug 成功捕獲該錯(cuò)誤：

總結(jié)

Vue.js 更新到 2.6.10，對(duì)錯(cuò)誤處理提供了更加強(qiáng)大的支持。Fundebug 的 JavaScript 監(jiān)控插件支持 Vue.js 項(xiàng)目中v-on和異步錯(cuò)誤的監(jiān)控。

以上所述是小編給大家介紹的Vue.js@2.6.10更新內(nèi)置錯(cuò)誤處理機(jī)制Fundebug同步支持相應(yīng)錯(cuò)誤監(jiān)控,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

最新評(píng)論