跳转到内容

使用 Sentry 监控你的 Astro 网站

Sentry 提供全面的应用程序监控和错误跟踪服务，旨在帮助开发人员实时识别、诊断和解决问题。

在我们的博客上阅读更多关于 Astro 与 Sentry 的合作关系以及 Sentry 的 Spotlight 开发工具栏应用程序，它为你的 Astro 开发环境带来了一个丰富的调试覆盖层。Spotlight 会在本地开发期间直接在浏览器中显示错误、追踪和重要上下文。

Sentry 的 Astro SDK 能够在你的 Astro 应用程序中自动报告错误和追踪数据。

项目配置

“项目配置”部分

完整的先决条件列表可以在 Astro 的 Sentry 指南中找到。

安装

“安装”部分

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

通过在 Astro CLI 中为你选择的包管理器运行以下命令来安装 SDK

终端窗口
npx astro add @sentry/astro

Astro CLI 会安装 SDK 包，并将 Sentry 集成添加到你的 astro.config.mjs 文件中。

配置

“配置”部分

要配置 Sentry 集成，你需要在你的 astro.config.mjs 文件中提供以下凭据。

  1. 客户端密钥 (DSN) - 你可以在 Sentry 项目设置的 客户端密钥 (DSN) 下找到 DSN。
  2. 项目名称 - 你可以在 Sentry 项目设置的 常规设置 下找到项目名称。
  3. 认证令牌 (Auth token) - 你可以在 Sentry 组织设置的 认证令牌 下创建认证令牌。
astro.config.mjs
import { defineConfig } from 'astro/config';
import sentry from '@sentry/astro';


export default defineConfig({
  integrations: [
    sentry({
      dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
      sourceMapsUploadOptions: {
        project: 'example-project',
        authToken: process.env.SENTRY_AUTH_TOKEN,
      },
    }),
  ],
});

一旦你配置了 sourceMapsUploadOptions 并添加了你的 dsn，SDK 将自动捕获错误和性能事件并将其发送到 Sentry。

测试你的设置

“测试你的设置”部分

将以下 <button> 元素添加到一个你的 .astro 页面中。这将允许你手动触发一个错误，以便测试错误报告过程。

src/pages/index.astro
<button onclick="throw new Error('This is a test error')">Throw test error</button>

要查看并解决记录的错误，请登录 sentry.io 并打开你的项目。

更多后端服务指南

贡献 社区 赞助