@supabase/sentry-js-integration

Sentry JavaScript SDK Integration that can be used to instrument Supabase JavaScript SDK and collect traces, breadcrumbs and errors.

See Showcase section for detailed screenshots of what is captured.

Install

npm install @supabase/sentry-js-integration

Usage

import * as Sentry from "@sentry/browser";
import { SupabaseClient } from "@supabase/supabase-js";
import { SupabaseIntegration } from "@supabase/sentry-js-integration";

Sentry.init({
  dsn: "https://[e-mail]/1337",
  integrations: [
    new SupabaseIntegration(SupabaseClient, {
      tracing: true,
      breadcrumbs: true,
      errors: true,
    }),
  ],
});

Options

• tracing: boolean - Enable tracing instrumentation for database calls (defaults to true)
• breadcrumbs: boolean - Enable capturing breadcrumbs for database calls (defaults to true)
• errors: boolean - Enable capturing non-throwable database errors as Sentry exceptions (defaults to false)
• operations: "select" | insert" | "upsert" | "update" | "delete" - Configures which methods should be instrumented for the features above (defaults to all operations)
• shouldCreateSpan: (payload) => boolean - Decide whether a span should be created based on the query payload used to capture this data
• shouldCreateBreadcrumb: (payload) => boolean - Decide whether a breadcrumb should be created based on the query payload used to capture this data
• sanitizeBody: (table, key, value) => value - Allows for modifying captured body values that are passed to insert/upsert/update operations, before assigned to a span, breadcrumb, or `error

Removing duplicated http/fetch spans

If you are using built-in Http, Fetch or Undici integrations in your current Sentry setup, you might want to skip some of the spans that will be already covered by SupabaseIntegration. Here's a quick snippet how to do that:

// @sentry/browser
new Sentry.BrowserTracing({
  shouldCreateSpanForRequest: (url) => {
    return !url.startsWith(SUPABASE_URL);
  },
});

// or @sentry/node
new Sentry.Integrations.Http({
  tracing: {
    shouldCreateSpanForRequest: (url) => {
      return !url.startsWith(SUPABASE_URL);
    },
  },
});

// or @sentry/node with Fetch support
new Sentry.Integrations.Undici({
  shouldCreateSpanForRequest: (url) => {
    return !url.startsWith(SUPABASE_URL);
  },
});

Showcase

(click to enlarge image)

Server-side Traces

Client-side Traces

Capturing Non-throwable Errors

Breadcrumbs

Payload Sanitization