diff --git a/docs/platforms/javascript/guides/nextjs/tracing/index.mdx b/docs/platforms/javascript/guides/nextjs/tracing/index.mdx index f1b03b5783675..166852e21c23a 100644 --- a/docs/platforms/javascript/guides/nextjs/tracing/index.mdx +++ b/docs/platforms/javascript/guides/nextjs/tracing/index.mdx @@ -357,19 +357,20 @@ Sentry.init({ -### Detached spans with `after()` +### Detached spans with `after()` or `waitUntil()` -If you're using Next.js's [`after()`](https://nextjs.org/docs/app/api-reference/functions/after) and you see multiple root spans (like individual `db` spans) instead of one cohesive trace, your spans are becoming detached. +If you're using Next.js's [`after()`](https://nextjs.org/docs/app/api-reference/functions/after) or [`waitUntil`](https://vercel.com/docs/functions/functions-api-reference/vercel-functions-package#waituntil) and you see multiple root spans (like individual `db` spans) instead of one cohesive trace, your spans are becoming detached. -This happens when `after()` runs after the response is sent. By then, the request's root span has already ended. +This happens when `after()` or `waitUntil()` runs after the response is sent. By then, the request's root span has already ended. -Wrap your deferred work with `startSpan` inside the `after()` callback to group all background spans into a single transaction: +Wrap your deferred work with `startSpan` inside the `after()` or `waitUntil()` callback to group all background spans into a single transaction: ```tsx {filename:app/api/webhook/route.ts} import { after } from "next/server"; +import { waitUntil } from '@vercel/functions'; import * as Sentry from "@sentry/nextjs"; export async function POST(request: Request) { @@ -382,6 +383,13 @@ export async function POST(request: Request) { ) ); + waitUntil( + Sentry.startSpan( + { name: "webhook.process", op: "task" }, + () => processWebhook(data) + ) + ); + return Response.json({ received: true }); } ```