Supabase Sentry JS Integration

https://github.com/supabase-community/sentry-integration-js
Admin
A Sentry JavaScript SDK integration designed to instrument the Supabase JavaScript SDK, collecting...
Tokens:10,834
Snippets:46
Trust Score:9.7
License:MIT
Update:11 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies and Run Tests (Development)

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/README.md

Shell commands to set up the development environment for the Sentry integration. This includes installing all necessary npm packages, linting the code, and running unit tests.

```shell
npm install
npm run lint
npm run test
```

--------------------------------

### Install Dependencies and Run Types Tests for SDK v8

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/README.md

Shell commands to test the integration with SDK v8. This involves navigating to the specific test directory, installing its dependencies, and executing the tests.

```shell
cd tests-types/v8
npm install
npm run test
```

--------------------------------

### Install Dependencies and Run Types Tests for SDK v7

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/README.md

Shell commands to test the integration with SDK v7. Similar to SDK v8 testing, this requires navigating to the correct directory, installing packages, and running tests.

```shell
cd tests-types/v7
npm install
npm run test
```

--------------------------------

### Initialize Sentry with Supabase Integration (Node.js/Browser)

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/README.md

Initializes the Sentry SDK and integrates it with a Supabase client instance created using `createClient`. This setup enables tracing, breadcrumbs, and error capturing for Supabase operations and is suitable for both Node.js and browser environments.

```javascript
import * as Sentry from "@sentry/browser";
import { createClient } from "@supabase/supabase-js";
import { supabaseIntegration } from "@supabase/sentry-js-integration";

const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY);

Sentry.init({
  dsn: SENTRY_DSN,
  integrations: [
    supabaseIntegration(supabaseClient, Sentry, {
      tracing: true,
      breadcrumbs: true,
      errors: true,
    }),
  ],
});
```

--------------------------------

### Install @supabase/sentry-js-integration

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/README-v7.md

Install the Supabase Sentry integration package using npm. This is the first step to integrate Sentry with Supabase in your JavaScript project.

```sh
npm install @supabase/sentry-js-integration
```

--------------------------------

### Initialize Sentry with Supabase Integration (Browser)

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/README-v7.md

Initialize the Sentry SDK in a browser environment and include the Supabase integration. This setup enables tracing, breadcrumbs, and error tracking for Supabase operations.

```javascript
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: [
    new SupabaseIntegration(SupabaseClient, {
      tracing: true,
      breadcrumbs: true,
      errors: true,
    }),
  ],
});
```

--------------------------------

### Initialize Sentry with Supabase Integration (Browser)

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/README.md

Initializes the Sentry SDK in a browser environment and integrates it with the Supabase JavaScript SDK. This setup enables tracing, breadcrumbs, and error capturing for Supabase operations. It requires Sentry DSN and Supabase Client instance.

```javascript
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,
    }),
  ],
});
```

--------------------------------

### Configure Sentry SDK

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/README-v7.md

Initializes the Sentry SDK with your DSN. Ensure the DSN is kept secret and not exposed in client-side code. This setup is crucial for sending errors and transactions to Sentry.

```javascript
import * as Sentry from "@sentry/node";

Sentry.init({
  dsn: "YOUR_SENTRY_DSN",
  integrations: [
    // Your integrations here
  ],
  // Performance Monitoring
  tracesSampleRate: 1.0, // Capture 100% of transactions, reduce in production
  // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring.
  // We recommend adjusting this value in production.
  
  // Session Replay
  replaysSessionSampleRate: 0.1, // This configures Sentry to capture 10% of replay sessions,
  // This configures Sentry to capture 10% of replay sessions, and for those sessions,
  // we will capture 100% of the events within them.
  replaysOnErrorSampleRate: 1.0, // If you wish to attach a replay to a non-error event,
  // If you wish to attach a replay to a non-error event, uncomment the
  // following line and set a more appropriate value like 0.5.
  // replaysOnErrorSampleRate: 0.1,
});
```

--------------------------------

### Next.js Client Configuration: Filter Supabase Spans

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/README.md

Example configuration for Next.js client-side Sentry setup. It integrates the Supabase Sentry plugin and configures `browserTracingIntegration` to ignore outgoing requests to the Supabase REST API, preventing duplicate spans.

