Improved API, better types, updated readme, screenshots

README.md

@@ -1,18 +1,24 @@
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="supabase-wordmark--dark.svg">
-  <source media="(prefers-color-scheme: light)" srcset="supabase-wordmark--light.svg">
-  <img alt="Supabase logo" src="supabase-wordmark--dark.svg" width="256">
-</picture>
-
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="sentry-wordmark--dark.svg">
-  <source media="(prefers-color-scheme: light)" srcset="sentry-wordmark--light.svg">
-  <img alt="Sentry logo" src="sentry-wordmark--dark.svg" width="256">
-</picture>
+<br/>
+
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="logos/supabase-wordmark--dark.svg">
+    <source media="(prefers-color-scheme: light)" srcset="logos/supabase-wordmark--light.svg">
+    <img alt="Supabase logo" src="logos/supabase-wordmark--dark.svg" width="320">
+  </picture>
+  <br />
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="logos/sentry-wordmark--dark.svg">
+    <source media="(prefers-color-scheme: light)" srcset="logos/sentry-wordmark--light.svg">
+    <img alt="Sentry logo" src="logos/sentry-wordmark--dark.svg" width="256">
+  </picture>
+</p>
 
 # @supabase/sentry-js-integration
 
-Sentry JavaScript SDK Integration that can be used to instrument Supabase JavaScript SDK instrumentation.
+Sentry JavaScript SDK Integration that can be used to instrument Supabase JavaScript SDK and collect traces, breadcrumbs and errors.
+
+See [Showcase](#showcase) section for detailed screenshots of what is captured.
 
 ## Install
 
@@ -44,6 +50,81 @@ Sentry.init({
 - `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: (builder) => boolean` - Decide whether a span should be created based on the query builder used to capture this data
-- `shouldCreateBreadcrumb: (builder) => boolean` - Decide whether a breadcrumb should be created based on the query builder used to capture this data
-- `sanitizeBody: (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
+- `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:
+
+```js
+// @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
+
+<table>
+  <tr>
+    <td valign="top"><img src="screenshots/server-side.png" width="320"></td>
+    <td valign="top"><img src="screenshots/server-side-details.png" width="320"></td>
+  </tr>
+</table>
+
+### Client-side Traces
+
+<table>
+  <tr>
+    <td valign="top"><img src="screenshots/client-side.png" width="320"></td>
+    <td valign="top"><img src="screenshots/client-side-details.png" width="320"></td>
+  </tr>
+</table>
+
+### Capturing Non-throwable Errors
+
+<table>
+  <tr>
+    <td valign="top"><img src="screenshots/errors.png" width="320"></td>
+  </tr>
+</table>
+
+### Breadcrumbs
+
+<table>
+  <tr>
+    <td valign="top"><img src="screenshots/breadcrumbs.png" width="320"></td>
+  </tr>
+</table>
+
+### Payload Sanitization
+
+<table>
+  <tr>
+    <td valign="top"><img src="screenshots/body-sanitization.png" width="320"></td>
+  </tr>
+</table>

index.d.ts

@@ -1,5 +1,5 @@
-import { type SupabaseClient } from "@supabase/supabase-js";
-import { type PostgrestBuilder } from "@supabase/postgrest-js";
+import { SupabaseClient } from "@supabase/supabase-js";
+import { EventProcessor, Hub, Integration } from "@sentry/types";
 
 /**
 @returns Sentry JavaScript SDK Integration that can be used to instrument Supabase JavaScript SDK instrumentation.
@@ -21,17 +21,30 @@ Sentry.init({
 });
 ```
 */
-export class SupabaseIntegration {
+export class SupabaseIntegration implements Integration {
+  name: string;
   constructor(
-    clientConstructor: SupabaseClient,
-    options: {
-      tracing?: boolean;
-      errors?: boolean;
-      breadcrumbs?: boolean;
-      operations?: ["select" | "insert" | "upsert" | "update" | "delete"][];
-      shouldCreateSpan: (builder: PostgrestBuilder<unknown>) => boolean;
-      shouldCreateBreadcrumb: (builder: PostgrestBuilder<unknown>) => boolean;
-      sanitizeBody(key: string, value: unknown): any;
-    }
+    clientConstructor: typeof SupabaseClient,
+    options?: Partial<{
+      tracing: boolean;
+      errors: boolean;
+      breadcrumbs: boolean;
+      operations: ["select" | "insert" | "upsert" | "update" | "delete"][];
+      shouldCreateSpan: (payload: Payload) => boolean;
+      shouldCreateBreadcrumb: (payload: Payload) => boolean;
+      sanitizeBody(table: string, key: string, value: unknown): any;
+    }>
   );
+  setupOnce(
+    addGlobalEventProcessor: (callback: EventProcessor) => void,
+    getCurrentHub: () => Hub
+  ): void;
 }
+
+export type Payload = {
+  method: "GET" | "HEAD" | "POST" | "PATCH" | "DELETE";
+  url: URL;
+  headers: Record<string, string>;
+  schema?: string;
+  body?: unknown;
+};

index.js

@@ -270,14 +270,22 @@ export class SupabaseIntegration {
             for (const [key, value] of Object.entries(thisArg.body)) {
               body[key] =
                 typeof self.options.sanitizeBody === "function"
-                  ? self.options.sanitizeBody(key, value)
+                  ? self.options.sanitizeBody(table, key, value)
                   : value;
             }
           }
 
+          const shouldCreatePayload = {
+            method: thisArg.method,
+            url: thisArg.url,
+            headers: thisArg.headers,
+            schema: thisArg.schema,
+            body: thisArg.body,
+          };
+
           const shouldCreateSpan =
             typeof self.options.shouldCreateSpan === "function"
-              ? self.options.shouldCreateSpan(thisArg)
+              ? self.options.shouldCreateSpan(shouldCreatePayload)
               : true;
 
           let span;
@@ -341,7 +349,7 @@ export class SupabaseIntegration {
 
                 const shouldCreateBreadcrumb =
                   typeof self.options.shouldCreateBreadcrumb === "function"
-                    ? self.options.shouldCreateBreadcrumb(thisArg)
+                    ? self.options.shouldCreateBreadcrumb(shouldCreatePayload)
                     : true;
 
                 if (self.options.breadcrumbs && shouldCreateBreadcrumb) {

package.json

@@ -30,7 +30,6 @@
     "@supabase/supabase-js": "2.x"
   },
   "devDependencies": {
-    "@supabase/postgrest-js": "^1.9.0",
     "@supabase/supabase-js": "2.39.0"
   }
 }

tests/breadcrumbs.test.js

@@ -111,7 +111,7 @@ test("Breadcrumbs", async (t) => {
         (integration = new SupabaseIntegration(Supabase.SupabaseClient, {
           breadcrumbs: true,
           errors: true,
-          sanitizeBody(key, value) {
+          sanitizeBody(table, key, value) {
             switch (key) {
               case "password":
                 return "<redacted>";

tests/errors.test.js

@@ -148,7 +148,7 @@ test("Errors", async (t) => {
       const { captureException } = initSentry(
         (integration = new SupabaseIntegration(Supabase.SupabaseClient, {
           errors: true,
-          sanitizeBody(key, value) {
+          sanitizeBody(table, key, value) {
             switch (key) {
               case "password":
                 return "<redacted>";

tests/tracing.test.js

@@ -202,7 +202,7 @@ test("Tracing", async (t) => {
       );
       const { setHttpStatus, finish, startChild } = initSentry(
         (integration = new SupabaseIntegration(Supabase.SupabaseClient, {
-          sanitizeBody(key, value) {
+          sanitizeBody(table, key, value) {
             switch (key) {
               case "password":
                 return "<redacted>";