跳到主要内容

第三方监控系统

Sentry​

官网：https://sentry.io

github: https://github.com/getsentry/self-hosted

Sentry是一个开源的错误监控和异常追踪工具，它提供了免费的基本服务，也提供了付费的高级服务

  • Sentry的错误监控原理是通过在前端和后端应用中插入客户端代码和SDK，捕获异常并收集错误信息，然后通过可视化界面展示错误信息
  • 可以私有化部署，安全
    • 可以自行在服务器上搭建
  • 错误信息及告警机制完善
  • 简单易上手，开发成本低
  • 监控错误视频记录功能：对于错误处理自动进行视频监控，看到用户操作的详细视频记录

原理​

  • 通过监听全局错误事件 window.onerror，捕获未被处理的 JavaScript 异常，并发送错误信息到Sentry服务器。

  • 错误信息收集：Sentry服务器接收到错误信息后，会将错误信息进行处理和收集，包括错误的类型、发生时间、堆栈轨迹、用户信息、环境信息等。

  • 错误信息分析：Sentry会对收集到的错误信息进行分析和归类，通过聚合相似错误，减少重复报告，帮助开发者更好地理解和定位问题。

使用步骤​

  • 1、注册账号
  • 2、创建项目
  • 3、配置项目，根据Sentry提供的文档，按照你的项目类型（前端或后端）选择对应的SDK，并将其集成到你的应用中
  • 4、初始化SDK
  • 5、错误监控：SDK初始化后，Sentry会自动捕获应用中的异常和错误

部署Sentry​

docker部署​

参考：

可通过容器化部署sentry

步骤​
  • 1、安装docker、docker-compose、git
  • 2、创建一个新的文件夹, 拉取sentry代码
bash
git clone https://github.com/getsentry/onpremise.git
  • 3、进入onpremise 目录 并且执行安装命令 【下载sentry仓库，运行install.sh】
bash
cd onpremise
./install.sh

  • 4、安装过程中会提示输入账号密码（超级管理员的）跟着设置即可

  • 5、安装成功之后，启动sentry

bash
docker-compose up -d
  • 6、运行成功后可以访问默认的地址 ip:9000端口地址

SourceMap 结合Sentry监控平台使用​

  • 上传 SourceMap 文件到 Sentry： 将生成的 SourceMap 文件上传到 Sentry 服务器。你可以使用 Sentry 提供的命令行工具 sentry-cli 或者 Sentry Web UI 来上传 SourceMap 文件。在 Sentry 控制台中，找到对应的项目，进入项目设置，选择 Source Maps，然后上传 SourceMap 文件

步骤

  • 1、项目根目录配置.sentryclirc

  • 2、通过@sentry/webpack-plugin上传sentry相关配置

  • 3、通过触发异常情况，在issues中查看source map 是否生效

    • 通过issue检查的时候 可以直接到具体位置

你是如何对接Sentry第三方异常监控平台落地？​

接入了Sentry监控平台，能够更快速地发现问题和解决问题，提升了用户体验

  • 需求分析，与团队和运维人员合作

    • 和运维沟通，访问Sentry的权限控制、配置等

  • 生产环境中，Sentry初始化SDK

  • 在打包的时候，上传sourceMap

    • vite插件 @sentry-vite-plugin
    • webpack插件 @sentry/webpack-plugin

@arms/js-sdk​

阿里云实时监控服务(ARMS)前端监控平台专注于 Web 端体验数据监控

  • 用于监控和管理前端应用的性能数据，包括页面加载时间、资源加载情况、错误日志等

使用​