【前端链路监控】前端错误日志收集

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 所需的配置的标识。它由以下几个部分组成。

使用的协议: http 或 https;
验证 sdk 的公钥和密钥;
目标 sentry 服务器;
验证用户绑定的项目 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, 机型, 操作系统, 浏览器版本, 时间)
错误代码的定位(具体文件，具体行数)
同一个错误发生的次数和用户数
区分错误的环境及版本

posted @ 2020-05-06 16:36 expworld 阅读(1131) 评论(0) 编辑收藏举报

刷新页面返回顶部

expworld

天天向上

【前端链路监控】前端错误日志收集

1、为什么要处理异常？

2、需要处理哪些异常？

3、收集错误日志的方法

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

3.2、利用 vuex 收集错误

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

3.4、Fundebug(付费，弃)

4、sentry(推荐)

sentry的特性

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

4.2、安装依赖，引入脚本

4.3、基本使用

4.4、source-map 配置

4.5、报警邮件发送规则

4.6、信息收集

公告

expworld

天天向上

【前端链路监控】前端错误日志收集

1、为什么要处理异常？

2、需要处理哪些异常？

3、收集错误日志的方法

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

3.2、利用 vuex 收集错误

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

3.4、Fundebug(付费，弃)

4、sentry(推荐)

sentry的特性

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

4.2、安装依赖，引入脚本

4.3、基本使用

4.4、source-map 配置

4.5、 报警邮件发送规则

4.6、信息收集

公告

4.5、报警邮件发送规则