摘要:摘要的錯誤監(jiān)控插件同步支持異步錯誤監(jiān)控。此次更新,我們對的監(jiān)控插件做了相應的更新,來更好地支持使用框架開發(fā)的應用錯誤的監(jiān)控。程序運行后,成功捕獲該錯誤總結(jié)更新到,對錯誤處理提供了更加強大的支持。
摘要: Fundebug 的 JavaScript 錯誤監(jiān)控插件同步支持 Vue.js 異步錯誤監(jiān)控。
Vue.js 從誕生至今已經(jīng) 5 年,尤大在今年 2 月份發(fā)布了重大更新,即Vue 2.6。更新包括新增 scoped slot 語法、性能提升、動態(tài)指令參數(shù)等等。其中我們最關(guān)注的是錯誤處理。
異步錯誤處理Vue 的內(nèi)置錯誤處理機制(組件內(nèi) errorCaptured hook 和全局 errorHandler hook)現(xiàn)在也會捕獲 v-on 處理程序內(nèi)部的錯誤。此外,如果任意一個生命周期 hook 或事件處理程序執(zhí)行了異步操作,現(xiàn)在可以從函數(shù)中返回一個 Promise,Promise 鏈中任何一個未被捕獲的錯誤都會被發(fā)送給錯誤處理程序。如果使用了 async/await,則會變得更加容易,因為異步函數(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ù)官方介紹,錯誤處理的改進包括兩個方面:
捕獲 v-on 處理程序內(nèi)部的錯誤
異步 Promise 錯誤
Fundebug作為最專業(yè)的 BUG(錯誤)監(jiān)控服務(wù)平臺,已經(jīng)服務(wù)數(shù)千家企業(yè),數(shù)萬名開發(fā)者。據(jù)統(tǒng)計,所有的前端項目中,有22.5%使用 Vue.js 開發(fā)。之前有使用 Vue.js 框架開發(fā)的客戶反饋有 bug 監(jiān)控不到。此次 Vue.js 更新,我們對JavaScript 的監(jiān)控插件做了相應的更新,來更好地支持使用 Vue.js 框架開發(fā)的應用錯誤的監(jiān)控。
錯誤監(jiān)控測試(TodoMVC)我們使用經(jīng)典的 todoMVC 項目來進行測試。
首先接入 Fundebug 監(jiān)控插件,在 Fundebug 官網(wǎng)創(chuàng)建一個 Vue.js 監(jiān)控項目。
接下來根據(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需要免費注冊帳號并且創(chuàng)建項目。
然后,我們對右下角的Clear Completed按鈕對應的代碼進行更改,通過v-on來定義點擊事件,然后對應的deleteCompleted函數(shù)故意將todos寫成todo。
deleteCompleted() { this.todos = this.todo.filter(todo => !todo.completed); }
點擊Clear Completed觸發(fā)報錯:
Fundebug 成功捕獲該錯誤:
2. 異步 Promise 錯誤通過axios發(fā)送一個 GET 請求獲取數(shù)據(jù),然后將返回數(shù)據(jù)處理。假定不小心將data寫成了date,那么data.length會觸發(fā)錯誤。
deleteCompleted() { return axios .get("https://jsonplaceholder.typicode.com/todos/") .then(response => { let data = response.date; let len = data.length; }); }
程序運行后,F(xiàn)undebug 成功捕獲該錯誤:
總結(jié)Vue.js 更新到 2.6.10,對錯誤處理提供了更加強大的支持。Fundebug 的 JavaScript 監(jiān)控插件支持 Vue.js 項目中v-on和異步錯誤的監(jiān)控。
關(guān)于FundebugFundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監(jiān)控。 自從2016年雙十一正式上線,F(xiàn)undebug累計處理了10億+錯誤事件,付費客戶有Google、360、金山軟件、百姓網(wǎng)等眾多品牌企業(yè)。歡迎大家免費試用!
版權(quán)聲明轉(zhuǎn)載時請注明作者Fundebug以及本文地址:https://blog.fundebug.com/2019/05/13/fundebug-support-vue-2-6-10/
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/109471.html
摘要:前端異常監(jiān)控插件更新至,修復了個小修復用戶行為中重復記錄請求的修復的為報錯的這個都不會影響功能,不過為了避免造成困擾,請大家及時更新插件。 摘要: 修復2個BUG,請大家及時更新。 showImg(https://segmentfault.com/img/remote/1460000019373421?w=900&h=383); Fundebug前端異常監(jiān)控服務(wù) Fundebug是專業(yè)...
摘要:摘要新增配置選項,支持監(jiān)控慢請求,同時修復了記錄的響應時間偏小的。的前端異常監(jiān)控插件更新至,新增配置選項,支持監(jiān)控慢請求,同時修復了記錄的響應時間偏小的,請大家及時更新監(jiān)控慢請求專注于程序異常監(jiān)控,暫時無意于提供全面的性能監(jiān)控服務(wù)。 摘要: 1.9.0新增 httpTimeout 配置選項,支持監(jiān)控 HTTP 慢請求,同時修復了記錄的 HTTP 響應時間偏小的 BUG。 showImg...
摘要:摘要兼容低版本瀏覽器,請大家及時更新。通過優(yōu)化配置,我們兼容了一些低版本的瀏覽器可知,插件最低兼容,以及。例如,我們的錄屏功能僅支持一些高版本的瀏覽器,均不支持。 摘要: 兼容低版本Android瀏覽器,請大家及時更新。 showImg(https://segmentfault.com/img/remote/1460000019373421?w=900&h=383); Fundebug...
摘要:微信小程序運維中心提供了錯誤日志記錄,但功能還是比較有限。有時候一個微信小程序可能會用到多個第三方服務(wù),從多個域名獲取數(shù)據(jù)。要使用監(jiān)控,你需要去網(wǎng)站注冊賬號并創(chuàng)建一個微信小程序監(jiān)控項目,然后按照提示接入插件。 在微信小程序里,與后臺服務(wù)器交互的主要接口函數(shù)是wx.request(),用于發(fā)起 HTTPS 網(wǎng)絡(luò)請求。其重要性不言而喻。然而,卻經(jīng)常遇到請求失敗的問題,筆者特意谷歌wx.re...
摘要:之前版本的插件只能監(jiān)控執(zhí)行錯誤,這次,我們正式發(fā)布,它新增了對資源加載錯誤與請求錯誤的支持,努力讓前端開發(fā)者不放過每一個??梢圆东@所有請求錯誤,同時記錄用戶行為,并實時提醒開發(fā)者,且不需要修改后端,也不需要搭建復雜的日志系統(tǒng)。 摘要:Fundebug的JavaScript監(jiān)控插件更新至0.1.0,可以監(jiān)控3種不同類型的前端BUG:JavaScript執(zhí)行錯誤、資源加載錯誤、HTTP請求...
閱讀 1481·2021-09-22 15:52
閱讀 1546·2019-08-30 15:44
閱讀 916·2019-08-30 14:24
閱讀 2733·2019-08-30 13:06
閱讀 2734·2019-08-26 13:45
閱讀 2813·2019-08-26 13:43
閱讀 1045·2019-08-26 12:01
閱讀 1494·2019-08-26 11:56