1、为什么要处理异常？

  • 增强用户体验；
  • 远程定位问题，未雨绸缪，及早发现问题及早处理；
  • 无法复现问题，尤其是移动端，可以查找日志；
  • 收集错误产生的系统信息，如浏览器，机型等；
  • 完善的前端方案，前端监控系统；
  • 对于 JS 而言，我们面对的仅仅只是异常，异常的出现不会直接导致 JS 引擎崩溃，最多只会使当前执行的任务终止。

2、需要处理哪些异常？

  • js 语法错误、代码异常；
  • http 请求异常(服务问题，接口问题？)；
  • 静态资源加载异常；
  • 后端返回数据格式不规范导致的 js 错误；
  • Iframe 异常，跨域 Script error 等；
  • 崩溃和卡顿

3、收集错误日志的方法

3.1、最简单的错误处理方法

Vue 全局配置 errorHandler 可以进行全局错误收集,我们可以根据这个特性对前端异常做这样的处理：业务错误直接写在业务里；代码错误、ajax 请求异常等错误可以进行全局捕获然后抛出，不至于前端页面挂掉。

import Vue from 'vue'
const errorHandler = (error, vm) => {
  console.error('抛出全局异常')
  console.error(error)
}
Vue.config.errorHandler = errorHandler
Vue.prototype.$throw = error => errorHandler(error, this)

// 请求拦截
axios.interceptors.response.use(
  res => {
    if (res.data.coe !== 200) {
      console.log('请求失败')
      return Promise.reject(res)
    }
    return res
  },
  error => {
    Vue.$throw(error)
    return Promise.reject(error)
  }
)

3.2、利用 vuex 收集错误

// errorLog.js
import Vue from 'vue'
import store from './store'
Vue.config.errorHandler = function(err, vm, info, a) {
  Vue.nextTick(() => {
    store.dispatch('addErrorLog', {
      err,
      vm,
      info,
      url: window.location.href
    })
    console.error(err, info)
  })
}

// vuex errorLog模块
const errorLog = {
  state: {
    logs: []
  },
  mutations: {
    ADD_ERROR_LOG: (state, log) => {
      state.logs.push(log)
    }
  },
  actions: {
    addErrorLog({ commit }, log) {
      commit('ADD_ERROR_LOG', log)
    }
  }
}
export default errorLog

3.3、通过接口捕捉——上传——查询错误

通过后台接口上传错误信息，然后在后台管理系统查询错误信息。通过这些信息我们可以很快定位并且解决问题。

function error(msg, url, line) {
  var REPORT_URL = 'http://xxxx.com' // 收集上报数据的信息
  // 收集错误信息，发生错误的脚本文件网络地址，用户代理信息，时间
  var m = [msg, url, line, navigator.userAgent, +new Date()]
  var url = REPORT_URL + m.join('||') // 组装错误上报信息内容URL
  var img = new Image()
  img.onload = img.onerror = function() {
    img = null
  }
  img.src = url // 发送数据到后台cgi
}
// 监听错误上报
window.onerror = function(msg, url, line) {
  error(msg, url, line)
}

3.4、Fundebug(付费，弃)

Fundebug 是专业的应用 BUG 监控平台。当线上应用出现 BUG 时，Fundebug 会通过邮件或者第三方工具立即给开发者发送报警，这样能够帮助开发者及时发现并且修复应用 BUG，从而提升用户体验。网址：https://www.fundebug.com/

使用方法

 

// 1、安装 npm install fundebug-javascript fundebug-vue --save
// 2、配置：main.js
import * as fundebug from 'fundebug-javascript'
import fundebugVue from 'fundebug-vue'
fundebug.apikey = 'API-KEY'
fundebugVue(fundebug, Vue)

API

  • test(name, message)
  • notify(name, message, option)
  • notifyError(error, option)

4、sentry(推荐)

