欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-11 11:49:20
背景 现在的前端项目越来越复杂,在不同的客户端会产生各种在开发人员机器上不会出现的问题。当用户报告一个问题给开发人员的时候,开发人员无法直接定位问题。在此前,听过一次鹅厂的前端人员,他们对QQ里面的网页监控的一个讲座,深有感触。但是鹅厂是自己开发了一系统,从开发到运维到错误分析,是一整套的体系。对于 ......

背景

现在的前端项目越来越复杂,在不同的客户端会产生各种在开发人员机器上不会出现的问题。当用户报告一个问题给开发人员的时候,开发人员无法直接定位问题。在此前,听过一次鹅厂的前端人员,他们对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://f3da1a4f401c434cba447be865d2bd41@sentry.io/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. 错误的信息和调用堆栈
    前端异常日志监控 - 使用Sentry

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

上传 sourcemaps 对错误进行定位

如何产生sourcemap, 如果不熟悉的话,可以参考sentry generating source maps 文档,有各类框架如何产生source maps.
sentry 有多种方式上传sourcemaps,release apisentry clisentry-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. 前端异常日志监控 - 使用Sentry

  2. 前端异常日志监控 - 使用Sentry
  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文件

前端异常日志监控 - 使用Sentry
根据上图可以看到,版本号,这个对于的在webpack插件中的release。也是说,sentry可以帮你管理多个版本的sourcemaps。
同时在这个版本上,可以看到有多少个问题,最后一个问题的时间。

sourmap 上传后的错误效果

上述步骤完成后,在回到我们的页面,重现一次错误,然后看看在sentry有什么不同。
前端异常日志监控 - 使用Sentry

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

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

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

参考

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