```typescript
import * as Sentry from "@sentry/nextjs";
import { SupabaseClient } from "@supabase/supabase-js";
import { supabaseIntegration } from "@supabase/sentry-js-integration";

Sentry.init({
  dsn: SENTRY_DSN,
  // Adjust this value in production, or use tracesSampler for greater control
  tracesSampleRate: 1,

  // Setting this option to true will print useful information to the console while you're setting up Sentry.
  debug: true,

  replaysOnErrorSampleRate: 1.0,

  // This sets the sample rate to be 10%. You may want this to be 100% while
  // in development and sample at a lower rate in production
  replaysSessionSampleRate: 0.1,

  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
  integrations: [
    Sentry.replayIntegration({
      // Additional Replay configuration goes in here, for example:
      maskAllText: true,
      blockAllMedia: true,
    }),
    supabaseIntegration(SupabaseClient, Sentry, {
      tracing: true,
      breadcrumbs: true,
      errors: true,
    }),
    Sentry.browserTracingIntegration({
      shouldCreateSpanForRequest: (url) => {
        return !url.startsWith(`${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest`);
      },
    }),
  ],
});
```

--------------------------------

### Next.js Server Configuration: Filter Supabase Spans

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/README.md

Example configuration for Next.js server-side Sentry setup. It integrates the Supabase Sentry plugin and configures `nativeNodeFetchIntegration` to ignore outgoing requests to the Supabase REST API, preventing duplicate spans.

```typescript
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.nativeNodeFetchIntegration({
      ignoreOutgoingRequests: (url) => {
        console.log(
          "server",
          `${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest`,
          url
        );
        return url.startsWith(`${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest`);
      },
    }),
  ],

  // Adjust this value in production, or use tracesSampler for greater control
  tracesSampleRate: 1,

  // Setting this option to true will print useful information to the console while you're setting up Sentry.
  debug: true,
});
```

--------------------------------

### Next.js Client Configuration for Supabase Sentry Integration

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/README-v7.md

Integrate Supabase Sentry integration into a Next.js client-side configuration. This example shows how to initialize Sentry, include the Supabase integration, and filter browser tracing spans for Supabase REST URLs using environment variables.

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

Sentry.init({
  dsn: SENTRY_DSN,
  // Adjust this value in production, or use tracesSampler for greater control
  tracesSampleRate: 1,

  // Setting this option to true will print useful information to the console while you're setting up Sentry.
  debug: true,

  replaysOnErrorSampleRate: 1.0,

  // This sets the sample rate to be 10%. You may want this to be 100% while
  // in development and sample at a lower rate in production
  replaysSessionSampleRate: 0.1,

  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
  integrations: [
    Sentry.replayIntegration({
      // Additional Replay configuration goes in here, for example:
      maskAllText: true,
      blockAllMedia: true,
    }),
    new SupabaseIntegration(SupabaseClient, Sentry, {
      tracing: true,
      breadcrumbs: true,
      errors: true,
    }),
    new Sentry.BrowserTracing({
      shouldCreateSpanForRequest: (url) => {
        return !url.startsWith(`${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest`);
      },
    }),
  ],
});
```

--------------------------------

### Initialize Sentry with Supabase Integration (JavaScript)

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/example/index-v7.html

Initializes the Sentry SDK with the Supabase integration. This setup requires Sentry DSN, Supabase client, and configuration for tracing, breadcrumbs, and errors. The `beforeSend` and `beforeSendTransaction` hooks can be used for custom event handling.

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

const supabaseClient = createClient(
  "https://ktrpkblcwnulhtgpcrbp.supabase.co",
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imt0cnBrYmxjd251bGh0Z3BjcmJwIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDY3ODk0OTAsImV4cCI6MjAyMjM2NTQ5MH0.CXEvu4tYFRXtwYvMFllhAwyu1NsyUmaqhgxfHFhzOHA"
);

Sentry.init({
  dsn: "https://dsn@sentry.io/1337",
  tracesSampleRate: 1.0,
  integrations: [
    Sentry.browserTracingIntegration(),
    new SupabaseIntegration(supabaseClient, {
      tracing: true,
      breadcrumbs: true,
      errors: true,
    }),
  ],
  beforeSend(event) {
    console.log("Captured exception:\n", event);
    return null; // Do not send captured exception
  },
  beforeSendTransaction(event) {
    console.log("Captured transaction:\n", event);
    return null; // Do not send transaction
  },
});
```

--------------------------------

### Next.js Edge Configuration: Filter Supabase Spans

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/README.md

Example configuration for Next.js edge runtime Sentry setup. It integrates the Supabase Sentry plugin and configures `winterCGFetchIntegration` to filter outgoing requests to the Supabase REST API, preventing duplicate spans.

```typescript
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.winterCGFetchIntegration({
      breadcrumbs: true,
      shouldCreateSpanForRequest: (url) => {
        return !url.startsWith(`${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest`);
      },
    }),
  ],
  // Adjust this value in production, or use tracesSampler for greater control
  tracesSampleRate: 1,

  // Setting this option to true will print useful information to the console while you're setting up Sentry.
  debug: true,
});
```

--------------------------------

### Next.js Server Configuration for Supabase Sentry Integration

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/README-v7.md

Configure Sentry for a Next.js server environment, including the Supabase integration and Undici tracing. This example filters out Supabase REST requests to prevent duplicate spans and utilizes environment variables for the Supabase URL.

```typescript
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: [
    new SupabaseIntegration(SupabaseClient, Sentry, {
      tracing: true,
      breadcrumbs: true,
      errors: true,
    }),
    new Sentry.Integrations.Undici({
      shouldCreateSpanForRequest: (url) => {
        console.log(
          "server",
          `${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest`,
          url
        );
        return !url.startsWith(`${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest`);
      },
    }),
  ],

  // Adjust this value in production, or use tracesSampler for greater control
  tracesSampleRate: 1,

  // Setting this option to true will print useful information to the console while you're setting up Sentry.
  debug: true,
});
```

--------------------------------

### Register Sentry Configuration for Node.js or Edge Runtime

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/README.md

This TypeScript code dynamically imports the appropriate Sentry configuration based on the Next.js runtime environment (Node.js or Edge). It ensures that the correct Sentry setup is applied for server-side or edge functions.

```typescript
export async function register() {
  if (process.env.NEXT_RUNTIME === "nodejs") {
    await import("./sentry.server.config");
  }

  if (process.env.NEXT_RUNTIME === "edge") {
    await import("./sentry.edge.config");
  }
}
```

--------------------------------

### Initialize Sentry with Supabase Integration (Client Instance)

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/README-v7.md

Initialize the Sentry SDK and the Supabase integration using an existing Supabase client instance. This allows for instrumenting Supabase calls with tracing, breadcrumbs, and error reporting.

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

const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY);

Sentry.init({
  dsn: SENTRY_DSN,
  integrations: [
    new SupabaseIntegration(supabaseClient, {
      tracing: true,
      breadcrumbs: true,
      errors: true,
    }),
  ],
});
```

--------------------------------

### Initialize Supabase Integration for Sentry v7 Browser

Source: https://context7.com/supabase-community/sentry-integration-js/llms.txt

Initializes the Sentry SDK with the Supabase integration for v7 using a class-based approach. This enables automatic instrumentation of Supabase client operations for tracing, breadcrumbs, and error capturing. It requires the SupabaseClient constructor or instance and configuration options.

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

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [
    new SupabaseIntegration(SupabaseClient, {
      tracing: true,
      breadcrumbs: true,
      errors: true,
    }),
  ],
  tracesSampleRate: 1.0,
});

const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);

// INSERT operation captured with op "db.insert"
const { data, error } = await supabase
  .from("posts")
  .insert({ title: "Hello World", content: "My first post" });

// Creates breadcrumb:
// - type: "supabase"
// - category: "db.insert"
// - message: "from(posts)"
// - data.body: { title: "Hello World", content: "My first post" }

```

--------------------------------

### Initialize Supabase Integration for Sentry v8 Browser

Source: https://context7.com/supabase-community/sentry-integration-js/llms.txt

Initializes the Sentry SDK with the Supabase integration for v8. This automatically instruments Supabase client operations for tracing, breadcrumbs, and error capturing. It requires the SupabaseClient constructor or instance and the Sentry namespace. Configuration options control which features are enabled.

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

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [
    supabaseIntegration(SupabaseClient, Sentry, {
      tracing: true,
      breadcrumbs: true,
      errors: true,
      operations: ["select", "insert", "update", "delete", "upsert"],
    }),
  ],
  tracesSampleRate: 1.0,
});

// Now all Supabase operations are automatically instrumented
const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);

// This query creates a span named "from(users)" with op "db.select"
const { data, error } = await supabase
  .from("users")
  .select("id, name, email")
  .eq("status", "active")
  .limit(10);

// Span includes attributes:
// - db.table: "users"
// - db.query: ["select(id, name, email)", "eq(status, active)", "limit(10)"]
// - http.response.status_code: 200

```

--------------------------------

### Publishing Commands for npm Package

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/README.md

Shell commands used for publishing a new version of the npm package. This includes versioning the package, pushing tags to Git, and publishing to the npm registry.

```shell
# Add new files to package.json#files if applicable
npm version <patch|minor|major>
git push --follow-tags
npm publish
```

--------------------------------

### Instrument Existing Supabase Client Instance with Sentry

Source: https://context7.com/supabase-community/sentry-integration-js/llms.txt

Instrument an already-created Supabase client instance instead of the constructor. This is useful when you need to configure the client before instrumentation or when working with dependency injection patterns. It requires the Supabase client instance, Sentry SDK, and configuration options for tracing, breadcrumbs, and errors.

```javascript
import { createClient } from "@supabase/supabase-js";
import { supabaseIntegration } from "@supabase/sentry-js-integration";

// Create client with custom configuration
const supabaseClient = createClient(
  process.env.SUPABASE_URL,
  process.env.SUPABASE_ANON_KEY,
  {
    auth: {
      persistSession: true,
      autoRefreshToken: true,
    },
    db: {
      schema: "public",
    },
    global: {
      headers: {
        "x-application-name": "my-app",
      },
    },
  }
);

// Initialize Sentry with the pre-configured client instance
Sentry.init({
  dsn: SENTRY_DSN,
  integrations: [
    // Pass the instance instead of the constructor
    supabaseIntegration(supabaseClient, Sentry, {
      tracing: true,
      breadcrumbs: true,
      errors: true,
    }),
  ],
});

// Now use the client normally - it's automatically instrumented
const { data: user } = await supabaseClient.auth.getUser();
const { data: posts } = await supabaseClient
  .from("posts")
  .select("*")
  .eq("user_id", user.id);

```

--------------------------------

### Initialize Sentry with Supabase Integration (JavaScript)

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/example/index-v8.html

Initializes the Sentry SDK with the Supabase integration. It requires Sentry DSN, trace sample rate, and Supabase client configuration. The integration enhances error tracking and breadcrumb capturing for Supabase operations.

```javascript
import * as Sentry from "@sentry/browser";
import { createClient } from "@supabase/supabase-js";
import { supabaseIntegration } from "@supabase/sentry-js-integration";

const supabaseClient = createClient(
  "https://ktrpkblcwnulhtgpcrbp.supabase.co",
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imt0cnBrYmxjd251bGh0Z3BjcmJwIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDY3ODk0OTAsImV4cCI6MjAyMjM2NTQ5MH0.CXEvu4tYFRXtwYvMFllhAwyu1NsyUmaqhgxfHFhzOHA"
);

Sentry.init({
  dsn: "https://dsn@sentry.io/1337",
  tracesSampleRate: 1.0,
  integrations: [
    Sentry.browserTracingIntegration(),
    supabaseIntegration(supabaseClient, Sentry, {
      tracing: true,
      breadcrumbs: true,
      errors: true,
    }),
  ],
  beforeSend(event) {
    console.log("Captured exception:\n", event);
    return null; // Do not send captured exception
  },
  beforeSendTransaction(event) {
    console.log("Captured transaction:\n", event);
    return null; // Do not send transaction
  },
});
```

--------------------------------

### Next.js Client-Side Sentry Configuration

Source: https://context7.com/supabase-community/sentry-integration-js/llms.txt

Configures Sentry for Next.js client-side applications, enabling Supabase integration and filtering HTTP traces to avoid duplicates. It uses Supabase's `supabaseIntegration` and Next.js's `browserTracingIntegration` to manage tracing.

```javascript
// sentry.client.config.ts
import * as Sentry from "@sentry/nextjs";
import { SupabaseClient } from "@supabase/supabase-js";
import { supabaseIntegration } from "@supabase/sentry-js-integration";

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,

  integrations: [
    // Enable session replay for debugging
    Sentry.replayIntegration({
      maskAllText: true,
      blockAllMedia: true,
    }),

    // Add Supabase instrumentation
    supabaseIntegration(SupabaseClient, Sentry, {
      tracing: true,
      breadcrumbs: true,
      errors: true,
    }),

    // Configure browser tracing to skip Supabase REST endpoints
    Sentry.browserTracingIntegration({
      shouldCreateSpanForRequest: (url) => {
        // Let supabaseIntegration handle Supabase API calls
        return !url.startsWith(`${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest`);
      },
    }),
  ],

  tracesSampleRate: 1.0,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});
