浏览器性能分析
使用 Sentry 的 JavaScript 性能分析集成收集和查看 JavaScript 程序的性能洞察。
浏览器性能分析目前处于测试阶段（beta）。测试功能仍在开发中，可能存在 bug。我们认识到这一点的讽刺性。
浏览器性能分析集成是基于 JS 自我性能分析 API 构建的，可能会在该规范进展并获得广泛采用后才脱离测试阶段。请参阅 平台状态。
请注意，由于性能分析 API 目前仅在 Chromium 中公开，因此收集到的性能分析数据仅包括该浏览器的用户群体。我们希望随着 API 的普及，其他浏览器也会实现这一功能。
通过 性能分析，Sentry 通过在各种环境中采样程序的调用栈来跟踪软件的性能。此功能收集代码的函数级信息，使您可以优化程序的性能。Sentry 的性能分析器捕获函数调用及其确切位置，对其进行聚合，并显示程序中最常见的代码路径。这突出了您可以优化的区域，以帮助提高代码性能和用户满意度。
在浏览器环境中，性能分析可以帮助您确定导致 UI 卡顿的原因，揭示为什么像交互到下次绘制 (INP) 这样的值表现不佳，或者为什么一个长时间任务阻止了浏览器重新绘制屏幕并导致帧丢失。所有这些信息都可以帮助您修复实际的性能问题，并为用户提供更流畅的用户体验。
要开始使用 JavaScript 浏览器性能分析，您需要：
- 安装
@sentry/nextjsSDK，最低版本 7.60.0 - 配置文档响应头以包含
Document-Policy: js-profiling - 配置 SDK 以使用
BrowserProfilingIntegration并设置profilesSampleRate
使用 yarn 或 npm 安装我们的 Next.js SDK，支持性能分析的最低版本为 7.60.0。
npm install @sentry/nextjs --save
为了让 JavaScript 浏览器性能分析器启动，文档响应头需要包含一个带有 js-profiling 值的 Document-Policy 头键。
In Next.js you can configure document response headers via the headers option in next.config.js:
next.config.mjsexport default withSentryConfig({
async headers() {
return [
{
source: "/:path*",
headers: [
{
key: "Document-Policy",
value: "js-profiling",
},
],
},
];
},
// ... other Next.js config options
});
配置应在应用程序生命周期的尽可能早阶段进行。完成此步骤后，Sentry 的 JavaScript SDK 将捕获所有未处理的异常和事务。
sentry.client.config.js|tsimport * as Sentry from "@sentry/nextjs";
Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
integrations: [
// Add browser profiling integration to the list of integrations
Sentry.browserProfilingIntegration(),
],
// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for tracing.
// We recommend adjusting this value in production
tracesSampleRate: 1.0,
// Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
// Set profilesSampleRate to 1.0 to profile every transaction.
// Since profilesSampleRate is relative to tracesSampleRate,
// the final profiling rate can be computed as tracesSampleRate * profilesSampleRate
// For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would
// result in 25% of transactions being profiled (0.5*0.5=0.25)
profilesSampleRate: 1.0,
});
Alternatively, instead of a profilesSampleRate your can also provide a profilesSampler function:
sentry.client.config.js|tsimport * as Sentry from "@sentry/nextjs";
Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
integrations: [
// Add browser profiling integration to the list of integrations
Sentry.browserTracingIntegration(),
Sentry.browserProfilingIntegration(),
],
tracesSampleRate: 1.0,
// This function will be called for every sampled span
// to determine if it should be profiled
profilesSampler: (samplingContext) => {
return 1.0;
},
});
Sentry 的 JavaScript 浏览器性能分析器提供了哪些 Chrome DevTools 没有的功能？
- 真实用户数据：Sentry 的 JavaScript 性能分析器在生产环境中运行并捕获真实用户的数据，展示实际的性能情况。而 DevTools 在本地运行，仅显示您机器上的运行情况。
- 采样率和采样周期：Sentry 以较低的采样率（100Hz）和较长的采样周期（10ms）运行，而 DevTools 的采样率为 1000Hz，采样周期为 1ms。
- 反混淆支持：Sentry 支持反混淆，确保代码中的所有函数名称正确无误。通常，运行 JavaScript 代码时会进行压缩，这意味着所有函数名称会被替换为机器生成的简写。
请注意，由于浏览器性能分析 API 目前仅在基于 Chromium 的浏览器中实现，因此使用 Sentry 的 JavaScript 浏览器性能分析器收集的性能分析数据会偏向于该类浏览器用户群体。如果您根据这些数据做出决策，这一点需要特别考虑。
我们希望随着 JavaScript 浏览器性能分析 API 的普及，其他浏览器也会实现这一功能。如果您发现浏览器性能分析功能有帮助，并希望看到它进一步普及，请考虑在官方 WICG 仓库中支持该规范。