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

DC_er 發布于2019-08-26 13:45 / 2712人閱讀

摘要：摘要的錯誤監控插件同步支持異步錯誤監控。此次更新，我們對的監控插件做了相應的更新，來更好地支持使用框架開發的應用錯誤的監控。程序運行后，成功捕獲該錯誤總結更新到，對錯誤處理提供了更加強大的支持。

摘要： 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 監控項目。

接下來根據接入代碼，安裝 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需要免費注冊帳號并且創建項目。

然后，我們對右下角的Clear Completed按鈕對應的代碼進行更改，通過v-on來定義點擊事件，然后對應的deleteCompleted函數故意將todos寫成todo。

 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和異步錯誤的監控。

關于Fundebug

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

轉載時請注明作者Fundebug以及本文地址：https://blog.fundebug.com/2019/05/13/fundebug-support-vue-2-6-10/

云服務器 GPU云服務器同步錯誤百度云同步盤服務器錯誤 java錯誤日志監控百度云盤同步出現服務器內部錯誤

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/109471.html

Fundebug前端JavaScript插件更新至1.8.2，修復2個小BUG

摘要：前端異常監控插件更新至，修復了個小修復用戶行為中重復記錄請求的修復的為報錯的這個都不會影響功能，不過為了避免造成困擾，請大家及時更新插件。摘要：修復2個BUG，請大家及時更新。 showImg(https://segmentfault.com/img/remote/1460000019373421?w=900&h=383); Fundebug前端異常監控服務 Fundebug是專業...

lifesimple 2019-08-23 18:12 評論0 收藏0
Fundebug前端異常監控插件更新至 1.9.0，支持監控 HTTP 慢請求

摘要：摘要新增配置選項，支持監控慢請求，同時修復了記錄的響應時間偏小的。的前端異常監控插件更新至，新增配置選項，支持監控慢請求，同時修復了記錄的響應時間偏小的，請大家及時更新監控慢請求專注于程序異常監控，暫時無意于提供全面的性能監控服務。摘要： 1.9.0新增 httpTimeout 配置選項，支持監控 HTTP 慢請求，同時修復了記錄的 HTTP 響應時間偏小的 BUG。 showImg...

lyning 2019-08-23 18:31 評論0 收藏0
Fundebug前端JavaScript插件更新至1.8.0，兼容低版本的Android瀏覽器

摘要：摘要兼容低版本瀏覽器，請大家及時更新。通過優化配置，我們兼容了一些低版本的瀏覽器可知，插件最低兼容，以及。例如，我們的錄屏功能僅支持一些高版本的瀏覽器，均不支持。摘要：兼容低版本Android瀏覽器，請大家及時更新。 showImg(https://segmentfault.com/img/remote/1460000019373421?w=900&h=383); Fundebug...

wqj97 2019-08-23 17:55 評論0 收藏0
監控微信小程序wx.request請求失敗

摘要：微信小程序運維中心提供了錯誤日志記錄，但功能還是比較有限。有時候一個微信小程序可能會用到多個第三方服務，從多個域名獲取數據。要使用監控，你需要去網站注冊賬號并創建一個微信小程序監控項目，然后按照提示接入插件。在微信小程序里，與后臺服務器交互的主要接口函數是wx.request()，用于發起 HTTPS 網絡請求。其重要性不言而喻。然而，卻經常遇到請求失敗的問題，筆者特意谷歌wx.re...

lpjustdoit 2019-08-23 18:24 評論0 收藏0
Fundebug能夠捕獲這些BUG

摘要：之前版本的插件只能監控執行錯誤，這次，我們正式發布，它新增了對資源加載錯誤與請求錯誤的支持，努力讓前端開發者不放過每一個。可以捕獲所有請求錯誤，同時記錄用戶行為，并實時提醒開發者，且不需要修改后端，也不需要搭建復雜的日志系統。摘要：Fundebug的JavaScript監控插件更新至0.1.0，可以監控3種不同類型的前端BUG：JavaScript執行錯誤、資源加載錯誤、HTTP請求...

biaoxiaoduan 2019-08-21 11:47 評論0 收藏0