```

--------------------------------

### Next.js Server-Side Sentry Configuration

Source: https://context7.com/supabase-community/sentry-integration-js/llms.txt

Sets up Sentry for Next.js server-side components and API routes, integrating Supabase and filtering Node fetch requests. This prevents duplicate spans by excluding Supabase REST endpoints from generic HTTP instrumentation.

```javascript
// sentry.server.config.ts
import * as Sentry from "@sentry/nextjs";
import { SupabaseClient } from "@supabase/supabase-js";
import { supabaseIntegration } from "@supabase/sentry-js-integration";

Sentry.init({
  dsn: process.env.SENTRY_DSN,

  integrations: [
    // Add Supabase instrumentation
    supabaseIntegration(SupabaseClient, Sentry, {
      tracing: true,
      breadcrumbs: true,
      errors: true,
    }),

    // Configure native fetch integration to skip Supabase endpoints
    Sentry.nativeNodeFetchIntegration({
      ignoreOutgoingRequests: (url) => {
        // Let supabaseIntegration handle Supabase API calls
        return url.startsWith(`${process.env.SUPABASE_URL}/rest`);
      },
    }),
  ],

  tracesSampleRate: 1.0,

  // Configure context lines for better error reporting
  beforeSend(event) {
    return event;
  },
});

