-
增强用户体验；
-
远程定位问题，未雨绸缪，及早发现问题及早处理；
-
无法复现问题，尤其是移动端，可以查找日志；
-
收集错误产生的系统信息，如浏览器，机型等；
-
完善的前端方案，前端监控系统；
-
对于 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)
}
)
|
// 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
|
通过后台接口上传错误信息，然后在后台管理系统查询错误信息。通过这些信息我们可以很快定位并且解决问题。
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)
}
|
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)
Sentry 是一个开源的错误追踪工具，可以帮助开发人员实时监控和修复系统中的错误。其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言(JS/Java/Python/php)和平台, 并提供了 web 来展示输出错误。sentry 官网：https://sentry.io
sentry的特性
-
支持多种语言和框架
-
相同错误合并
-
定制规则进行邮件通知
-
支持导入sourcemap自动解析和还原代码
-
友好的可视化Web界面
4.1、注册账号，新建项目。
新建项目后，您将获得一个我们称之为 DSN 或数据源名称的值.它看起来很像一个标准的 URL，但它实际上只是 Sentry SDK 所需的配置的标识。它由以下几个部分组成。
-
使用的协议: http 或 https;
-
验证 sdk 的公钥和密钥;
-
目标 sentry 服务器;
-
验证用户绑定的项目 id.
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)
})
|
-
创建新的 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资源的相对路径
})
|
Sentry 默认会将所有采集到的异常发送警报邮件，有时我们可能希望只收到某个版本下某些规则下的警报邮件，这时候就需要删除默认的警报规则，然后新建自定义规则。 在项目设置中找到 Alerts，左上角 “New Alert Rule”即可添加设置报警规则。
4.6、信息收集
-
错误类型及具体错误信息
-
丰富的上下文周围的错误
-
用户信息(ip, 机型, 操作系统, 浏览器版本, 时间)
-
错误代码的定位(具体文件，具体行数)
-
同一个错误发生的次数和用户数
-
区分错误的环境及版本