10分钟快速在Mac中搭建前端异常监控系统-前端-CSS教程

sentry有什么用

Sentry 是一个开源的实时错误跟踪和日志聚合平台，主要用于监控和管理软件应用程序中的错误、异常和性能问题。其核心功能包括：

错误捕获与通知：通过集成Sentry提供的各种语言和框架的SDK（如Python、JavaScript、PHP、Ruby、Java等），当应用程序发生错误时，能够自动捕获详细的异常信息，并将其发送到Sentry服务端。
实时分析：Sentry服务端接收并处理这些错误数据，对其进行整理、聚类和分析，以便快速识别重复的异常、追踪首次出现的时间、影响的用户数以及错误发生的上下文环境（如堆栈跟踪、变量值、设备信息等）。
可视化管理界面：提供了一个直观的Web界面，开发团队可以通过该界面浏览和筛选错误报告，定位代码问题的具体位置，便于快速诊断和修复。
协作与集成：Sentry支持与其他开发工具和服务集成，比如GitHub、GitLab、Jira、Slack等，使得团队成员可以在现有的工作流程中无缝地处理错误警报和跟进任务。
灵活的通知机制：可以根据设定的规则触发邮件或其他形式的通知，确保关键问题得到及时关注。

简而言之，Sentry的主要作用在于提升开发团队对线上错误的响应速度和效率，通过自动化的方式简化错误检测和处理过程，从而改善用户体验并保障软件质量。

在Mac中搭建sentry

准备工作

自 2020 年 12 月 4 日起，Sentry 默认使用 Python 3。 Sentry 21.1.0 之后的版本不在支持 Python2。

Python 3
Docker
Sentry

下载安装docker

从官网下载：https://www.docker.***/get-started

安装完成后，设置一下镜像源：

点击顶部任务栏的 Docker 图标，选择 Preferences…

{
  "builder": {
    "gc": {
      "defaultKeepStorage": "20GB",
      "enabled": true
    }
  },
  "debug": true,
  "experimental": false,
  "registry-mirrors": [
    "https://registry.***-hangzhou.aliyuncs.***"
  ]
}

安装Sentry（官方提供部署在docker上的方法）

从github上克隆项目

git clone https://github.***/getsentry/self-hosted.git

克隆完后进入到该目录，使用以下命令安装：

./install.sh

在安装的过程中会去检查版本是否是最新的，以及在终端会询问“是否创建用户”

跳过版本检查：--skip-***mit-check
跳过“是否创建用户的提示”：--no-user-prompt

安装过程可能遇到的错误

1、错误./install/_lib.sh: line 19: realpath: ***mand not found

解决方法：安装完coreutils再执行./install.sh

brew install coreutils

2、错误FAIL: The CPU your machine is running on does not support the SSE 4.2 instruction set, which is required for one of the services Sentry uses (Clickhouse).

失败：机器运行的CPU不支持SSE 4.2指令集，这是Sentry使用的一项服务（Clickhouse）所必需的。

由于SSE指令集是Intel推出的，所以在m1芯片上无法使用。。。
解决方法：换一台电脑来安装

3、Unable to connect to deb.debian.org

出现无法连接的时候，换个网络
https://stackoverflow.***/questions/62480272/running-apt-get-install-within-docker-container-unable-to-connect-to-deb-debia

坑：如果翻墙会导致某些ip无法请求到，所以在安装的时候翻墙报错之后，再重新不翻墙安装一次

安装完成，启动服务

当看到下图表示已经全部完成了，执行 docker-***pose up -d 命令。

webpack自动上传source-map

webpack.config.js 文件配置


// 使用sentry/webpack-plugin插件
const SentryWebpackPlugin = require('@sentry/webpack-plugin')

// 获取package.json的版本信息
const packageInfo = require('./package.json')

new SentryWebpackPlugin({
    include: './dist',
    configFile: 'sentry.properties', // 默认不用改
    release: packageInfo.version, // 版本号
    ignore: ['node_modules', 'webpack.config.js'], // 忽略文件
    urlPrefix: '~/inficloud/inficloud-workbench-ui/dist/js/', // 天坑，这个主意看下面的解释
}),

