iT邦幫忙

1

Vue 使用 errorHandler, warnHandler 即時攔截網頁錯誤

  • 分享至 

  • xImage
  •  

在前端其中一個頭痛的問題就是網頁 Bug,我會想知道使用者在前端操作上遇到了什麼問題,因此在 Vue 中,你可以透過 errorHandler 攔截網頁錯誤,你可以即時抓到這些錯誤訊息並修正,用法也非常簡單

在 main.js 中

import Vue from 'vue'
...

Vue.config.errorHandler = function(err, vm, info) {
  console.log(err.toString())
}

Vue.config.warnHandler = function(err, vm, trace) {
  console.log(err, trace)
}

...
Vue.config.productionTip = false

我的作法是遇到錯誤就丟到 Slack 頻道,很即時就可以知道當下使用者遇到了什麼問題。我現在 Vue 的專案基本上都會有這樣的操作

注意:warnHandler 在正式環境是不會起作用的,因此程式碼中的 productionTip = false 為必要設定

原文出處:https://ianakaberlin.medium.com/vue-%E4%BD%BF%E7%94%A8-errorhandler-warnhandler%E5%8D%B3%E6%99%82%E6%94%94%E6%88%AA%E7%B6%B2%E9%A0%81%E9%8C%AF%E8%AA%A4-vue-errorhandler-warnhandler-%E4%BC%8A%E6%81%A9%E8%B8%A9%E5%9D%91%E7%AD%86%E8%A8%98-e0a253fa12c9


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言