Skip to content

错误处理

throw

  • 什么情况下用 throw,即不满足继续执行条件,继续执行没意义,只会显示更多无用错误,甚至可能是死循环
  • 中断函数执行,抛出一个 exception 对象,包含 name 和 message 两个属性,也可以添加其它的属性 try ... catch (e) {console.log(e.name, e.message)} catch 从句可捕获异常错误
js
function divide(num1, num2) {
  if (typeof num1 != 'number' || typeof num2 != 'number') {
    throw new Error('divide(): Both arguments must be numbers.')
  }
  return num1 / num2
}

可抽象成断言函数,简化错误输出

js
function assert(conditon, message) {
  if (!condition) {
    throw new Error(message)
  }
}

function divide(num1, num2) {
  assert(
    typeof num1 != 'number' || typeof num2 != 'number',
    'divide(): Both arguments must be numbers.'
  )
  return num1 / num2
}

GlobalEventHandlers.onerror | MDN异常和错误处理  |  Tools for Web Developers  |  Google Developers前端代码异常日志收集与监控您必须知道的几个 Nodejs 编码习惯 · GitBook

Vue

  • Vue.config.errorHandler在这里设置上报
  • Vue.config.warnHandler在 production 会忽略
  • errorCaptured hook 可以用来做 error-boundary 组件,2.5+ 可用,捕获子孙组件 vue render 错误,捕获不了 click 等事件函数错误

生产环境部署 — Vue.js

Error handling with Vue.js (a story of rental cars and Destinys Child) | CatchJS

catchen.me/_layout.jade at c622f7c49e5b603cb4d768c189e1c2e0436bebcf · CatChen/catchen.me

前端代码异常日志收集与监控 - Barret Lee - 博客园

前端代码异常监控实战 · Issue #5 · happylindz/blog

Image

  1. 在 img 标签上设置 v-on:error=""
  2. 设置替换图片,要保证替换图片存在,否则可能造成死循环

Sentry

手动上报 Sentry.captureMessage('Something went wrong');

Capturing Events - Docs https://docs.sentry.io/error-reporting/capturing/?platform=javascript

错误模拟

  • dev tool block,忽略这种情况,意义不大
  • mock 500,这种常见,onError 能捕获到

实践

js

    // 监控js错误
    window.onerror = function (msg, _url, line, col, error) {
      // 采用异步的方式,避免阻塞
      setTimeout(() => {}, 0)
      return false;

    // 监控资源加载错误(img,script,css,以及jsonp)
    window.addEventListener('error', (e) => {
    
    window.addEventListener('unhandledrejection', event => {

1px gif

  1. 没有跨域问题,一般这种上报数据,代码要写通用的;(排除ajax)
  2. 不会阻塞页面加载,影响用户的体验,只要new Image对象就好了;(排除JS/CSS文件资源方式上报)
  3. 在所有图片中,体积最小;(比较PNG/JPG)

cdn 脚本错误

脚本由于跨域的问题,错误监控拿到的错误信息里面只有Script Error

What the heck is "Script error"? | Product Blog • Sentry https://blog.sentry.io/2016/05/17/what-is-script-errorhttps://html.spec.whatwg.org/multipage/scripting.html#attr-script-crossorigin