// Example API route with automatic tracing
// app/api/users/route.ts
export async function GET() {
  const supabase = createClient(
    process.env.SUPABASE_URL!,
    process.env.SUPABASE_SERVICE_KEY!
  );

  // Automatically creates span "from(users)" with op "db.select"
  const { data, error } = await supabase.from("users").select("*");

  if (error) {
    // If errors: true, this non-throwable error is captured
    return Response.json({ error: error.message }, { status: 500 });
  }

  return Response.json({ users: data });
}
```

--------------------------------

### Fetch Data from Supabase and Log Response (JavaScript)

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/example/index-v8.html

Fetches data from a 'jokes' table in Supabase using the configured client. It logs both the data and any potential errors to the console. This snippet demonstrates a successful Supabase query within the Sentry integration context.

```javascript
const { data, error } = await supabaseClient.from("jokes").select("*");
console.log("jokes response:");
console.log({ data });
console.log({ error });
```

--------------------------------

### Sentry Error Capturing Configuration for Supabase

Source: https://context7.com/supabase-community/sentry-integration-js/llms.txt

Enables capturing non-throwable errors from Supabase queries in Sentry. This configuration allows recording issues like data or query problems that don't crash the application, providing detailed context in Sentry exceptions.

```javascript
import { supabaseIntegration } from "@supabase/sentry-js-integration";