Sentry 是一个开源的错误追踪工具，可以帮助开发人员实时监控和修复系统中的错误。其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言(JS/Java/Python/php)和平台, 并提供了 web 来展示输出错误。sentry 官网：https://sentry.io

sentry的特性

  • 支持多种语言和框架
  • 相同错误合并
  • 定制规则进行邮件通知
  • 支持导入sourcemap自动解析和还原代码
  • 友好的可视化Web界面

4.1、注册账号，新建项目。

新建项目后，您将获得一个我们称之为 DSN 或数据源名称的值.它看起来很像一个标准的 URL，但它实际上只是 Sentry SDK 所需的配置的标识。它由以下几个部分组成。

  1. 使用的协议: http 或 https;
  2. 验证 sdk 的公钥和密钥;
  3. 目标 sentry 服务器;
  4. 验证用户绑定的项目 id.

4.2、安装依赖，引入脚本

 

import Raven from 'raven-js'
import RavenVue from 'raven-js/plugins/vue'
Raven.config('https://a60af910fe4449e98fcf7fbb0c714f1a@sentry.io/1516655')
  .addPlugin(RavenVue, Vue)
  .install()

常用参数

  • DSN ：项目的地址，用于收集错误信息的 sentry 分配的地址
  • debug ：是否开启 debug 模式，开启 debug，就会把信息打印到控制台上面
  • release ： 代码的版本号，可以确定当前的错误/异常属于哪一个发布的版本
  • environment : 环境名称
  • attachStacktrace ： 是否开启堆栈跟踪，开启后跟着消息一起收集
  • beforeSend : 发送前操作

4.3、基本使用

最简单的方式是主动触发：

try {
  doSomething(a[0])
} catch (e) {
  Raven.captureException(e)
}

window.onerror 捕捉异常

window.onerror = function(e) {
  Raven.captureException(e)
}

在 vue 里可以使用 Vue.config.errorHandler 钩子来捕捉

Vue.config.errorHandler = (err, vm, info) => {
  Raven.captureException(err)
}

对于接口报错，可以在全局拦截里实现

request.interceptors.response.use(null, error => {
  console.error(error)
  Raven.captureException(error)
  return Promise.reject(error)
})

4.4、source-map 配置

  • 创建新的 token
  • 安装@sentry/webpack-plugin 插件, 一般会同时安装@sentry/cli
  • npm i @sentry/webpack-plugin --dev
  • 根目录创建.sentryclirc 文件
[defaults]
url = https://sentry.io/
org = your org
project = your project

[auth]
token = your token
  • 在 config/prod.env.js 创建环境变量

 

const release = 'demo-test001' // 可以根据package.json的版本号或者Git的tag命名
process.env.RELEASE_VERSION = release
module.exports = {
  NODE_ENV: '"production"',
  RELEASE_VERSION: `"${release}"`
}
  • 在 webpack.prod.conf 配置

 

const SentryPlugin = require('@sentry/webpack-plugin')
new SentryPlugin({
  release: process.env.RELEASE_VERSION, //发布的版本
  include: path.join(__dirname, '../dist/static/js/'), //需要上传到sentry服务器的资源目录
  ignore: ['node_modules', 'webpack.config.js'], //  忽略文件目录
  configFile: `.sentryclirc`, //  面包含了 -o组织 -p项目 以及authtoken
  urlPrefix: '~/static/js' //  线上对应的url资源的相对路径
})

4.5、 报警邮件发送规则

Sentry 默认会将所有采集到的异常发送警报邮件，有时我们可能希望只收到某个版本下某些规则下的警报邮件，这时候就需要删除默认的警报规则，然后新建自定义规则。 在项目设置中找到 Alerts，左上角 “New Alert Rule”即可添加设置报警规则。

4.6、信息收集

  • 错误类型及具体错误信息
  • 丰富的上下文周围的错误
  • 用户信息(ip, 机型, 操作系统, 浏览器版本, 时间)
  • 错误代码的定位(具体文件，具体行数)
  • 同一个错误发生的次数和用户数
  • 区分错误的环境及版本