基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题

 

背景

 

　　在这愈来愈发达的网络时代，web应用也是愈来愈复杂，尤为是前端的开发，也是愈来愈受重视。

　　因此在咱们前端开发完成后，会有一些列的web应用的上线验证，如自测、QA测试、code review 等，以确保

应用能在生产上没有事故。

　　可是事以愿违，不少时候咱们都会接受的客户的一些线上问题，这些问题有时候可能你是本身开发的缘由自己存

在的问题，这样的问题通常可以在测试环境重现，咱们很快的能定位到问题关键位置。可是，不少时候有一些问题，

咱们在测试中并未发现，但是在线上却有部分人出现了，问题确确实实存在的，这个时候咱们测试环境又不能重现，

还有一些偶现的生产的偶现问题，这些都是难以定位到问题的缘由，让咱们前端工程师头疼不已。

　　这时候，咱们不得不借助一些功能来解决这一些列的头疼问题。

 

　　前端错误监控日志系统　　

　　当前端代码在生产运行中出现错误的时候，第一时间传递给监控系统，从而第一时间定位而且解决问题。

　　保证前端代码的稳定和安全，是项目能够健康的运行。

 

监控系统搭建方案

 

　　一、自行能够规划定义一套完善的监控系统。须要人力从新开发

　　二、借助第三方插件( 阿里ARMS、fundebug、BadJS，sentry 等 )

　　阿里ARMS ：是阿里的一个前端数据监控的服务，彷佛是收费的

　　fundebug ：挺完善的前端错误日志服务，也是收费的

　　BadJS ：腾讯团队的一个开源项目，没看过，应该很不错的

　　sentry ：github 上面的一个开源项目，支持各端的错误监控 ( 本文就是基于 sentry 搭建的错误监控系统 )

 

系统的搭建与使用

 

　　sentry 简介

　　sentry 是一个开源的实时错误监控的项目，它支持不少端的配置，包括 web 前端、服务器端、移动端及其游戏端。

支持各类语言，例如 python、oc、java、node、javascript 等。也能够应用到各类不一样的框架上面，如前端框架中的

vue 、angular 、react 等最流行的前端框架。

　　提供了github、slack、trello 的常见的开发工具的集成。能够本身安装而且搭建 sentry 应用。

 

支持的语言：

 

 

　　sentry 的部署

　　官网提供了两种部署方案：

　　docker

　　python

　　docker 是我第一次使用，看了下文档，感受挺容易明白。

　　在这里为了操做方便考虑，咱们选择使用docker来部署搭建 sentry。

　　这种方法的话须要安装 docker 和 docker - compose 。

 

一、docker 的部署 (mac版)

　　安装的话，能够直接去看看 docker 安装文档

　　docker 安装

　　mac 版的安装，docker-compose 已经一块儿安装好了。

 

二、部署 sentry

　　获取 sentry 代码

　　从 github 上面能够获取到最新的 sentry 代码

git clone https://github.com/getsentry/onpremise.git

　　获取到本地以后，进入项目的目录。

　　按照项目的 readme.md 开始依照步骤搭建。

　　

docker-compose run --rm web config generate-secret-key

　　这里是生产密钥，SENTRY_SECRET_KEY 这个须要添加到 docker-compose.yml 中。

　　

　　最后一步：

docker-compose up -d

　　

　　至此，咱们监控系统的后端服务器已经跑起来了，访问本地的9000端口。

　　使用中途建立的 邮箱和密码登录 咱们的服务后端。

 

 

三、建立项目

　　登录后咱们会进入咱们的监控项目的界面，如：

　　

 

　　点击右上角的  add new project ，咱们能够建立一个新的项目

　　

　　这里能够选择项目的配置，语言以及框架，选择本身的项目类型

　　输入项目名称，点击 create project 。肯定建立新项目。

 

　　

 

 　　点击红框框的，建立一个简单的日志。

　　

 

 　　错误信息页面，能够自行到官网上面去了解更多信息。

 

 

四、前端部署，注入监控代码 

　　

　　获取项目的连接：

　　

　　在项目的首页点击 install 会进入当前图示页面

　　咱们复制 sentry DSN 到咱们前端配置中

 

　　引用 sentry ，注入配置到咱们的应用中：

　　 

 

 　　这里是以 react 为例，咱们在 react 的根组建的 componentDidCatch 上面捕获错误，而且上传到咱们监控系统中。

　　这里的咱们用 sentry DSN 配置咱们的 sentry 而且初始化 sentry 项目。

 

　　到这里咱们基本，已经完成了咱们的前端错误监控日志系统了。

 

 

sentry 操做界面介绍

 

　　项目操做页面：

 

　　一、项目的查看选项

　　Issue ： 问题列表

　　overview ： 概况纵览

　　userfeedback ： 用户反馈

　　Resleases ： 版本列表信息

　　setting ： 项目设置

 

　　二、问题筛选