Sentry.init({
  dsn: SENTRY_DSN,
  integrations: [
    supabaseIntegration(SupabaseClient, Sentry, {
      tracing: true,
      breadcrumbs: true,
      errors: true, // Enable error capturing
    }),
  ],
});

const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);

// This query will fail due to missing column
const { data, error } = await supabase
  .from("users")
  .select("id, name, nonexistent_column")
  .eq("status", "active");

// If error exists, it's captured in Sentry as exception:
// {
//   message: "column users.nonexistent_column does not exist",
//   code: "42703",
//   contexts: {
//     supabase: {
//       query: ["select(id, name, nonexistent_column)", "eq(status, active)"]
//     }
//   }
// }

// Application continues running - error doesn't throw
if (error) {
  console.error("Query failed:", error.message);
  // Handle error gracefully
}
```

--------------------------------

### Supabase Database Operations Coverage with Sentry Integration

Source: https://context7.com/supabase-community/sentry-integration-js/llms.txt

The integration automatically captures all five core Supabase database operations (SELECT, INSERT, UPSERT, UPDATE, DELETE) with detailed query information, HTTP status codes, and response data. Each operation type generates spans with specific attributes and breadcrumbs, providing comprehensive observability for database interactions.

```javascript
import { supabaseIntegration } from "@supabase/sentry-js-integration";

