JavaScript

Sentry 通过在应用程序运行时使用 SDK 来捕获数据。

为了开始使用 Sentry JavaScript SDK,请将以下代码添加到应用程序的顶部,位于所有其他脚本之前:

Copied
<script
  src="https://js.sentry-cdn.com/examplePublicKey.min.js"
  crossorigin="anonymous"
></script>

无需重新部署应用程序即可完成集成。 加载器脚本文档 提供了更多关于如何使用的详细信息。

或者,您也可以通过包管理器安装 SDK:

Copied
npm install @sentry/browser --save

我们也支持通过 CDN 打包 进行安装。

如果您正在将 Sentry SDK 更新到最新版本,请查看我们的 迁移指南,以了解更多关于破坏性变更的信息。

如果您使用的是我们之前的浏览器 JavaScript SDK,在进一步通知之前,您可以访问 旧版 SDK 文档

配置应在应用程序生命周期的尽可能早阶段进行。

完成此操作后,Sentry 的 JavaScript SDK 将根据设置的采样率捕获所有未处理的异常、事务和会话重放。

请注意,配置会根据您安装 Sentry SDK 的方式略有不同。请确保根据您是通过 NPM、加载器脚本还是 CDN 安装的 Sentry SDK,按照正确的选项卡中的说明进行操作。

Copied
import * as Sentry from "@sentry/browser";

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: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
  ],

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for tracing.
  // We recommend adjusting this value in production
  // Learn more at
  // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
  tracesSampleRate: 1.0,

  // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],

  // Capture Replay for 10% of all sessions,
  // plus for 100% of sessions with an error
  // Learn more at
  // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

根据您项目的设置方式,Sentry 错误中的堆栈跟踪可能不会显示为您的实际代码。

要解决此问题,请将源映射上传到 Sentry。最简单的方法是使用 Sentry 向导:

Copied
npx @sentry/wizard@latest -i sourcemaps

向导将引导您完成以下步骤:

  • 登录 Sentry 并选择一个项目
  • 安装必要的 Sentry 包
  • 配置您的构建工具以生成和上传源映射
  • 配置您的 CI 以上传源映射

有关源映射的更多信息或更多上传选项,请参阅我们的 源映射文档

此代码片段包含一个有意的错误,因此您可以立即测试设置是否正常工作。

Copied
setTimeout(() => {
  throw new Error("Sentry Test Error");
});

从浏览器开发者工具(DevTools)触发的错误是沙盒化的,不会触发错误处理程序。请将代码片段直接放在您的代码中。

了解更多关于手动捕获错误或消息的信息,请参阅我们的使用文档

要查看和解决记录的错误,请登录 sentry.io 并选择您的项目。单击错误标题将打开一个页面,您可以在其中查看详细信息并将其标记为已解决。