chore: post-review updates for sentry docs (#47784)

FUP to https://github.com/supabase/supabase/pull/47709

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Documentation**
* Updated the Next.js Sentry setup guide with clearer wording and a
step-by-step configuration flow.
* Added explicit instructions for instrumenting Supabase clients in
server, browser, and middleware contexts.
* Included guidance for enabling query and mutation data capture so
Supabase activity appears in monitoring as database spans.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Kamil Ogórek authored and GitHub committed 2026-07-09 17:27:15 +02:00
1 parent 3667601895
commit dcfffcd076
1 file changed
+7 -5
@@ -105,13 +105,13 @@ Sentry.init({
})
```
## Example Next.js configuration
## Configuration for Next.js
Next.js runs Sentry across browser, server, and edge runtimes, and auth-aware setups (like `@supabase/ssr`) create a Supabase client per request. Since `instrumentSupabaseClient` patches database calls per runtime and auth calls per client instance, call it inside each of your client factories rather than on a single shared instance.
First, run through the [Sentry Next.js wizard](https://docs.sentry.io/platforms/javascript/guides/nextjs/#install) to set up the base Sentry configuration.
1. Run through the [Sentry Next.js wizard](https://docs.sentry.io/platforms/javascript/guides/nextjs/#install) to set up the base Sentry configuration.
Then add `Sentry.instrumentSupabaseClient` to each factory. For example, the server client with `@supabase/ssr`:
2. Add `Sentry.instrumentSupabaseClient` to each factory. For example, the server client with `@supabase/ssr`:
```ts utils/supabase/server.ts
import * as Sentry from '@sentry/nextjs'
@@ -125,6 +125,8 @@ export async function createClient() {
}
```
Do the same in your browser client (`createBrowserClient`) and middleware client so every runtime is covered. To include query filters and mutation bodies, enable `dataCollection: { userInfo: true }` in each runtime's Sentry config, or pass `Sentry.instrumentSupabaseClient(client, { sendOperationData: true })` at the call site.
3. Apply the same in your browser client using (`createBrowserClient`) and middleware client so every runtime is covered.
Afterwards, build and run your application (`npm run build && npm run start`). Supabase queries now appear as `db` spans in your Sentry traces.
4. To include query filters and mutation bodies, enable `dataCollection: { userInfo: true }` in each runtime's Sentry config, or pass `Sentry.instrumentSupabaseClient(client, { sendOperationData: true })` at the call site.
5. Build and run your application (`npm run build && npm run start`). Supabase queries now appear as `db` spans in your Sentry traces.