Sentry.init({
  dsn: SENTRY_DSN,
  integrations: [
    supabaseIntegration(SupabaseClient, Sentry, {
      tracing: true,
      breadcrumbs: true,
      errors: true,
    }),
  ],
});

const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);

// 1. SELECT - GET request, op: "db.select"
await supabase
  .from("products")
  .select("id, name, price")
  .gte("price", 100)
  .order("price", { ascending: false })
  .limit(20);
// Span: name="from(products)", query=["select(id, name, price)", "gte(price, 100)", "order(price)", "limit(20)"]

// 2. INSERT - POST request, op: "db.insert"
await supabase
  .from("products")
  .insert([
    { name: "Widget", price: 29.99, stock: 100 },
    { name: "Gadget", price: 49.99, stock: 50 },
  ]);
// Span: name="from(products)", body=[{name: "Widget", ...}, {name: "Gadget", ...}]

// 3. UPSERT - POST with Prefer header, op: "db.upsert"
await supabase
  .from("products")
  .upsert({ id: 1, name: "Updated Widget", price: 34.99 })
  .select();
// Span: name="from(products)", body={id: 1, name: "Updated Widget", ...}

// 4. UPDATE - PATCH request, op: "db.update"
await supabase
  .from("products")
  .update({ stock: 0 })
  .eq("discontinued", true);
// Span: name="from(products)", body={stock: 0}, query=["eq(discontinued, true)"]

// 5. DELETE - DELETE request, op: "db.delete"
await supabase
  .from("products")
  .delete()
  .lt("created_at", "2020-01-01");
// Span: name="from(products)", query=["lt(created_at, 2020-01-01)"]

// All operations include:
// - db.table: table name
// - db.schema: schema name
// - db.url: Supabase project URL
// - http.response.status_code: HTTP status

```

--------------------------------

### Next.js Edge Configuration for Supabase Sentry Integration

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/README-v7.md

Set up Sentry for a Next.js Edge environment, incorporating the Supabase integration and WinterCGFetch. This configuration filters Supabase REST requests to avoid duplicate spans and uses environment variables for the Supabase URL.

```typescript
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: [
    new SupabaseIntegration(SupabaseClient, Sentry, {
      tracing: true,
      breadcrumbs: true,
      errors: true,
    }),
    new Sentry.Integrations.WinterCGFetch({
      breadcrumbs: true,
      shouldCreateSpanForRequest: (url) => {
        return !url.startsWith(`${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest`);
      },
    }),
  ],
  // Adjust this value in production, or use tracesSampler for greater control
  tracesSampleRate: 1,

  // Setting this option to true will print useful information to the console while you're setting up Sentry.

```

--------------------------------

### Fetch Data from Unknown Table and Log (JavaScript)

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/example/index-v7.html

Attempts to fetch data from a non-existent 'unknown-table' in Supabase, which is expected to result in an error. The response data and error are logged to the console. This also demonstrates Sentry's error capturing capabilities.

```javascript
{ 
  const { data, error } = await supabaseClient
    .from("unknown-table")
    .select("*");
  console.log("unknown-table response:");
  console.log({ data });
  console.log({ error });
}
```

--------------------------------

### Fetch Data from Supabase and Log (JavaScript)

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/example/index-v7.html

Fetches data from the 'jokes' table using the Supabase client and logs the response data and any errors to the console. This operation can be traced and have breadcrumbs recorded if Sentry integration is configured with `tracing: true` and `breadcrumbs: true`.

```javascript
{
  const { data, error } = await supabaseClient.from("jokes").select("*");
  console.log("jokes response:");
  console.log({ data });
  console.log({ error });
}
```

--------------------------------

### Attempt to Fetch from Non-existent Supabase Table (JavaScript)

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/example/index-v8.html

Attempts to fetch data from a non-existent 'unknown-table' in Supabase. This is intended to demonstrate error capturing by Sentry. The response logs will show the error object returned by Supabase.

```javascript
const { data, error } = await supabaseClient
  .from("unknown-table")
  .select("*");
