遥测

Sentry 集成

集成 Sentry 监控 Supabase 客户端的错误

您可以使用 Sentry 来监控来自 Supabase JavaScript 客户端抛出的错误。安装 Supabase Sentry 集成 即可开始使用。

该 Sentry 集成支持浏览器、Node 和边缘环境。

安装

使用您的包管理器安装 Sentry 集成：

1
npm install @supabase/sentry-js-integration

使用方法

要使用 Supabase Sentry 集成，请在初始化 Sentry 客户端时将其添加到 integrations 列表中。

您可以提供 Supabase Client 的构造函数，也可以提供一个已经初始化的 Supabase Client 实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import * as Sentry from '@sentry/browser'import { SupabaseClient } from '@supabase/supabase-js'import { supabaseIntegration } from '@supabase/sentry-js-integration'Sentry.init({  dsn: SENTRY_DSN,  integrations: [    supabaseIntegration(SupabaseClient, Sentry, {      tracing: true,      breadcrumbs: true,      errors: true,    }),  ],})

所有可用的配置选项可以在我们的 supabase-community/sentry-integration-js 仓库中找到。

消除重复的 spans

如果您已经在 Sentry 中监控 HTTP 错误（例如使用 HTTP、Fetch 或 Undici 集成），您可能会为 Supabase 调用获取重复的 spans。您可以通过在其他集成中跳过这些调用来消除重复：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import * as Sentry from '@sentry/browser'import { SupabaseClient } from '@supabase/supabase-js'import { supabaseIntegration } from '@supabase/sentry-js-integration'Sentry.init({  dsn: SENTRY_DSN,  integrations: [    supabaseIntegration(SupabaseClient, Sentry, {      tracing: true,      breadcrumbs: true,      errors: true,    }),    // @sentry/browser    Sentry.browserTracingIntegration({      shouldCreateSpanForRequest: (url) => {        return !url.startsWith(`${SUPABASE_URL}/rest`)      },    }),    // 或 @sentry/node    Sentry.httpIntegration({      tracing: {        ignoreOutgoingRequests: (url) => {          return url.startsWith(`${SUPABASE_URL}/rest`)        },      },    }),    // 或 @sentry/node 支持 Fetch    Sentry.nativeNodeFetchIntegration({      ignoreOutgoingRequests: (url) => {        return url.startsWith(`${SUPABASE_URL}/rest`)      },    }),    // 或 @sentry/WinterCGFetch 用于 Next.js 中间件和边缘函数    Sentry.winterCGFetchIntegration({      breadcrumbs: true,      shouldCreateSpanForRequest: (url) => {        return !url.startsWith(`${SUPABASE_URL}/rest`)      },    }),  ],})

Next.js 配置示例

以下是一个覆盖浏览器、服务器和边缘环境的 Next.js 配置示例。首先，通过 Sentry Next.js 向导生成基础 Next.js 配置。然后使用适当的过滤器将 Supabase Sentry 集成添加到所有 Sentry.init 调用中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import * as Sentry from '@sentry/nextjs'import { SupabaseClient } from '@supabase/supabase-js'import { supabaseIntegration } from '@supabase/sentry-js-integration'Sentry.init({  dsn: SENTRY_DSN,  integrations: [    supabaseIntegration(SupabaseClient, Sentry, {      tracing: true,      breadcrumbs: true,      errors: true,    }),    Sentry.browserTracingIntegration({      shouldCreateSpanForRequest: (url) => {        return !url.startsWith(`${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest`)      },    }),  ],  // 生产环境中调整此值，或使用 tracesSampler 获得更精细的控制  tracesSampleRate: 1,  // 将此选项设为 true 会在设置 Sentry 时向控制台打印有用信息  debug: true,})

配置完成后，构建您的应用 (npm run build) 并在本地启动 (npm run start)。现在当您发起 supabase-js 请求时，可以在终端看到记录的事务日志。