　　包括 ： 指派本身的 、 标记列表 、须要分类的 、 今天的 、 未处理的

 

　　

 

 　　设置为 解决 、 忽略 、 合并 、标记 、实时监控

 

　　

 

 

 

 

 

sentry 的api介绍和使用

　　

　　一、javascript SDK 引用与配置

 

　　如今有两种方法引用 sentry SDK :

 

　　直接引用：

　　最快的方法就是经过 script 标签引用咱们的 sdk 

<script src="https://browser.sentry-cdn.com/4.4.1/bundle.min.js" crossorigin="anonymous"></script>

　而后就是配置了。

Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });

　　

　　npm 包引用：

　　首先是用添加包 @sentry/browser@4.4.1

yarn add @sentry/browser@4.4.1

　　引用到项目中，而且配置

import * as Sentry from '@sentry/browser';

Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });

　　

 

　　二、捕获事件

 

　　主动捕获错误或者异常

　　sentry 常见的是错误捕获，能够根据平台的不一样来捕获错误，而且能够传递不一样的错误信息。

try {
    aFunctionThatMightFail();
} catch (err) {
    Sentry.captureException(err);
}
Sentry.captureException(new Error('test'))

　　

 

　　捕获消息

　　另外一种常见操做是捕获裸信息。消息只是应该发送给Sentry的一些文本信息。　　　　

Sentry.captureMessage('Something went wrong');

　　

 

　　三、初始化配置

　　

　　sentry SDK 能够经过不少方式进行配置。

　　主要配置初始化配置的函数为 init() 方法，经过向 init() 方法传递参数对象;

　　

Sentry.init({
  dsn: 'https://<key>@sentry.io/<project>',
  maxBreadcrumbs: 50,
  debug: true,
})

　　

　　经常使用参数：

　　DSN ：项目的地址，用于收集错误信息的 sentry 分配的地址

　　debug ：是否开启 debug 模式，开启debug，就会把信息打印到控制台上面

　　release ： 代码的版本号

　　　　release 版本号，能够肯定当前的错误/异常属于哪个发布的版本

　　　　能够应用到  sourcemaps 来映射源码

　　environment : 环境名称

　　sampleRate : 是否开启随机发送事件给 sentry ，1为100%，0.1 为 10%概率发送事件

　　attachStacktrace ： 是否开启堆栈跟踪，开启后跟着消息一块儿收集

　　beforeSend : 发送前操做

 

　　四、sentry 的api

　　

　　captureException(exception) : 捕获一个 js 异常，传入一个 exception 对象或者类对象。

　　captureMessage(message,level) : 捕获一条信息，传入信息内容和信息级别

　　captureEvent(sentryEvent) : 捕获一个事件，sentryEvent 是手动建立的，自定义的

　　addBreadcrumb(Breadcrumb) ： 添加一个面包屑，以供接下里的捕获

　　configureScope((scope)=>{}) : 设置 context 信息到 scope 上面

　　withScope((scope)=>{}) : 设置一个零时的 scope 信息到 context 上面

 

　　五、context 上下文信息

　　

　　上下文信息包括 ：user 、 tags 、 level 、fingerprint 、 extra data

　　这些信息咱们能够经过在 scope 上面设置来定义。

　　其中能够经过两种方法获得 scope 。

// 将 scope 配置到 context 上面
Sentry.configureScope((scope) => { }); 

// 建立一个零时到 scope ，配置到 context 上面
Sentry.withScope((scope) => { });

　　

　　

　　User

 scope.setUser({
        id:'1',
        username:'xiao',
        ip_address:'127.0.0.1',
        email: 'test.doe@example.com' ,
      });

　　经过 setUser 来设置 User 信息。

　　其中 user 能够设置的信息包括 id 、 username 、 ip_address 、email

　　

　　Tags

 　　tags 是给事件定义不一样的键/值对，能够在查找的时候更容易。

　　 后台查找的时候，查找选项会多出来一个选项，就是经过 tags 来设置的。

scope.setTag("page_local", "de-at");

　　经过 setTag 来设置了一个page_local 的标签。

　　后台会多一个 page_local 选项。包括 de-at

 

　　level

　　经过这个来设置事件的严重性。

　　包括：fatal 、error 、 warning 、 info 、 debug 。( fatal : 严重，error 错误，error 为默认 )

scope.setLevel('warning');

　　经过 setLevel 来设置。

 

　　Fingerprint 

　　指纹，经过指纹把信息分到不一样的组中 　　

 

 　　Extra Data

　　传入额外的信息。并不会建立索引(也就是不能够提供来检索)。

scope.setExtra("character_name", "Mighty Fighter");

　　经过 setExtra 来设置。

 

　　

　　六、Breadcurumbs 面包屑　　

 　　面包屑用于记录一系列当行为，当下一次发生错误事件上传当时候会随着一块儿上报。