console.log("unknown-table response:");
console.log({ data });
console.log({ error });
```

--------------------------------

### Selective Operation Instrumentation in Supabase Integration

Source: https://context7.com/supabase-community/sentry-integration-js/llms.txt

Configures the Supabase integration to selectively monitor specific database operations by using the 'operations' array. This helps reduce noise and Sentry quota consumption by instrumenting only the desired operation types.

```javascript
import { supabaseIntegration } from "@supabase/sentry-js-integration";

Sentry.init({
  dsn: SENTRY_DSN,
  integrations: [
    supabaseIntegration(SupabaseClient, Sentry, {
      tracing: true,
      breadcrumbs: true,
      // Only instrument reads and writes, ignore updates and deletes
      operations: ["select", "insert"],
    }),
  ],
});

const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);

// This SELECT is instrumented - creates span and breadcrumb
await supabase.from("products").select("*").eq("category", "electronics");

// This UPDATE is NOT instrumented - no span or breadcrumb created
await supabase.from("products").update({ stock: 0 }).eq("id", 42);

// This INSERT is instrumented
await supabase.from("products").insert({ name: "New Product", stock: 100 });

// This DELETE is NOT instrumented
await supabase.from("products").delete().eq("id", 42);

```

--------------------------------

### Customize Span Creation with shouldCreateSpan in JavaScript

Source: https://context7.com/supabase-community/sentry-integration-js/llms.txt

Dynamically control the creation of Sentry spans based on request payload inspection. The `shouldCreateSpan` callback function receives the full payload and returns a boolean to determine if a span should be created. This allows for fine-grained filtering by URL path, table name, or any other request property.

```javascript
import { supabaseIntegration } from "@supabase/sentry-js-integration";

Sentry.init({
  dsn: SENTRY_DSN,
  integrations: [
    supabaseIntegration(SupabaseClient, Sentry, {
      tracing: true,
      shouldCreateSpan: (payload) => {
        // Skip internal and health check tables
        if (payload.url.pathname.includes("_internal")) {
          return false;
        }
        if (payload.url.pathname.includes("health_check")) {
          return false;
        }
        // Skip specific schemas
        if (payload.schema === "private") {
          return false;
        }
        // Only trace slow operations (example condition)
        return true;
      },
    }),
  ],
});

const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);

// This query to public.users IS traced
await supabase.from("users").select("*");

// This query to _internal_logs is NOT traced (filtered out)
await supabase.from("_internal_logs").select("*");

// This query to private schema is NOT traced (filtered out)
await supabase.schema("private").from("secrets").select("*");

```

--------------------------------

### Manually Capture Exception with Sentry (JavaScript)

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/example/index-v7.html

Manually captures a new Error object using `Sentry.captureException()`. This is useful for logging specific errors that might not be automatically caught by the SDK, such as simulated errors for testing purposes.

```javascript
Sentry.captureException(new Error("show me the money"));
```

--------------------------------

### Customize Breadcrumb Creation with shouldCreateBreadcrumb in JavaScript

Source: https://context7.com/supabase-community/sentry-integration-js/llms.txt

Independently control the creation of Sentry breadcrumbs using payload-based filtering. This enables different filtering logic for tracing versus activity logging, useful for detailed spans with minimal breadcrumbs. The `shouldCreateBreadcrumb` callback receives the payload and returns a boolean.

```javascript
import { supabaseIntegration } from "@supabase/sentry-js-integration";

Sentry.init({
  dsn: SENTRY_DSN,
  integrations: [
    supabaseIntegration(SupabaseClient, Sentry, {
      breadcrumbs: true,
      shouldCreateBreadcrumb: (payload) => {
        // Only log write operations in breadcrumbs
        const method = payload.method;
        if (method === "POST" || method === "PATCH" || method === "DELETE") {
          return true;
        }
        // Skip all SELECT queries to reduce breadcrumb noise
        return false;
      },
    }),
  ],
});

