Platform

Sentry integration

Integrate Sentry to monitor errors from a Supabase client

You can use Sentry to monitor errors thrown from a Supabase JavaScript client. Install the Supabase Sentry integration to get started.

The Sentry integration supports browser, Node, and edge environments.

Installation

Install the Sentry integration using your package manager:


_10
npm install @supabase/sentry-js-integration

Use

To use the Supabase Sentry integration, add it to your integrations list when initializing your Sentry client.

You can supply either the Supabase Client constructor or an already-initiated instance of a Supabase Client.


_14
import * as Sentry from '@sentry/browser'
_14
import { SupabaseClient } from '@supabase/supabase-js'
_14
import { SupabaseIntegration } from '@supabase/sentry-js-integration'
_14
_14
Sentry.init({
_14
dsn: SENTRY_DSN,
_14
integrations: [
_14
new SupabaseIntegration(SupabaseClient, {
_14
tracing: true,
_14
breadcrumbs: true,
_14
errors: true,
_14
}),
_14
],
_14
})

Deduplicating spans

If you're already monitoring HTTP errors in Sentry, for example with the Http, Fetch, or Undici integrations, you will get duplicate spans for Supabase calls. You can deduplicate the spans by skipping them in your other integration:


_45
import * as Sentry from '@sentry/browser'
_45
import { SupabaseClient } from '@supabase/supabase-js'
_45
import { SupabaseIntegration } from '@supabase/sentry-js-integration'
_45
_45
Sentry.init({
_45
dsn: SENTRY_DSN,
_45
integrations: [
_45
new SupabaseIntegration(SupabaseClient, {
_45
tracing: true,
_45
breadcrumbs: true,
_45
errors: true,
_45
}),
_45
_45
// @sentry/browser
_45
new Sentry.BrowserTracing({
_45
shouldCreateSpanForRequest: (url) => {
_45
return !url.startsWith(`${SUPABASE_URL}/rest`)
_45
},
_45
}),
_45
_45
// or @sentry/node
_45
new Sentry.Integrations.Http({
_45
tracing: {
_45
shouldCreateSpanForRequest: (url) => {
_45
return !url.startsWith(`${SUPABASE_URL}/rest`)
_45
},
_45
},
_45
}),
_45
_45
// or @sentry/node with Fetch support
_45
new Sentry.Integrations.Undici({
_45
shouldCreateSpanForRequest: (url) => {
_45
return !url.startsWith(`${SUPABASE_URL}/rest`)
_45
},
_45
}),
_45
_45
// or @sentry/WinterCGFetch for Next.js Middleware & Edge Functions
_45
new Sentry.Integrations.WinterCGFetch({
_45
breadcrumbs: true,
_45
shouldCreateSpanForRequest: (url) => {
_45
return !url.startsWith(`${SUPABASE_URL}/rest`)
_45
},
_45
}),
_45
],
_45
})

Example Next.js configuration

See this example for a setup with Next.js to cover browser, server, and edge environments. First, run through the Sentry Next.js wizard to generate the base Next.js configuration. Then add the Supabase Sentry Integration to all your Sentry.init calls with the appropriate filters.

sentry.client.config.ts

_37
import * as Sentry from '@sentry/nextjs'
_37
import { SupabaseClient } from '@supabase/supabase-js'
_37
import { SupabaseIntegration } from '@supabase/sentry-js-integration'
_37
_37
Sentry.init({
_37
dsn: SENTRY_DSN,
_37
// Adjust this value in production, or use tracesSampler for greater control
_37
tracesSampleRate: 1,
_37
_37
// Setting this option to true will print useful information to the console while you're setting up Sentry.
_37
debug: true,
_37
_37
replaysOnErrorSampleRate: 1.0,
_37
_37
// This sets the sample rate to be 10%. You may want this to be 100% while
_37
// in development and sample at a lower rate in production
_37
replaysSessionSampleRate: 0.1,
_37
_37
// You can remove this option if you're not planning to use the Sentry Session Replay feature:
_37
integrations: [
_37
Sentry.replayIntegration({
_37
// Additional Replay configuration goes in here, for example:
_37
maskAllText: true,
_37
blockAllMedia: true,
_37
}),
_37
new SupabaseIntegration(SupabaseClient, {
_37
tracing: true,
_37
breadcrumbs: true,
_37
errors: true,
_37
}),
_37
Sentry.browserTracingIntegration({
_37
shouldCreateSpanForRequest: (url) => {
_37
return !url.startsWith(`${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest`)
_37
},
_37
}),
_37
],
_37
})

Afterward build your application (npm run build) and start it locally (npm run start). You will now see the transactions being logged in the terminal when making supabase-js requests.