　　 浏览器 javascript sdk 将自动记录全部当位置更改。

Sentry.addBreadcrumb({
  category: 'auth',
  message: 'Authenticated user ' + user.email,
  level: 'info'
});

　　咱们能够经过 addBreadcrumb 来添加一次行为记录。

 

　　七、user Feedback

　　用户反馈，sentry 提供了一个客户反馈当窗口。

　　当错误发生当时候，能够弹出窗口收集一些信息，例如：

　　用户名

　　用户当邮件地址

　　发生的问题的描述等。

Sentry.showReportDialog();

　　经过 showReportDialog 来实现框架的弹出。

 

　　

 

 

 　　

 

 

sentry实现预警而且邮件提醒

　　

　　邮件预警和邮件提醒是在生产环境中不可缺乏的一部分，只有有效的提醒来能让咱们最快的解决问题。

　　在项目中选择 setting -->  alerts  进入邮件预警设置页面。

 

 

 　　这里都是基本的邮件规则。

　　在 tabs 中的 rule 能够自定规则。

 

 　　规则设置：

 

　　An event is seen ： 一个事件发生的时候

　　An issue is first seen ： 第一个发生错误的时候

　　An issue changes state from resolved to unresolved ：问题从解决到未解决的时候

　　An event's tags match {key} {match} {value}  ： 匹配到 tags 的键值对的时候发送

　　An issue is seen more than {value} times in {interval} ：在固定时间内出现次数匹配的时候

　　An issue is seen by more than {value} users in {interval} ：在固定时间内出现用户的次数匹配的时候

　　An event's {attribute} value {match} {value} ： 匹配到某一个事件的时候

　　An event's level is {match} {level} ： 事件级别匹配的时候

 

 

 

 

sentry 生产的 sourcemap 配置 

 

　　介绍

 

　　如今开发不少时候，咱们的代码都会利用构建工具对代码合并、压缩、混淆等。

　　在产生这些生产代码的时候，为了利于咱们开发调试、bug修复会产生一个 sourcemap 。

　　sourecmap 的主要做用就是将咱们的打包的代码先后最了一个关联。

　　这里，sentry 对生产的 sourcemap 有很好的处理，它能够很快的让咱们肯定代码的错误位置。

 

　　准备工做

 

　　首先咱们须要添加 sentry 的命令行的管理工具 sentry-cli

npm i -g @sentry/cli
// 上面的不行就用下面的
npm install -g @sentry/cli --unsafe-perm

　　

　　获取认证的 token 

 

　　选择API后就能够生成token，记得勾选 project:write 权限。

　　这里的 token 是用于登录的。

　　

　　登录

 

sentry-cli --url myserver  login

　　回车后输入上一步得到的 token 便可

　　

　　建立版本 

 

sentry-cli releases -o 组织 -p 项目 new release@1.1.0

　　-o : 组织，能够在咱们的 Organization Settings 中找到

　　-p : 项目名称 ， 能够在 projuct 中找到

　　release@1.1.0 : 发布的版本号，能够自定义，这个后须要在应用配置的时候传入

 

　配置 release 到应用　　　

Sentry.init({
  dsn: 'http://18ac34902da74aa29a4328879a58fb0d@localhost:9000/2',
  release: 'release@1.1.0',
});

　　

　　上传 sourcemap 文件

 

sentry-cli releases -o 组织 -p 项目 files release@1.1.0 upload-sourcemaps jspath文件所在目录 --url-prefix 线上资源URI

　　

　　-o , -p : 和上文同样

　　jspath : js 文件的位置

　　uri : js 文件相对于域名的位置

　　特殊说明 url-prefix

　　这里是必须传的，不传找不到 map 文件，例如：

　　你的 js 线上的地址为 ：https://test.com/static/js/test.js

　　这个时候 url-prefix 应该为 ： '~/static/js/'

   

    完成！！！！

 

　　配置文件，在命令行操做的时候，sentry 支持配置文件。

　　配置文件默认文命令的目录。

　　配置文件 .sentryclirc

[auth]
token=1a59c94sdfsdfs33b5588b27bd3628c98ff2837c054b4503be089ad623620527

[defaults]
url=http://localhost:9000
project=react-test
org=test

　　配置以后就不须要在输入项目名称和地址了。

 

 

总结步骤：

　　一、注册帐号 、建立项目 

　　 直接登录 sentry 官网，注册帐号，而且建立一个项目

 

　　二、在项目中配置 sentry 

Sentry.init({
  dsn: 'http://18ac34902da74aa29a4328879a58fb0d@localhost:9000/2',
  release: RELEASE_VERSION,
});

　　

　　三、打包时候上传 sourcemap 文件

 

　　四、配置邮件预警

 

 

http://www.javashuo.com/article/p-sdqnlqsl-cp.html 

   个人博客 ：  XiaoLong's Blog

   博客园小结巴巴： https://www.cnblogs.com/jiebba