const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);

// This SELECT does NOT create a breadcrumb (filtered)
await supabase.from("users").select("*");

// This INSERT creates a breadcrumb
await supabase.from("audit_log").insert({
  action: "user_login",
  timestamp: new Date(),
});

// This UPDATE creates a breadcrumb
await supabase.from("users").update({ last_seen: new Date() }).eq("id", 1);

// This DELETE creates a breadcrumb
await supabase.from("sessions").delete().lt("expires_at", new Date());

```

--------------------------------

### Sanitize Sensitive Data with sanitizeBody in JavaScript

Source: https://context7.com/supabase-community/sentry-integration-js/llms.txt

Sanitize sensitive data before sending it to Sentry using a custom callback function. The `sanitizeBody` callback transforms field values based on table and key names, ensuring PII and credentials are not captured while retaining useful debugging information.

```javascript
import { supabaseIntegration } from "@supabase/sentry-js-integration";

Sentry.init({
  dsn: SENTRY_DSN,
  integrations: [
    supabaseIntegration(SupabaseClient, Sentry, {
      tracing: true,
      breadcrumbs: true,
      sanitizeBody: (table, key, value) => {
        // Redact all password fields
        if (key === "password" || key === "password_hash") {
          return "[REDACTED]";
        }

        // Redact email and phone in users table
        if (table === "users" && (key === "email" || key === "phone")) {
          return "[REDACTED]";
        }

        // Redact credit card numbers
        if (key === "credit_card" || key === "cc_number") {
          return "[REDACTED]";
        }

        // Redact API keys and tokens
        if (key.includes("token") || key.includes("api_key")) {
          return "[REDACTED]";
        }

        // Return original value for non-sensitive fields
        return value;
      },
    }),
  ],
});

const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);

// Original insert with sensitive data
await supabase.from("users").insert({
  name: "John Doe",
  email: "john@example.com",
  password: "secretpassword123",
  phone: "+1234567890",
});

// Captured in Sentry as:
// {
//   name: "John Doe",
//   email: "[REDACTED]",
//   password: "[REDACTED]",
//   phone: "[REDACTED]"
// }

```

--------------------------------

### Filter Duplicate Spans with Sentry Browser Tracing

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/README.md

This configuration snippet shows how to use the `shouldCreateSpanForRequest` option within Sentry's `browserTracingIntegration` to exclude Supabase REST API calls. This prevents duplicate spans when the `supabaseIntegration` is also active.

```javascript
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`);
      },
    }),

    // or @sentry/node
    Sentry.httpIntegration({
      tracing: {
        ignoreOutgoingRequests: (url) => {
          return url.startsWith(`${SUPABASE_URL}/rest`);
        },
      },
    }),

    // or @sentry/node with Fetch support
    Sentry.nativeNodeFetchIntegration({
      ignoreOutgoingRequests: (url) => {
        return url.startsWith(`${SUPABASE_URL}/rest`);
      },
    }),

    // or @sentry/WinterCGFetch for Next.js Middleware & Edge Functions
    Sentry.winterCGFetchIntegration({
      breadcrumbs: true,
      shouldCreateSpanForRequest: (url) => {
        return !url.startsWith(`${SUPABASE_URL}/rest`);
      },
    }),
  ],
});
```

--------------------------------

### Filter Supabase Spans in Sentry Browser Tracing

Source: https://github.com/supabase-community/sentry-integration-js/blob/master/README-v7.md

Configure Sentry's BrowserTracing integration to exclude spans for Supabase REST endpoints. This prevents duplicate tracing when the SupabaseIntegration is also active. It relies on the Sentry browser SDK and the Supabase Sentry integration.

```javascript
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: [
    new SupabaseIntegration(SupabaseClient, Sentry, {
      tracing: true,
      breadcrumbs: true,
      errors: true,
    }),

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

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

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

    // or @sentry/WinterCGFetch for Next.js Middleware & Edge Functions
    new Sentry.Integrations.WinterCGFetch({
      breadcrumbs: true,
      shouldCreateSpanForRequest: (url) => {
        return !url.startsWith(`${SUPABASE_URL}/rest`);
      },
    }),
  ],
});
```
Tokens:
Raw