前端错误监控警报系统Sentry(哨兵)私有化部署手札

1.What —— sentry 是什么

它是一个前端错误监控警报系统。

对于一个前端应用,即使经过开发自测——>前端团队内部评审——>测试团队测试后,仍然无法完全避免线上出现的错误,比如网络请求错误、前端逻辑异常等。

sentry 可以监控前端应用的线上运行,当用户在使用应用的过程中遇到应用报错时(有时页面可能没反应,但报错会在控制台出现),它可以及时将错误信息上报给sentry的服务端程序,服务端程序可以通过开发者自定义的方式(比如,邮件、钉钉等)及时向开发者报警,并给出详细的错误信息。

当然,它还有其它一些丰富的报表功能,以及与常用的工作流工具的协作(比如JIRA、git、jekins)等。

2. How—— 如何部署

尽管 sentry官方提供了可以在线使用的服务,但官方服务具有很多限制,有些服务则需要付费使用:

image-20210830161721635

好消息是,sentry是一个开源软件,如果自己部署的话,就可以使用它的完整功能了。接下来,记录一下部署过程。

2.1 服务器环境配置

要私有化部署sentry,需要一台自己的服务器,对于服务器的要求有:

  • 安装了Git
  • 安装了 docker,版本号大于19.03.6
  • 安装了docker-compose,版本号大于1.28.0
  • 最好是 4 核 CPU 和 8GB RAM
  • 磁盘剩余空间不得小于20GB。

如果windows10系统,可以

  • 安装docker-desktop,到这里下载
  • 安装 windows terminal,直接在win0应用商城搜索安装
  • 配置电脑BIOS,开启虚拟化。(根据不同电脑机型自行百度解决)
  • 配置开启Hyper-v

然后运行docker-desktop,打开windows Terminal,输入wsl,进行windowslinux子系统进行操作。

2.2 从 github 克隆sentry自部署仓库:

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

2.3 进行自动部署(需要系统用户root权限)

$ cd onpremise

$ ./install.sh

脚本会自动根据仓库中的配置来下载所有需要的服务的镜像,并构建为docker容器应用。下载的过程根据网速不同可能耗时不同,有时时间会比较长,需要耐心等待。

如果服务器网络环境不好,尤其是与githubdocker镜像仓库的连接状态不太好的时候,可能会执行失败,可以在网络情况好的时候重试几次。

在安装过程中,终端会询问你,让你设置一个sentry 后台的管理员账号和密码。

2.4 启动docker 集群

下载安装成功后,还是在安装的目录,启动docker服务集群:

$ docker compose up -d

这个过程中,有些服务可能会启动不成功,很大可能是权限问题,可以根据报错信息,自行百度解决。

2.5 访问sentry后台

所有服务都启动成功后,就可以访问sentry后台了,后台默认运行在服务器的9000端口,这里的账户密码就是安装时让你设置的那个。

image-20210830163337632

登录后,就可以看到setry的管理后台了:

image-20210830163521962

默认是英文界面,可以在设置里改为中文。

3. Where —— 哪里监控

后台是我们查看应用已经发出的错误报警和相关信息的地方,那么,我们在哪里进行监控呢。我们以vue项目为例,演示一下如何接入监控。

3.1 在后台新建项目

  1. 在项目后台【项目】面板创建项目

image-20210830164026991

  1. 选择项目的平台类型,我们这里选择Vue,填写项目名称,项目所属团队,就可以创建项目了。

image-20210830164152845

  1. 选择平台,生成对应配置方案

    image-20210830164343039

    image-20210830164413314

然后就生成了对应类型项目的配置方法和配置代码。

3.2 在自己的项目中粘贴配置代码

进入自己的项目,找到入口文件,一般为main.js,将上一步生成的配置方案中给出的配置代码粘贴到自己的入口文件中:

image-20210830164705350

image-20210830164735223

这样就完成了。

3.3 查看错误报错信息

运行自己的项目应用,当应用在访问出现报错时,sentry后台就可以收到应用上报的报警信息了:

image-20210830164916377

上图中,红框框住的就是当应用请求服务器失败时(500)上报的错误,如果有多个相同的报错,这里只会显示一个,而在后面事件一列列出重复报错的次数。

