Skip to content

使用 Sentry 监控你的 Astro 网站

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

¥Sentry offers a comprehensive application monitoring and error tracking service designed to help developers identify, diagnose, and resolve issues in real-time.

在我们的博客上阅读有关 Astro 与 Sentry 的合作关系 和 Sentry 的 Spotlight 开发工具栏应用的更多信息，该应用为你的 Astro 开发环境带来了丰富的调试覆盖。Spotlight 在本地开发期间直接在你的浏览器中显示错误、跟踪和重要上下文。

¥Read more on our blog about Astro’s partnership with Sentry and Sentry’s Spotlight dev toolbar app that brings a rich debug overlay into your Astro development environment. Spotlight shows errors, traces, and important context right in your browser during local development.

Sentry 的 Astro SDK 可自动报告 Astro 应用中的错误和跟踪数据。

¥Sentry’s Astro SDK enables automatic reporting of errors and tracing data in your Astro application.

项目配置

Section titled 项目配置

¥Project Configuration

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

¥A full list of prerequisites can be found in the Sentry guide for Astro.

安装

Section titled 安装

¥Install

Sentry 使用应用运行时中的 SDK 捕获数据。

¥Sentry captures data by using an SDK within your application’s runtime.

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

¥Install the SDK by running the following command for the package manager of your choice in the Astro CLI:

Terminal window
npx astro add @sentry/astro

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

¥The astro CLI installs the SDK package and adds the Sentry integration to your astro.config.mjs file.

配置

Section titled 配置

¥Configure

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

¥To configure the Sentry integration, you need to provide the following credentials in your astro.config.mjs file.

  1. 客户端密钥 (DSN) - 你可以在 Sentry 项目设置的 Client keys (DSN) 下找到 DSN。
  2. 项目名称 - 你可以在 Sentry 项目设置的 General settings 下找到项目名称。
  3. 身份验证令牌 - 你可以在 Sentry 组织设置的 Auth tokens 下创建 auth token。
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。

¥Once you’ve configured your sourceMapsUploadOptions and added your dsn, the SDK will automatically capture and send errors and performance events to Sentry.

测试你的设置

Section titled 测试你的设置

¥Test your setup

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

¥Add the following <button> element to one of your .astro pages. This will allow you to manually trigger an error so you can test the error reporting process.

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

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

¥To view and resolve the recorded error, log into sentry.io and open your project.

More backend service guides

Astro 中文网 - 粤ICP备13048890号