2 篇博文 含有标签「sentry」

概览​

总共分三个步骤：

1. 通过飞书机器人助手设置 webhook 触发器，发起一个 HTTP 请求，触发群组机器人群内消息通知
2. 启动 sentry webhook 通知，并设置对应 webhook 地址为 飞书触发器的 webhook 地址
3. 设置 sentry alert 信息，开启消息通知到 webhook，因为 sentry 类型限制，默认设置下，同类型的预警 5 分钟内不通知，仅显 示在后台

创建飞书机器人指令​

设置并获取指令 webhook 地址（该 webhook 地址用于 sentry 后台 webhook 设置）​

{
  "event": {
    "exception": {
      "values": [
        {
          "stacktrace": {
            "frames": []
          }
        }
      ]
    },
    "type": "Error",
    "title": "Event Title",
    "user": {
      "data": {
        "time": "",
        "environment": ""
      }
    }
  },
  "level": "error",
  "project": "payssion-dashboard-frontend",
  "url": ""
}

{
  "msg_type": "post",
  "content": {
    "post": {
      "zh_cn": {
        "title": "event.user.data.time 【 project 】异常通知：",
        "content": [
          [
            {
              "tag": "text",
              "text": "【 event.type 】event.tile"
            }
          ],
          [
            {
              "tag": "text",
              "text": "event.exception.values[0].stacktrace.frames"
            }
          ],
          [
            {
              "tag": "text",
              "text": "【环境】："
            },
            {
              "tag": "text",
              "text": "event.user.data.environment"
            }
          ],
          [
            {
              "tag": "text",
              "text": "【操作】："
            },
            {
              "tag": "a",
              "text": "查看详情",
              "href": "url"
            }
          ]
        ]
      }
    }
  }
}

开始​

1. 注册 sentry

2. 点击 Qucik Start 快捷创建项目，选择项目对应的前端框架及项目所属的团队

3. 新建完毕根据 Configure SDK 指引，在项目中做引入

   • Install 安装依赖（React）

     # Using yarn
     yarn add @sentry/react
     
     # Using npm
     npm install --save @sentry/react
     

   • Configure

     import { createRoot } React from "react-dom/client";
     import React from "react";
     import * as Sentry from "@sentry/react";
     import App from "./App";
     
     Sentry.init({
       dsn: "https://******.ingest.sentry.io/******",
       integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()],
       // Performance Monitoring
       tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
       // Session Replay
       replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
       replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
     });
     
     const container = document.getElementById("app");
     const root = createRoot(container);
     root.render(<App />)
     

   • Verify（代码中手动创造一个 error）

     return <button onClick={() => methodDoesNotExist()}>Break the world</button>;
     

   • Next Steps

     • Source Maps: Learn how to enable readable stack traces in your Sentry errors.
     • React Features: Learn about our first class integration with the React framework.

数据上报​

前端常见方案​

1. 代码埋点：开发自行定义
2. 可视化埋点：第三方方案，通过配置，对 UI 通用类的元素进行设置
3. 无痕埋点：通过嵌入 SDK，来监控前端页面或者 http 请求的数据埋点

一般情况下，通过与后台约定好具体的数据格式，前端在埋点采集的时候自动转换成接口需要的数据格式进行本地存储，然后进行上报

react 项目接入​

Sentry 注册与配置​

注册账号​

点击该链接注册 sentry 账号

登录账号并创建项目​

• 新建项目

  • platform：REACT

  • ProjectName： xxxxxx-dashboard-frontend

获取项目 DSN （SENTRY_DSN）​

项目 >>> 设置 >>> 客户端密钥（DSN）

获取项目 ORG（SENTRY_ORG）​

头像 >>> 组织设置 >>> Organization Slug

SENTRY_RELEASE_VERSION：v1.0.1（源码版本号：可自行维护）​

生成 API_AUTH_TOKEN 定位线上源码（SENTRY_AUTH_TOKEN）​

获取以上 key 之后，可修改项目根目录下 .env 文件​

SENTRY_DSN='******'

SENTRY_AUTH_TOKEN='*********'

SENTRY_RELEASE_VERSION='v1.0.1'

SENTRY_ORG='payssion',

SENTRY_PROJECT='payssion-dashboard-frontend',

Sentry 配置 webhook 通知​