点击该报错信息,可以进入错误信息详情:

image-20210830165302509

image-20210830165245311

这里有用户的IP、浏览器版本、系统类型、错误跟踪栈等丰富的可以帮助开发者排查错误的信息。

4. Who—— 通知到人

当出现报警信息时,我们最终的目的是第一时间通知到开发人员,由开发人员根据报错信息及时修复问题。

有两种通知方式。

4.1 邮件通知

邮件通知可以通知到每个开发者个人(当然,也可以同时给所有人发邮件),并且通过sentry后台,配置详细的通知策略,比如遇到哪种问题才通知,同样的错误多久通知一次,程序指定模块报错通知哪个开发人员等等。

这里只介绍下如何配置邮件通知功能。

默认情况下,是无法正常通知的,需要我们对服务器上的sentry配置进行修改。

进入到服务器的sentry安装目录,找到sentry/config.yml文件,找到Mail Server部分,配置邮件发送服务的信息:

###############
# Mail Server #
###############

mail.backend: 'smtp'  # Use dummy if you want to disable email entirely
mail.host: 'smtp.qq.com'
mail.port: 25
mail.username: '391655435@qq.com'
mail.password: 'xxxxxxxxxxxxxx'
mail.use-tls: false
# The email address to send on behalf of
mail.from: '391655435@qq.com'

然后在安装目录下重启docker集群

$ docker-compose restart

然后进入sentry后台,进行测试:

image-20210830171026348

image-20210830171101817

配置没有错的话,管理员的邮箱里就能够收到一封测试邮件了

image-20210830171245569

然后就可以在项目的【警报】面板去配置具体的通知策略了。

image-20210830171754767

4.2 钉钉通知

sentry后台收到报警信息时,还可以将报警信息发送到钉钉群里。

  1. 在要介绍的群里新建【webhook】类型的机器人助手,新建后拿到webhook地址中的access_token值。
  2. sentry后台的【设置】面板中的【integrations】列表里找到DingDing插件,点击为指定项目进行配置:

image-20210830172228687

image-20210830172429743

image-20210830172357855

填入第1步获取到的access_token,保存后即可。

在应用报错后,对应钉钉群就会接收到相应的报警信息:

image-20210830172559171

点击【详细信息】按钮即可进入sentry后台的报错信息详细页面。

如何安装钉钉插件

默认情况下,sentry后台【设置】面板的【integrations】列表里是没有【钉钉】插件的,需要我们在服务器上进行配置安装。

// 安装目录:vi sentry/Dockerfile
//  添加
RUN pip install sentry-10-dingding

// cd /usr/src/sentry  如果没有,新建
// vi requirements.txt 如果没有,新建
// 添加
redis-py-cluster==1.3.4

// 安装目录,重新构建
docker-compose down
docker-compose build
docker-compose up -d
  • 3
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Sentry是一个前端监控工具,用于捕获和报告前端应用程序中的错误和性能问题。在React项目中使用Sentry,可以通过在入口文件index.ts中初始化Sentry来开始监控。\[1\]初始化Sentry的代码示例如下: ```javascript import * as Sentry from "@sentry/react"; import { BrowserTracing } from "@sentry/tracing"; Sentry.init({ dsn: "https://[email protected].sentry.io/121", integrations: \[new BrowserTracing()\], release: '0.0.1', tracesSampleRate: 1.0, }); ``` 除了捕获错误Sentry还可以收集页面性能方面的数据。通过在Sentry.init()中添加`new Integrations.BrowserTracing()`,可以将浏览器页面加载和导航检测作为事务,并捕获请求和其他性能指标。\[2\] Sentry是一个由各种语言的SDK和数据后台服务组成的系统。通过Sentry SDK的配置,可以上报与错误关联的版本信息和发布环境。Sentry SDK还会自动捕获异常发生前的相关操作,以便后续的异常追踪。异常数据上报到数据服务后,会通过过滤、关键信息提取和归纳展示在数据后台的Web界面中。\[3\] Sentry的功能架构如下图所示。 #### 引用[.reference_title] - *1* *2* *3* [基于Sentry前端性能监控平台搭建与应用](https://blog.csdn.net/xiangzhihong8/article/details/128798778)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值