前端异常日志监控 - 使用Sentry

背景

现在的前端项目越来越复杂，在不同的客户端会产生各种在开发人员机器上不会出现的问题。当用户报告一个问题给开发人员的时候，开发人员无法直接定位问题。在此前，听过一次鹅厂的前端人员，他们对qq里面的网页监控的一个讲座，深有感触。但是鹅厂是自己开发了一系统，从开发到运维到错误分析，是一整套的体系。对于我们的项目，我们不可能选择自己开发，在网上找到一个开源的产品 [ sentry ]，基本体现了鹅厂的那套思路。

关于 sentry

sentry 官网
以下是官网首页关于sentry的介绍
stop hoping your users will report errors
停止期待您的用户反馈错误
open-source error tracking that helps developers monitor and fix crashes in real time. iterate continuously. boost efficiency. improve user experience
帮助开发人员实时监控和修复错误，快速迭代，提高效率。提升用户体验。

不过多解释sentry产品，直接开始接入sentry, 非常简单。 sentry本身是有云服务的，可以让开发者快速体验，接入。云服务如果长期使用，是需要收费的，如果是体验就注册体验下即可，如果要项目用，可以自己搭建一个sentry 服务，参考 。

接入sentry

本项目是使用webpack打包的工程，如不使用webpack的，参考官方文档，非常简单。

1. 安装sentry的javascript的客户端npm包 npm install raven-js --save ; 参考 installation
2. 在js中调用和配置; 参考configuration

import raven from 'raven-js';

raven
    .config('http://[e-mail]/10')
    .install();


window.onload = function(){
    document.getelementbyid('container').addeventlistener('click',e => {
        console.log(window['aaa'].aaa) //此处window['aaa']为undifine，所以这里一定会报错
    }, false)
}

raven.config中的值，叫做dsn(客户端密匙)，可在项目的设置界面找到。如果看不到项目的设置菜单，可能是你账号权限不够。

查看效果

访问网页，点击按钮后，会产生js异常，很快会收到来自sentry邮件通知,点开即能看到详细的错误，包括：

1. 客户ip地址
2. 浏览器和操作系统
3. 访问的地址
4. 错误的信息和调用堆栈
   

在上图中，可以看见错误。这个和我们源代码的异常信息是一致的。但是在下方的js调用堆栈中，对应的是压缩后js文件位置，和我们源代码无法对应上，无法直接的帮助我们排查和定位问题。
要错误对应上我们源代码的位置，sentry要求我们上传js压缩时的sourcemaps。

上传 sourcemaps 对错误进行定位

如何产生sourcemap, 如果不熟悉的话，可以参考sentry generating source maps 文档，有各类框架如何产生source maps.
sentry 有多种方式上传sourcemaps，release api、sentry cli、sentry-webpack-plugin，详情参考uploading source maps to sentry, 我的工程中用的是webpack包，同时打包编译发布的过程是在ci中完成的，所以首先 sentry-webpack-plugin。

使用 sentry webpack plugin 配合webpack完成构建时上传sourcemaps

插件的使用方式，参考，以下截取文中内容的步骤：

1. start by creating a new authentication token under [account] > api.
2. ensure you have project:write selected under scopes.
3. install @sentry/webpack-plugin using npm
4. create .sentryclirc file with necessary config (see sentry webpack plugin docs below)
5. update your webpack.config.json

获取api token

登录sentry，在账号 -> api 中，

1. 

2. 

3. 请确保勾选了 project:write

安装sentry-webpack-plugin插件

npm install @sentry/webpack-plugin @sentry/cli --dev-save

创建.sentryclirc文件并配置

在项目的根目录下，创建一个文件.sentryclirc，并配置sentry cli需要的内容，以下是我的配置文件

[defaults]
url = http://sentry.io/
<!-- 此处可以从你的sentry.io的全路径看出，如：https://sentry.io/此处是你的org/此处是你的project/ -->
org = yunxun
project = qrcode

[auth]
token = cbf0ec5f33fa478184194ad32701b06ccb92451b7c5742d6b1f1c70f95e511d2

更新webpack.config.json

const sentryplugin = require('@sentry/webpack-plugin');

module.exports = {
    // ... other config above ...
    plugins: [
      new sentryplugin({
        release: process.env.release,
        include: './dist',
        ignore: ['node_modules', 'webpack.config.js'],
      })
    ]
};

以上步骤编译完成后，可以在sentry的项目里面看到我们上传的源文件和sourcemap文件

根据上图可以看到，版本号，这个对于的在webpack插件中的release。也是说，sentry可以帮你管理多个版本的sourcemaps。
同时在这个版本上，可以看到有多少个问题，最后一个问题的时间。

sourmap 上传后的错误效果

上述步骤完成后，在回到我们的页面，重现一次错误，然后看看在sentry有什么不同。

看图中比之前多出了几个功能：

1. 多出版本信息
2. 多出原始、最小化的标签
3. 这次的错误提示，不是压缩后js的提示，而是看起来和源代码一样

在这种方式下，可以直观，高效的定位排查问题。

参考

1. sentry 官网 javascript 整合
2. 前端错误日志监控——sentry使用教程
3. spa项目实现前端错误监控及定位错误