前端接入Sentry监控

这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

第一步 安装依赖

# Using yarn
yarn add @sentry/browser @sentry/tracing
# Using npm
npm install --save @sentry/browser @sentry/tracing

第二步 配置

前端监控不应该是监控某一个单独的模块，应该监控整个项目，所以在入口文件比如main.js里引入进行配置

import * as Sentry from "@sentry/browser";
import { Integrations } from "@sentry/tracing";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",

  // Alternatively, use `process.env.npm_package_version` for a dynamic release version
  // if your build tool supports it.
  release: "my-project-name@2.3.12",
  integrations: [new Integrations.BrowserTracing()],

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
  
  maxValueLength: 999999999999999999999999999999999999999, // 单个值在被截断之前可以具有的最大字符数
});

PS:肯定有人疑惑上面的dsn都哪里来的，别着急，下面会讲到

第三步 服务端配置

1、登录sentry账号或新建账号
2、如果已有项目可以直接进入项目，如果没有则点击右上角新建项目

点开之后长这样

3、新建好项目后，进入项目，点击Settings,里面就有上面提到的DNS

第四步 核实

在项目里随便写个错误代码，然后再到sentry对应的项目里查看，就可以看到报错信息了。

以上就是sentry的基本配置。

---

我在实际应用中，通过captureMessage方法（类似埋点的功能,如下代码），发现返回的数据过长被截断了

Sentry.captureMessage(JSON.stringify({
    type: 'save',
    parms,
    res: res.data
  }));

后来查了资料发现，可以在接入的时候配置maxValueLength（单个值在被截断之前可以具有的最大字符数）参数，来控制字符串的长度（如第二步里的写法）。

官网地址：sentry.io