Missing config details?

[krzysztofradomski]

Hello, I implemented this using the suggested setup but I get no traces or events originating from this sdk in Sentry. Am I missing something, or is there a conflicting order of integrations or?..

    "@sentry/react": "^8.11.0",
    "@sentry/vite-plugin": "^2.20.0",
    "@supabase/sentry-js-integration": "^0.2.0",

export function enableSentryLogging() {
  Sentry.init({
    environment: window.location.hostname.includes("localhost")
      ? "development"
      : "production",
    dsn: "xyz",
    integrations: [
      Sentry.browserTracingIntegration({
        shouldCreateSpanForRequest: (url) => {
          return !url.startsWith(`${projectURL}/rest`);
        },
      }),
      Sentry.replayIntegration(),
      Sentry.reactRouterV6BrowserTracingIntegration({
        useEffect: React.useEffect,
        useLocation,
        useNavigationType,
        createRoutesFromChildren,
        matchRoutes,
      }),
      Sentry.browserProfilingIntegration(),
      // Sentry.captureConsoleIntegration(),
      supabaseIntegration(SupabaseClient, Sentry, {
        tracing: true,
        breadcrumbs: true,
        errors: true,
      }),
    ],
    tracesSampleRate: 1.0, 
    tracePropagationTargets: [...],
    replaysSessionSampleRate: 0.1, 
    replaysOnErrorSampleRate: 1.0,
    profilesSampleRate: 1.0,
    beforeSend(event) {
       ...
      return event;
    },
  });
}

[kamilogorek]

Hey, have you tried setting debug: true and see whether Sentry SDK is actually producing any spans?

Can you also provide any example event from the beforeSend callback, eg. by calling

const { data, error } = await supabaseClient.from("some-table").select("*").limit(1);
Sentry.captureException(new Error("boop"));

Any repro would be nice as well :)

[krzysztofradomski]

This is part of the debug: true output in my localhost:

beforeSend config is just translations of the error form:

    beforeSend(event) {
      // Check if it is an exception, and if so, show the report dialog
      console.log("beforeSend", { event });
      if (event.exception && event.event_id) {
        Sentry.showReportDialog({
          eventId: event.event_id,
          title: "Przepraszamy, wystąpił problem!",
          ...
        });
      }
      return event;
    },

Example beforesend event:

only get these on thrown errors

I don't get supabase as category and only see queries when I inspect issues details:

and I cannot really find views similar to the showcase images.

My goal is simple - track all supabase interactions, butI feel like I am missing a key piece of the puzzle - do I need to upgrade from Developer Plan?

I attach my full sentry config, with some sensitive data ommitted. sentry-config.ts.txt

[kamilogorek]

do I need to upgrade from Developer Plan?

Not at all, it's available for free to everyone. If it collects breadcrumbs, it means that the integration is wired-up correctly.

What you're looking for I assume are traces with all the metadata for database queries, not errors breadcrumbs, and those should be available at https://_.sentry.io/traces/ If that's not the case, there's something off with the React/Sentry SDK interaction itself. I'm more than happy to take a look at it if you're able to provide some sort of reproduction, as I don't have any react examples setup locally.

[krzysztofradomski]

I'll try to prepare a reproduction env for you, thanks!

[krzysztofradomski]

What you're looking for I assume are traces with all the metadata for database queries, - correct, I want all the data I can see in the example screenshots :)

I've created a stripped down version of my app in a new private repo, and send you an invite. You still need to provide your own supabase and sentry project credentials ;) (supa db only has 1 table, profiles with address_line_1: string | null; address_line_2: string | null;)

I can make it a codesandox, but prefer not to unless necessary.

[kamilogorek]

@krzysztofradomski thanks for the repro. I found the issue with the implementation that is caused by an API change of v8 SDK. Span metadata creation is performed slightly different now. I'll fix it in ~2 weeks once I'm back home :)

[wyozi]

hey @kamilogorek, any progress with this or anything where external help would be appreciated? :)

[kamilogorek]

Hey @wyozi I did some research yesterday for it and already contacted Sentry guys for some help, as I did not follow their v8 SDK transition, and this integration needs some adjustment how span data is stored.

eg. this is working just fine in v7 (see the v7.js), but it fails miserably with v8.

const data = {
  "db.table": table,
  "db.schema": thisArg.schema,
  "db.url": thisArg.url.origin,
  "db.sdk": thisArg.headers["X-Client-Info"],
};

if (query.length) {
  data["db.query"] = query;
}

if (Object.keys(body).length) {
  data["db.body"] = body;
}

span = transaction?.startChild({
  description,
  op: `db.${operation}`,
  origin: "auto.db.supabase",
  data,
});

Easiest way to work on it and test the behavior:

clone https://github.com/supabase-community/sentry-integration-js
cd examples
make start

Go to http://localhost:3000/index-v7 and http://localhost:3000/index-v8, compare first 2 spans in Captured transaction log.

Any help is appreciated :)

[wyozi]

@kamilogorek I noticed that startInactiveSpan takes an attributes property instead of a data property. Changing it gives me this in v8:

Does this look more correct?

[kamilogorek]

Yup! That looks great. The only missing piece is origin, as right now it's listed as manual, wherein we should be able to give it a proper auto.db.supabase name: https://develop.sentry.dev/sdk/telemetry/traces/trace-origin/

Feel free to submit a PR as well, would appreciate it :)

[kamilogorek]

Thanks to @wyozi everything works as expected now in SDK v8. Released a new version as 0.3.0. Cheers!

v7 trace (screenshot)

v8 trace (screenshot)