API
Sign In
获取更多动态，关注公众号：黑客下午茶

Automatic Instrumentation

@sentry/tracing 包提供了一个 BrowserTracing 集成，以添加 automatic instrumentation 来监视浏览器应用程序的性能。

What Automatic Instrumentation Provides

BrowserTracing 集成为每个页面 load 和 navigation 事件创建一个新 transaction，并为在打开这些 transactions 时发生的每个 XMLHttpRequest 或 fetch 请求创建一个 child span。 进一步了解 traces, transactions, and spans。

Enable Automatic Instrumentation

要启用此自动跟踪，请在 SDK 配置选项中包含 BrowserTracing 集成。 （请注意，使用 ESM 模块时，主要的 @sentry/* import 必须先于 @sentry/tracing import。）

配置完成后，在 sentry.io 中查看 transactions 时，您将同时看到 pageload 和 navigation。

Copied
// If you're using one of our integration packages, like `@sentry/react` or `@sentry/angular`,
// substitute its name for `@sentry/browser` here
import * as Sentry from "@sentry/browser";
import { Integrations as TracingIntegrations } from "@sentry/tracing"; // Must import second

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

  integrations: [
    new Integrations.BrowserTracing({
      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
      // ... other options
    }),
  ],

  // We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0,
});

Configuration Options

您可以将许多不同的选项传递给 BrowserTracing 集成（作为 {optionName: value} 形式的对象），但是它具有合理的默认值。有关所有可能的选项，请参见 TypeDocs。

tracingOrigins

tracingOrigins 的默认值是 ['localhost', /^\//]。 JavaScript SDK 将 sentry-trace header 附加到其目标包含列表中的字符串或匹配列表中的正则表达式的所有传出的 XHR/fetch 请求。 如果您的前端向另一个域发出请求，则需要在其中添加它，以将 sentry-trace header 传播到后端服务，这是将 transactions 链接在一起作为单个跟踪的一部分所必需的。tracingOrigins 选项与整个请求 URL 匹配，而不仅仅是域。使用更严格的正则表达式来匹配 URL 的某些部分，可以确保请求不用不必要地附加 sentry-trace header。

例如：

  • 前端应用程序是从 example.com 提供的
  • 后端服务由 api.example.com 提供
  • 前端应用程序对后端进行 API 调用
  • 因此，该选项需要这样配置：new Integrations.BrowserTracing({tracingOrigins: ['api.example.com']})
  • 现在，向 api.example.com 发出的 XHR/fetch 请求将获得附加的 sentry-trace header
Copied
Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [
    new Integrations.BrowserTracing({
      tracingOrigins: ["localhost", "my-site-url.com"],
    }),
  ],

  // We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0,
});

您将需要配置您的 Web 服务器 CORS 以允许 sentry-trace header。该配置可能类似于 "Access-Control-Allow-Headers: sentry-trace"，但是该配置取决于您的设置。如果您不允许使用 sentry-trace header，则该请求可能会被阻止。

beforeNavigate

对于 pageload 和 navigation transactions，BrowserTracing 集成使用浏览器的 window.location API 生成 transaction 名称。要自定义 pageload 和 navigation transactions 的名称，您可以向 BrowserTracing 集成提供 beforeNavigate 选项。该选项允许您修改 transaction 名称以使其更通用，例如，名为 GET /users/12312012 和 GET /users/11212012 的 transactions 都可以重命名为 GET /users/:userid，以便他们可以在一起。

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

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [
    new Integrations.BrowserTracing({
      beforeNavigate: context => {
        return {
          ...context,
          // You could use your UI's routing library to find the matching
          // route template here. We don't have one right now, so do some basic
          // parameter replacements.
          name: location.pathname
            .replace(/\d+/g, "<digits>")
            .replace(/[a-f0-9]{32}/g, "<hash>"),
        };
      },
    }),
  ],

  // We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0,
});

shouldCreateSpanForRequest

此函数可用于过滤掉不需要的 spans，例如 XHR 的运行状况检查或类似的检查。 默认情况下，shouldCreateSpanForRequest 已经过滤掉了除了 tracingOrigins 中定义的内容以外的所有内容。

Copied
import * as Sentry from "@sentry/browser";
import { Integrations } from "@sentry/tracing";
Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [
    new Integrations.BrowserTracing({
      shouldCreateSpanForRequest: url => {
        // Do not create spans for outgoing requests to a `/health/` endpoint
        return !url.match(/\/health\/?$/);
      },
    }),
  ],

  // We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0,
});
You can edit this page on GitHub.
Package:
npm:@sentry/browser
Version:
6.0.2
Repository:
https://github.com/getsentry/sentry-javascript