错误处理

throw

• 什么情况下用 throw，即不满足继续执行条件，继续执行没意义，只会显示更多无用错误，甚至可能是死循环
• 中断函数执行，抛出一个 exception 对象，包含 name 和 message 两个属性，也可以添加其它的属性 try ... catch (e) {console.log(e.name, e.message)} catch 从句可捕获异常错误

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

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

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错误
    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