您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)Vue.js@2.6.10更新內(nèi)置錯(cuò)誤處機(jī)制Fundebug同步支持相應(yīng)錯(cuò)誤監(jiān)控的示例分析,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
Vue.js 從誕生至今已經(jīng) 5 年,尤大在今年 2 月份發(fā)布了重大更新,即Vue 2.6。更新包括新增 scoped slot 語(yǔ)法、性能提升、動(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ù)萬(wàn)名開(kāi)發(fā)者。據(jù)統(tǒng)計(jì),所有的前端項(xiàng)目中,有22.5%使用 Vue.js 開(kāi)發(fā)。之前有使用 Vue.js 框架開(kāi)發(fā)的客戶反饋有 bug 監(jiān)控不到。此次 Vue.js 更新,我們對(duì)JavaScript 的監(jiān)控插件做了相應(yīng)的更新,來(lái)更好地支持使用 Vue.js 框架開(kāi)發(fā)的應(yīng)用錯(cuò)誤的監(jiān)控。
錯(cuò)誤監(jiān)控測(cè)試(TodoMVC)
1. 通過(guò) v-on 定義事件
我們使用經(jīng)典的 todoMVC 項(xiàng)目來(lái)進(jìn)行測(cè)試。
首先接入 Fundebug 監(jiān)控插件,在 Fundebug 官網(wǎng)創(chuàng)建一個(gè) Vue.js 監(jiān)控項(xiàng)目。
接下來(lái)根據(jù)接入代碼,安裝 Fundebug JavaScript 和 Vue 插件:
通過(guò)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)行更改,通過(guò)v-on
來(lái)定義點(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ò)誤
通過(guò)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ò)誤:
關(guān)于“Vue.js@2.6.10更新內(nèi)置錯(cuò)誤處機(jī)制Fundebug同步支持相應(yīng)錯(cuò)誤監(jiān)控的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。