urlPrefix这个属性需要填什么，举个例子：

我资源的路径是：http://localhost:8070/inficloud/inficloud-workbench-ui/dist/js/xxxx.js

urlPrefix就需要填'~/inficloud/inficloud-workbench-ui/dist/js/'

否则会出现source map上传成功，但是无法定位到对应源码的位置的情况

在项目根目录创建：.sentryclirc 文件,配置如下：

[auth]
token=d3e0c96cd92c498ba6c849e2fd92d6145f679e75c14740d7ae4e3317e22dc7d6
[defaults]
url = http://localhost:9000
org=sentry // 组织名称
project=workbench-local // 项目名称

获取token:

获取org：

获取项目名称：

项目入口：release填入对应版本号

Sentry.init({
    Vue,
    dsn: 'http://16dedd78b95c44dc830be6002bb53b4e@localhost:9000/2',
    integrations: [
        new Integrations.BrowserTracing({
            release: INFICLOUD_VERSION,
            routingInstrumentation: Sentry.vueRouterInstrumentation(router),
            tracingOrigins: ['localhost', 'my-site-url.***', /^\//],
        }),
    ],
    tracesSampleRate: 1.0,
})

开启警报发现异常时，发送邮箱通知

添加警报规则

用户个人通知设置

高级用法

手动上报错误信息

除了自动上报，还可以通过Sentry.captureMessage 手动进行上报:

Sentry.captureMessage("手动上报错误")

额外信息上报

当前 Sentry 除了上报错误信息之外，还包括一些基本的浏览器信息和系统信息，除此之外，还可以额外自定义一些信息进行上报。提供这一能力的称为 Scope。其可以包含 user、tags、level、fingerprint、extra data 等丰富信息，分别通过 scope.setUser、scope.setTags 、scope.setLevel、scope.setFingerprint、scope.setExra调用。

我们可以将用户的相关信息进行上报，将上报的错误与用户关联起来，当用户遇到线上故障的时候，我们就能够在 Sentry 后台利用用户的 ID 来搜索得到用户遇到了哪些错误。具体调用例子：

// 设置用户信息：
scope.setUser({
    id: userInfo.id,
    nickname: userInfo.nickname,
    username: userInfo.username,
    email: userInfo.email,
    isInternal: userInfo.isInternal,
    isInnerOrganization: userInfo.isInnerOrganization,
});
// 给事件定义标签：
scope.setTags({ ‘api’, ‘api/ list / get’})
// 设置事件的严重性：
scope.setLevel(‘error’)
// 设置事件的分组规则：
scope.setFingerprint(['{{ default }}', url])
// 设置附加数据：
scope.setExtra(‘data’, { request: { a: 1, b: 2 })

创建 scope 有两种方式：

全局 scope:应用的所有的错误都被关联到当前 scope 信息
局部 scope:应用于局部的错误

全局 scope 通过Sentry.configureScope 创建：

Sentry.configureScope(function (scope) {
  scope.setTag("my-tag", "my value");
  scope.setUser({
    id: 42,
    email: "john.doe@example.***",
  });
});

局部 scope 通过 Sentry.withScope 创建：

局部scope可以用来给特定的错误打标签，用来分类等，比如：订单错误，订单错误都打了这个标签后，可以在后台看到这个标签的所有错误。

这个操作会拷贝一个全局的副本，局部的会覆盖全局的，直到函数调用完成。需要主动抛出异常。

Sentry.withScope(function (scope) {
  scope.setTag("my-tag", "my value");
  scope.setLevel("warning");
  // will be tagged with my-tag="my value"
  Sentry.captureException(new Error("my error"));
});

// will not be tagged with my-tag
Sentry.captureException(new Error("my other error"));

环境区分

Sentry.init({
    Vue,
    dsn: "http://05cbc6d7939f488d92***f94201feef0d@192.168.2.103:9000/2",
    environment: 'local', // 本地环境
    tracesSampleRate: 1.0,
})

环境管理界面：

前端 sentry 测试工具

转载请说明出处内容投诉
CSS教程_站长资源网 » 10分钟快速在Mac中搭建前端异常监控系统

东亚

分享到：