项目正常运行的保障，前端异常监控系统--Sentry

背景：项目上线之后怎么能保障正常运行，并且在出现问题的时候在第一时间找到错误，根据错误去解决，为客户提供有保障的服务呢？

Why Sentry

我们需要一个成熟的监控系统，Sentry 就是一个这样的工具。

Sentry – 正如其名「哨兵」，可以实时监控生产环境上的系统运行状态，一旦发生异常会第一时间把报错的路由路径、错误所在文件等详细信息以邮件形式通知我们，并且利用错误信息的堆栈跟踪快速定位到需要处理的问题。

选择 Sentry 作为前端监控系统，还因为下几点：

• 开源
• 对各种前端框架的友好支持 (Vue、React、Angular)
• 支持 SourceMap

准备工作

• docker下载安装

接下来我们就以docker为例在本地从零开始创建一个sentry服务

环境搭建

Sentry可以使用Python2.7搭建，也可以利用Docker直接部署，那么小编就直接利用自己的Python2.7环境进行搭建。

以下就是Sentry搭建的过程，请保证每一步的操作正确。

• 1.启动一个 Redis 容器

$ docker run -d --name sentry-redis redis

• 2.启动一个 Postgres 容器

$ docker run -d --name sentry-postgres -e POSTGRES_PASSWORD=secret -e POSTGRES_USER=sentry postgres

• 3.生成一个密钥，用于在后面所有sentry容器之间握手

$ docker run --rm sentry config generate-secret-key

• 4.连接Redis、Postgres和Sentry，运行后会自动执行初始化操作

$ docker run -it --rm -e SENTRY_SECRET_KEY='<secret-key>' --link sentry-postgres:postgres --link sentry-redis:redis sentry upgrade

初始化操作过程中需要创建本地用户，可以输出进行创建！！

• 5.启动 Sentry Server，同时添加端口映射。Sentry的端口为9000，可以使用 -p 9000:9000 参数，在启动后可以通过访问http://localhost:9000或http://host-ip:9000进入Sentry的web管理页面

$ docker run -d --name my-sentry -p 9000:9000 -e SENTRY_SECRET_KEY='<secret-key>' --link sentry-redis:redis --link sentry-postgres:postgres sentry

• 6.默认配置中需要Celery，因此启动一个Celery 主节点与执行节点(worker节点可按需多启几个)

$ docker run -d --name sentry-cron -e SENTRY_SECRET_KEY='<secret-key>' --link sentry-postgres:postgres --link sentry-redis:redis sentry run cron

$ $ docker run -d --name sentry-worker-1 -e SENTRY_SECRET_KEY='<secret-key>' --link sentry-postgres:postgres --link sentry-redis:redis sentry run worker

Sentry的使用

• 登录

  通过连接http://localhost:9000打开sentry管理页面，按照配置的邮箱和密码登录账户

  

• 根据数字提示，创建项目

  

• 完成上步操作后，需要前端项目进行配置，用来达到错误上报的目的

  • 首先进行安装

  $ yarn add @sentry/browser
  $ yarn add @sentry/integrations
  

  • 接下来，进行代码配置

  import Vue from 'vue'
  import * as Sentry from '@sentry/browser';
  import * as Integrations from '@sentry/integrations';
  
  Sentry.init({
    dsn: 'http://170d6b79e8d24984b73b3b2cf8834327@localhost:9000/1',
    integrations: [new Integrations.Vue({Vue, attachProps: true})],
  });
  

  • 报错查看

    Sentry统计的信息包含以下多点：

    • 报错统计次数活跃度
    • 浏览器版本、header等信息
    • 报错时间、文件、以及错误信息等
    • …

    
    这样我们就能通过可视化的页面分析更高效的解决用户的问题，给用户带来更优的体验。