1 篇博文 含有标签「方案调研」

开始​

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 通知​