私有化搭建Sentry前端异常监控系统

私有化搭建Sentry前端异常监控系统

为什么需要前端异常监控？

当web应用出现线上故障时，如果没有一套前端监控系统，通常需要用户的主动反馈才能感知到问题发生，有时候一些疑难杂症开发侧无法复现定位，这时候也需要知道用户的浏览器环境、用户操作链路等信息。如互联网上的一些日活较高的应用，异常监控系统是必备的基础设施，监控系统的重要性不言而喻。而社区鼎鼎有名的开源监控Sentry功能强大，不仅能够自动化收集错误信息，提供了页面录屏回放功能，异常告警能力，另外还有私有化部署的支持，同时它还支持各种开发语言以及框架

Sentry 的优势

• 开源，有免费版本
• 可以将服务部署自己的服务器，更安全
• 支持多语言，社区活跃
• 上手简单，接入成本低
• 错误追踪和状态流转方便
• 错误提醒，告警机制完善
• 页面录屏回放功能

Sentry私有化部署流程

官方提供安装方式是使用 Docker 和 Docker Compose 以及基于 bash 的安装和升级脚本，所以先安装docker和 docker-compose

环境要求

• Docker 19.03.6+
• Docker-Compose 1.24.1+
• 4 CPU Cores
• 8 GB RAM
• 20 GB Free Disk Space
• Python 3

安装docker

按照官方指引安装docker

 # 卸载旧版本的Docker（如果适用）：如果你已经安装了旧版本的Docker，首先应该卸载它们以避免冲突 
  sudo apt-get remove docker docker-engine docker.io containerd runc

 # 更新apt软件包索引
  sudo apt-get update

 #安装依赖包：安装用于HTTPS传输的软件包，以及添加Docker APT存储库所需的一些工具
 sudo apt-get install apt-transport-https ca-certificates curl software-properties-common
 
 # 添加Docker官方GPG密钥以验证下载的软件包
 curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
 sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

 # 更新apt软件包索引（再次）：由于添加了新的存储库，需要再次更新APT软件包索引
 sudo apt-get update

 # 安装Docker社区版（CE）
 sudo apt-get install docker-ce
 # 验证安装
 sudo docker --version

安装Sentry

  # 下载项目
  git clone  https://github.com/getsentry/self-hosted.git

  cd self-hosted

  # 执行官方安装脚本
  sudo ./install.sh
  # 启动
  docker-compose up -d

Sentry创建管理员账号

在安装完成后，可以通过命令行来创建初始化的账号，通过--superuser来区分是否管理员

docker-compose run --rm web createuser --email admin@example.com --password admin --superuser

配置ip访问配置和https访问环境

如果要使用ip+端口的形式访问，需要更改一下配置，在self-hosted目录下，找到sentry/config.yml这个文件，修改system.url-prefix为你需要访问的域名或者Ip

否则会遇到 CSRF 验证失败的错误

config.yml配置文件,修改配置文件后，需要重启docker-compose

# 这里配置为你的ip或者https域名 
system.url-prefix: http://xx.xx.x.xx:9000 

# 重启服务
  sudo docker-compose down
  sudo docker compose up -d

经过这些配置之后，Sentry服务已经是启动好了，如果你的服务器端口防火墙以及阿里云或腾讯云的安全组端口已经开放出来了9000端口，此时通过主机IP+9000端口是已经可以访问Sentry服务了

nginx代理服务器增加反向代理 （步骤1）

需要支持通过域名访问也可以访问到Sentry服务， 可以用nginx做网关， 增加一个代理规则代理到9000端口即可， https 需要自行配置

    listen 80;
    listen 443 ssl http2 ;
    server_name sentry.xxx.com; # 替换你的域名

   location ^~ /_static/ {
       proxy_pass http://127.0.0.1:9000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

   location / {
        proxy_pass http://127.0.0.1:9000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

DNS域名解析配置（步骤2）

笔者这里是使用的腾讯云域名，所以直接在腾讯云上配置域名的DNS解析即可，记录类型选A记录，上面我们nginx已经搭建好了转发服务。但访问sentry.xxx.com域名时， 会访问到配置的主机IP地址，nginx默认会监听上80接口，而我们的server_name上指定了域名。从dns到nginx到sentry,整个域名访问流程就配置好了

前端应用接入Sentry

通过完成以上步骤，访问sentry.xxx.com域名可以看到Sentry的登录页面，表示已经完成了Sentry的私有化搭建了，接下来就是前端应用的接入

前端代码接入

在前端应用接入之前，需要先在Sentry上创建一个React或者vue应用，然后通过提示进行接入即可,这部分代码在应用中接入后，Sentry就算是接入完成了，但项目中有js等异常错误抛出，Sentry会自动收集，在Sentry后台可以看到所有的列表，接下来对接一下飞书通知告警能力

  import * as Sentry from '@sentry/react'

  Sentry.init({
      dsn: 'https://23234b527ace8761903453dbcac4433daa6b4e4@sentry.xxx.com/2',
      integrations: [
        Sentry.browserTracingIntegration(),
        Sentry.replayIntegration(),
      ],
      environment: env,
      tracesSampleRate: 1.0,        
      replaysSessionSampleRate: 0.1, 
      replaysOnErrorSampleRate: 1.0,
    })

飞书机器人告警接入

需要在飞书上先创建一个群聊，然后在群管理里面，创建一个群机器人，在成功创建机器人后，机器人会有分配一个web hook的地址，但是这个地址还不能直接使用，因为Sentry的web hook接口消息格式，并没有适配飞书机器人消息模版，这个时候我们可以利用飞书提供的飞书机器人助手，创建一个机器人指令来进行数据格式的转换，使其Sentry的消息格式可以在群聊中正常展示.流程大致就是这样，在这里推荐另外一篇Sentry接入飞书的文章，这边文章通过图文的形式，很详细的介绍了Sentry如何接入飞书机器人

借助飞书捷径，我快速完成了 Sentry 上报异常的自动推送