diff --git a/docs/platforms/javascript/common/tracing/new-spans/index.mdx b/docs/platforms/javascript/common/tracing/new-spans/index.mdx new file mode 100644 index 00000000000000..a64bd533fd8704 --- /dev/null +++ b/docs/platforms/javascript/common/tracing/new-spans/index.mdx @@ -0,0 +1,370 @@ +--- +title: New Spans +description: "Learn how to use stream mode to send spans to Sentry as they finish, removing the 1,000-span limit and making trace data visible sooner." +sidebar_order: 35 +new: true +notSupported: + - javascript.cordova +--- + + + +By default, the Sentry JavaScript SDKs collect all spans in memory and send them to Sentry as a single transaction once the root span ends. This is called transaction mode. +Stream mode changes this by sending spans to Sentry in batches as they finish. Service spans, which represent a service's entry point, replace transactions as the main grouping for each service. + + + +- **No 1,000-span limit.** In transaction mode, transactions are capped at 1,000 spans. Stream mode has no upper limit since spans are sent in batches. +- **Lower memory usage.** Spans are flushed periodically and don't need to be held in memory until the root span ends. This is especially useful for long-running processes like queue consumers or cron jobs. +- **Faster visibility.** Span data arrives in Sentry as your application runs, instead of only after the entire operation completes. +- **No data loss from crashes.** If your process terminates unexpectedly, spans that were already flushed are preserved. In transaction mode, a crash before the root span ends means all span data is lost. + + + +## Prerequisites + +You need: + +- Tracing configured in + your app +- Sentry SDK `>=10.53.1` + +## Migrate from Transaction Mode + +For most users, switching to stream mode requires no code changes beyond the initial opt-in. If you use `beforeSendSpan` or `beforeSendTransaction`, follow these steps: + +1. [Enable stream mode](#enable-stream-mode) +2. [Wrap `beforeSendSpan` with `Sentry.withStreamedSpan()` to filter spans](#filter-spans) +3. [Replace `beforeSendTransaction` with `ignoreSpans` to drop spans](#drop-spans) +4. [Verify the migration](#verify-your-setup) + +## Enable Stream Mode + + + + + + + +Tracing modes are scoped per SDK, which means you can use, for example, stream mode in your frontend, and transaction mode in your backend, or vice versa. + + + + + + + +When stream mode is enabled, the SDK maintains an internal buffer that groups spans by trace ID. + +Spans are flushed: + +- On a regular interval (every 5 seconds by default). +- When a trace's buffer reaches 1,000 spans. +- When you call `Sentry.flush()` or `Sentry.close()`. + +Each flush sends only the spans accumulated since the last flush, grouped into envelopes by trace ID. + + + +## Manual Instrumentation (Optional) + +### Start a Span + + + + + +Use `Sentry.startSpan()` to create a span that is automatically ended when the callback completes: + + + + +```javascript +const result = await Sentry.startSpan( + { name: "my-operation", attributes: { "my.attribute": "value" } }, + async () => { + // Your code here + return await doWork(); + } +); +``` + + + + + + + +Child spans created inside the callback are automatically associated with the parent: + + + + +```javascript +await Sentry.startSpan({ name: "parent-operation" }, async () => { + await Sentry.startSpan({ name: "child-step-1" }, async () => { + await stepOne(); + }); + + await Sentry.startSpan({ name: "child-step-2" }, async () => { + await stepTwo(); + }); +}); +``` + + + + + +For more details on span creation APIs, such as `startSpan`, `startSpanManual`, or `startInactiveSpan`, see Instrumentation. + +### Add Span Attributes + +Attach structured metadata to spans using `attributes`, which can be `string`, `number`, or `boolean`, as well as arrays of these types. + + + + + +You can set attributes when starting a span: + + + + +```javascript +Sentry.startSpan( + { + name: "process-order", + op: "queue.process", + attributes: { + "order.id": "abc-123", + "order.item_count": 5, + "order.priority": true, + }, + }, + () => { + // Process the order + } +); +``` + + + + + + + +Or add them to an already running span: + + + + +```javascript +Sentry.startSpan({ name: "handle-request" }, (span) => { + // Set a single attribute + span.setAttribute("http.response.status_code", 200); + + // Set multiple attributes at once + span.setAttributes({ + "http.route": "/api/users", + "user.id": "user-42", + }); +}); +``` + + + + +Find more examples in our Sending Span Metrics documentation. + + + +## Distributed Tracing (Optional) + +Distributed tracing works out of the box when tracing is enabled and works the same way in stream mode. If you need to manually propagate trace context, for example, +when the SDK can't instrument automatically, see Custom Trace Propagation. + +## Extended Configuration (Optional) + +### Filter Spans + + + + + +To modify or redact span data before it's sent, use `beforeSendSpan`. In stream mode, wrap it with `Sentry.withStreamedSpan()` so the SDK applies it to spans as they are flushed rather than only at transaction time. + + + `beforeSendSpan` can only modify span data, and you cannot use it to drop + spans. Use [`ignoreSpans`](#drop-spans) instead. + + + + + + + +```JavaScript +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + traceLifecycle: "stream", + beforeSendSpan: Sentry.withStreamedSpan((span) => { + // In stream mode, 'op' is accessed via attributes + if (span.attributes?.["sentry.op"] === "db.query") { + // In stream mode, 'description' is now renamed to 'name' + span.name = "[filtered]"; + } + return span; + }), +}); +``` + + + + + + + +```javascript +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + integrations: [ + // other integrations + Sentry.spanStreamingIntegration(), + ], + beforeSendSpan: Sentry.withStreamedSpan((span) => { + // In stream mode, 'op' is accessed via attributes + if (span.attributes?.["sentry.op"] === "db.query") { + // In stream mode, 'description' is now renamed to 'name' + span.name = "[filtered]"; + } + return span; + }), +}); +``` + + + + + + + + + + +If you're using `beforeSendSpan`, wrap it with `Sentry.withStreamedSpan()` as shown above, otherwise the SDK falls back to transaction mode. +The callback signature and properties of the span object are also shaped differently. See `beforeSendSpan` for the full reference. + +If you're using `beforeSendTransaction` to drop spans, use [`ignoreSpans`](#drop-spans) instead, since `beforeSendTransaction` is not available in stream mode. + + + +### Drop Spans + + + + + +To prevent specific spans from being created, use the `ignoreSpans` option: + + + + + + +```javascript +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + traceLifecycle: "stream", + ignoreSpans: [ + // Drop spans whose name contains "healthcheck" + "healthcheck", + // Drop spans whose name matches a pattern + /^GET \/api\/v1\/internal/, + // Drop spans matching name and attribute conditions + { + name: /^GET \//, + attributes: { + "http.route": "/api/status", + }, + }, + ], +}); +``` + + + + + + + +```javascript +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + integrations: [ + // other integrations + Sentry.spanStreamingIntegration(), + ], + ignoreSpans: [ + // Drop spans whose name contains "healthcheck" + "healthcheck", + // Drop spans whose name matches a pattern + /^GET \/api\/v1\/internal/, + // Drop spans matching name and attribute conditions + { + name: /^GET \//, + attributes: { + "http.response.status_code": 200, + "http.route": "/api/status", + }, + }, + ], +}); +``` + + + + + + + + + +If a matching span is a service span, all of its child spans are dropped as well. If a child span matches, only that span is dropped and its children are reparented to the nearest ancestor. + +In stream mode, `ignoreSpans` is evaluated at span start, so only the span name and attributes available at that point are taken into account. Any name updates or additional attributes added while the span is active won't influence whether the span is dropped. + + + +In transaction mode, `ignoreSpans` is evaluated at transaction end rather than at span start. Review your existing rules to make sure the attributes you're matching on are passed when the span is created. + +If you're auto-instrumenting and don't know what the initial name of a span is when it starts, enable SDK debug logging during development by setting `debug: true` when initializing the SDK. + + + +## Verify Your Setup + +To make sure you've enabled stream mode successfully: + + + + + +- **Check the Sentry dashboard**: Spans should appear in the Traces view shortly after they complete. Traces look the same as in transaction mode, but without transactions. +- **Check for fallback warnings in your logs**: If the SDK logs warnings about falling back to transaction mode, your `beforeSendSpan` callback is likely missing the `Sentry.withStreamedSpan()` wrapper. + + + + + + + +- **Check the Sentry dashboard**: Spans should appear in the Traces view shortly after they complete. Traces look the same as in transaction mode, but without transactions. +- **Check for fallback warnings in your logs**: If the SDK logs warnings about falling back to transaction mode, your `beforeSendSpan` callback is likely missing the `Sentry.withStreamedSpan()` wrapper. +- **Check the network tab in your browser's DevTools**: Span envelopes should appear as individual requests with content type `application/vnd.sentry.items.span.v2+json` + + diff --git a/platform-includes/performance/enable-stream-mode/javascript.astro.mdx b/platform-includes/performance/enable-stream-mode/javascript.astro.mdx new file mode 100644 index 00000000000000..01c1d9dbda8d9c --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.astro.mdx @@ -0,0 +1,50 @@ + + + + +Opt in by adding `spanStreamingIntegration()` to your list of integrations when initializing the SDK in your Sentry client config file: + + + + +```javascript {filename: sentry.client.config.(ts|js)} +import * as Sentry from "@sentry/astro"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + integrations: [ + Sentry.browserTracingIntegration(), + // enables stream mode + Sentry.spanStreamingIntegration(), + ], +}); +``` + + + + + + + +Then set the `traceLifecycle` option to `'stream'` when initializing the SDK in your Sentry server config file: + + + + +```javascript {filename: sentry.server.config.(ts|js)} +import * as Sentry from "@sentry/astro"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + // enables stream mode + traceLifecycle: "stream", +}); +``` + + + + + +To revert to transaction mode, remove `traceLifecycle` and `spanStreamingIntegration()` from these files. diff --git a/platform-includes/performance/enable-stream-mode/javascript.bun.mdx b/platform-includes/performance/enable-stream-mode/javascript.bun.mdx new file mode 100644 index 00000000000000..50fcd0d395b0dc --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.bun.mdx @@ -0,0 +1,25 @@ + + + + +Opt in by setting the `traceLifecycle` option to `'stream'` when initializing the SDK: + + + + +```javascript {filename: instrument.js} +import * as Sentry from "@sentry/bun"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + // enables stream mode + traceLifecycle: "stream", +}); +``` + + + + + +To revert to transaction mode, set `traceLifecycle` to `'static'` (the default) or remove the option entirely. diff --git a/platform-includes/performance/enable-stream-mode/javascript.cloudflare.mdx b/platform-includes/performance/enable-stream-mode/javascript.cloudflare.mdx new file mode 100644 index 00000000000000..baaa88c96e41ce --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.cloudflare.mdx @@ -0,0 +1,62 @@ + + + +### Cloudflare Pages + + + +Opt in by setting the `traceLifecycle` option to `'stream'` when initializing the SDK: + + + + +```javascript {filename: functions/_middleware.js} +import * as Sentry from "@sentry/cloudflare"; + +export const onRequest = [ + Sentry.sentryPagesPlugin((context) => ({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 0.2 + // enables stream mode + traceLifecycle: "stream", + })), +]; +``` + + + + + + +### Cloudflare Workers + + + +Opt in by setting the `traceLifecycle` option to `'stream'` when initializing the SDK: + + + + +```javascript {filename: index.ts} +import * as Sentry from "@sentry/cloudflare"; + +export default Sentry.withSentry( + (env: Env) => ({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + // Enables stream mode + traceLifecycle: "stream", + }), + { + async fetch(request, env, ctx) { + return new Response("Hello World!"); + }, + } satisfies ExportedHandler, +); +``` + + + + + +To revert to transaction mode, set `traceLifecycle` to `'static'` (the default) or remove the option entirely. diff --git a/platform-includes/performance/enable-stream-mode/javascript.deno.mdx b/platform-includes/performance/enable-stream-mode/javascript.deno.mdx new file mode 100644 index 00000000000000..297c972e1deaff --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.deno.mdx @@ -0,0 +1,24 @@ + + + + +Opt in by setting the `traceLifecycle` option to `'stream'` when initializing the SDK: + + + + +```javascript {filename: main.ts} +import * as Sentry from "npm:@sentry/deno"; +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + // enables stream mode + traceLifecycle: "stream", +}); +``` + + + + + +To revert to transaction mode, set `traceLifecycle` to `'static'` (the default) or remove the option entirely. diff --git a/platform-includes/performance/enable-stream-mode/javascript.effect.mdx b/platform-includes/performance/enable-stream-mode/javascript.effect.mdx new file mode 100644 index 00000000000000..248b852120e5da --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.effect.mdx @@ -0,0 +1,61 @@ + + + + +Opt in by adding `spanStreamingIntegration()` to your list of integrations when initializing the SDK in your client: + + + + +```javascript {filename: main.ts} +import * as Sentry from "@sentry/effect"; +import { Layer } from "effect"; +const SentryLive = Layer.mergeAll( + Sentry.effectLayer({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + integrations: [ + Sentry.browserTracingIntegration(), + // enables stream mode + Sentry.spanStreamingIntegration(), + ], + }), + Layer.setTracer(Sentry.SentryEffectTracer) +); +``` + + + + + + + +Then set the `traceLifecycle` option to `'stream'` when initializing the SDK in your server: + + + + +```javascript {filename: main.ts} +import * as Sentry from "@sentry/effect"; +import * as Layer from "effect/Layer"; +import { HttpLive } from "./Http.js"; + +const SentryLive = Layer.mergeAll( + Sentry.effectLayer({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + // enables stream mode + traceLifecycle: "stream", + }), + Layer.setTracer(Sentry.SentryEffectTracer) +); + +const MainLive = HttpLive.pipe(Layer.provide(SentryLive)); +MainLive.pipe(Layer.launch, NodeRuntime.runMain); +``` + + + + + +To revert to transaction mode, remove `traceLifecycle` and `spanStreamingIntegration()` from these files. diff --git a/platform-includes/performance/enable-stream-mode/javascript.electron.mdx b/platform-includes/performance/enable-stream-mode/javascript.electron.mdx new file mode 100644 index 00000000000000..bfff939ee024dc --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.electron.mdx @@ -0,0 +1,51 @@ + + + + +Opt in by adding `spanStreamingIntegration()` to your list of integrations when initializing the SDK in your renderer: + + + + +```javascript +import * as Sentry from "@sentry/electron/renderer"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + integrations: [ + Sentry.browserTracingIntegration(), + // enables stream mode + Sentry.spanStreamingIntegration(), + ], +}); +``` + + + + + + + +Then set the `traceLifecycle` option to `'stream'` when initializing the SDK in your main process: + + + + +```javascript +import * as Sentry from "@sentry/electron/main"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + // enables stream mode + traceLifecycle: "stream", + integrations: [Sentry.startupTracingIntegration()], +}); +``` + + + + + +To revert to transaction mode, remove `traceLifecycle` and `spanStreamingIntegration()` from these files. diff --git a/platform-includes/performance/enable-stream-mode/javascript.elysia.mdx b/platform-includes/performance/enable-stream-mode/javascript.elysia.mdx new file mode 100644 index 00000000000000..dd0e571319c4b7 --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.elysia.mdx @@ -0,0 +1,25 @@ + + + + +Opt in by setting the `traceLifecycle` option to `'stream'` when initializing the SDK: + + + + +```javascript {filename: instrument.js} +import * as Sentry from "@sentry/elysia"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + // enables stream mode + traceLifecycle: "stream", +}); +``` + + + + + +To revert to transaction mode, set `traceLifecycle` to `'static'` (the default) or remove the option entirely. diff --git a/platform-includes/performance/enable-stream-mode/javascript.ember.mdx b/platform-includes/performance/enable-stream-mode/javascript.ember.mdx new file mode 100644 index 00000000000000..a929e63209df0b --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.ember.mdx @@ -0,0 +1,27 @@ + + + + +Opt in by adding `spanStreamingIntegration()` to your list of integrations when initializing the SDK: + + + + +```javascript +import * as Sentry from "@sentry/ember"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + integrations: [ + // enables stream mode + Sentry.spanStreamingIntegration(), + ], +}); +``` + + + + + +To revert to transaction mode, remove `spanStreamingIntegration()` from your integrations. diff --git a/platform-includes/performance/enable-stream-mode/javascript.gcp-functions.mdx b/platform-includes/performance/enable-stream-mode/javascript.gcp-functions.mdx new file mode 100644 index 00000000000000..fc3c31c7294690 --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.gcp-functions.mdx @@ -0,0 +1,25 @@ + + + + +Opt in by setting the `traceLifecycle` option to `'stream'` when initializing the SDK: + + + + +```javascript +const Sentry = require("@sentry/google-cloud-serverless"); + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + // enables stream mode + traceLifecycle: "stream", +}); +``` + + + + + +To revert to transaction mode, set `traceLifecycle` to `'static'` (the default) or remove the option entirely. diff --git a/platform-includes/performance/enable-stream-mode/javascript.hono.mdx b/platform-includes/performance/enable-stream-mode/javascript.hono.mdx new file mode 100644 index 00000000000000..951546caad0694 --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.hono.mdx @@ -0,0 +1,51 @@ + + + + +Opt in by setting the `traceLifecycle` option to `'stream'` when initializing the SDK: + + + + +```javascript {tabTitle:Cloudflare Workers} +import { sentry } from "@sentry/hono/cloudflare"; + +app.use( + sentry(app, { + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + // enables stream mode + traceLifecycle: "stream", + }) +); +``` + +```javascript {tabTitle:Node.js} {filename: instrument.mjs} +import * as Sentry from "@sentry/hono/node"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + // enables stream mode + traceLifecycle: "stream", +}); +``` + +```javascript {tabTitle:Bun} +import { sentry } from "@sentry/hono/bun"; + +app.use( + sentry(app, { + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + // enables stream mode + traceLifecycle: "stream", + }) +); +``` + + + + + +To revert to transaction mode, set `traceLifecycle` to `'static'` (the default) or remove the option entirely. diff --git a/platform-includes/performance/enable-stream-mode/javascript.mdx b/platform-includes/performance/enable-stream-mode/javascript.mdx new file mode 100644 index 00000000000000..629a63f20a357a --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.mdx @@ -0,0 +1,28 @@ + + + + +Opt in by adding `spanStreamingIntegration()` to your list of integrations when initializing the SDK: + + + + +```javascript +import * as Sentry from "___SDK_PACKAGE___"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + integrations: [ + Sentry.browserTracingIntegration(), + // enables stream mode + Sentry.spanStreamingIntegration(), + ], +}); +``` + + + + + +To revert to transaction mode, remove `spanStreamingIntegration()` from your integrations. diff --git a/platform-includes/performance/enable-stream-mode/javascript.nestjs.mdx b/platform-includes/performance/enable-stream-mode/javascript.nestjs.mdx new file mode 100644 index 00000000000000..8faa6f11ac1b2b --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.nestjs.mdx @@ -0,0 +1,25 @@ + + + + +Opt in by setting the `traceLifecycle` option to `'stream'` when initializing the SDK: + + + + +```javascript {filename: instrument.ts} +import * as Sentry from "@sentry/nestjs"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + // enables stream mode + traceLifecycle: "stream", +}); +``` + + + + + +To revert to transaction mode, set `traceLifecycle` to `'static'` (the default) or remove the option entirely. diff --git a/platform-includes/performance/enable-stream-mode/javascript.nextjs.mdx b/platform-includes/performance/enable-stream-mode/javascript.nextjs.mdx new file mode 100644 index 00000000000000..99ba2c2facc474 --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.nextjs.mdx @@ -0,0 +1,25 @@ + + + + +Opt in by setting the `traceLifecycle` option to `'stream'` when initializing the SDK in your server, client, and edge config files: + + + + +```javascript +import * as Sentry from "@sentry/nextjs"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + // enables stream mode + traceLifecycle: "stream", +}); +``` + + + + + +To revert to transaction mode, set `traceLifecycle` to `'static'` (the default) or remove the option entirely. diff --git a/platform-includes/performance/enable-stream-mode/javascript.nitro.mdx b/platform-includes/performance/enable-stream-mode/javascript.nitro.mdx new file mode 100644 index 00000000000000..bf70f69d9b3cce --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.nitro.mdx @@ -0,0 +1,25 @@ + + + + +Opt in by setting the `traceLifecycle` option to `'stream'` when initializing the SDK: + + + + +```javascript {filename: instrument.mjs} +import * as Sentry from "@sentry/nitro"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + // enables stream mode + traceLifecycle: "stream", +}); +``` + + + + + +To revert to transaction mode, set `traceLifecycle` to `'static'` (the default) or remove the option entirely. diff --git a/platform-includes/performance/enable-stream-mode/javascript.node.mdx b/platform-includes/performance/enable-stream-mode/javascript.node.mdx new file mode 100644 index 00000000000000..053c862d60073f --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.node.mdx @@ -0,0 +1,36 @@ + + + + +Opt in by setting the `traceLifecycle` option to `'stream'` when initializing the SDK: + + + + +```javascript {tabTitle:CommonJS} {filename: instrument.js} +const Sentry = require("@sentry/node"); + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + // enables stream mode + traceLifecycle: "stream", +}); +``` + +```javascript {tabTitle:ESM} {filename: instrument.mjs} +import * as Sentry from "@sentry/node"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + // enables stream mode + traceLifecycle: "stream", +}); +``` + + + + + +To revert to transaction mode, set `traceLifecycle` to `'static'` (the default) or remove the option entirely. diff --git a/platform-includes/performance/enable-stream-mode/javascript.nuxt.mdx b/platform-includes/performance/enable-stream-mode/javascript.nuxt.mdx new file mode 100644 index 00000000000000..b028e799accfcd --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.nuxt.mdx @@ -0,0 +1,49 @@ + + + + +Opt in by adding `spanStreamingIntegration()` to your list of integrations when initializing the SDK in your Sentry client config file: + + + + +```javascript {filename: sentry.client.config.ts} +import * as Sentry from "@sentry/nuxt"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + integrations: [ + // enables stream mode + Sentry.spanStreamingIntegration(), + ], +}); +``` + + + + + + + +Then set the `traceLifecycle` option to `'stream'` when initializing the SDK in your Sentry server config file: + + + + +```javascript {filename: sentry.server.config.ts} +import * as Sentry from "@sentry/nuxt"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + // enables stream mode + traceLifecycle: "stream", +}); +``` + + + + + +To revert to transaction mode, remove `traceLifecycle` and `spanStreamingIntegration()` from these files. diff --git a/platform-includes/performance/enable-stream-mode/javascript.react-router.mdx b/platform-includes/performance/enable-stream-mode/javascript.react-router.mdx new file mode 100644 index 00000000000000..0c5464f34222d4 --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.react-router.mdx @@ -0,0 +1,50 @@ + + + + +Opt in by adding `spanStreamingIntegration()` to your list of integrations when initializing the SDK in your `entry.client.tsx` file: + + + + +```javascript {filename: entry.client.tsx} +import * as Sentry from "@sentry/react-router"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + integrations: [ + Sentry.reactRouterTracingIntegration(), + // enables stream mode + Sentry.spanStreamingIntegration(), + ], +}); +``` + + + + + + + +Then set the `traceLifecycle` option to `'stream'` when initializing the SDK in your `instrument.server.mjs` file: + + + + +```javascript {filename: instrument.server.mjs} +import * as Sentry from "@sentry/react-router"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + // enables stream mode + traceLifecycle: "stream", +}); +``` + + + + + +To revert to transaction mode, remove `traceLifecycle` and `spanStreamingIntegration()` from these files. diff --git a/platform-includes/performance/enable-stream-mode/javascript.remix.mdx b/platform-includes/performance/enable-stream-mode/javascript.remix.mdx new file mode 100644 index 00000000000000..1acc4d199bbed1 --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.remix.mdx @@ -0,0 +1,56 @@ + + + + +Opt in by adding `spanStreamingIntegration()` to your list of integrations when initializing the SDK in your `entry.client.tsx` file: + + + + +```javascript {filename: entry.client.tsx} +import { useLocation, useMatches } from "@remix-run/react"; +import * as Sentry from "@sentry/remix"; +import { useEffect } from "react"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + integrations: [ + Sentry.browserTracingIntegration({ + useEffect, + useLocation, + useMatches, + }), + // enables stream mode + Sentry.spanStreamingIntegration(), + ], +}); +``` + + + + + + + +Then set the `traceLifecycle` option to `'stream'` when initializing the SDK in your `instrument.server.mjs` file: + + + + +```javascript {filename: instrument.server.mjs} +import * as Sentry from "@sentry/remix"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + // enables stream mode + traceLifecycle: "stream", +}); +``` + + + + + +To revert to transaction mode, remove `traceLifecycle` and `spanStreamingIntegration()` from these files. diff --git a/platform-includes/performance/enable-stream-mode/javascript.solid.mdx b/platform-includes/performance/enable-stream-mode/javascript.solid.mdx new file mode 100644 index 00000000000000..3d9b1e178f852d --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.solid.mdx @@ -0,0 +1,30 @@ + + + + +Opt in by adding `spanStreamingIntegration()` to your list of integrations when initializing the SDK: + + + + +```javascript {filename: index.jsx} +import * as Sentry from "@sentry/solid"; +import { solidRouterBrowserTracingIntegration } from "@sentry/solid/solidrouter"; +import { render } from "solid-js/web"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + integrations: [ + solidRouterBrowserTracingIntegration(), + // enables stream mode + Sentry.spanStreamingIntegration(), + ], +}); +``` + + + + + +To revert to transaction mode, remove `spanStreamingIntegration()` from your integrations. diff --git a/platform-includes/performance/enable-stream-mode/javascript.solidstart.mdx b/platform-includes/performance/enable-stream-mode/javascript.solidstart.mdx new file mode 100644 index 00000000000000..a17c8b811ef3a1 --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.solidstart.mdx @@ -0,0 +1,53 @@ + + + + +Opt in by adding `spanStreamingIntegration()` to your list of integrations when initializing the SDK in your `entry.client.tsx` file: + + + + +```javascript {filename: src/entry-client.tsx} +import * as Sentry from "@sentry/solidstart"; +// import solidRouterBrowserTracingIntegration if you're using Solid Router +import { solidRouterBrowserTracingIntegration } from "@sentry/solidstart/solidrouter"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + integrations: [ + // only add solidRouterBrowserTracingIntegration if you're using Solid Router + solidRouterBrowserTracingIntegration(), + // enables stream mode + Sentry.spanStreamingIntegration(), + ], +}); +``` + + + + + + + +Then set the `traceLifecycle` option to `'stream'` when initializing the SDK in your `instrument.server.mjs` file: + + + + +```javascript {filename: src/instrument.server.mjs} +import * as Sentry from "@sentry/solidstart"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + // enables stream mode + traceLifecycle: "stream", +}); +``` + + + + + +To revert to transaction mode, remove `traceLifecycle` and `spanStreamingIntegration()` from these files. diff --git a/platform-includes/performance/enable-stream-mode/javascript.sveltekit.mdx b/platform-includes/performance/enable-stream-mode/javascript.sveltekit.mdx new file mode 100644 index 00000000000000..24151e56897520 --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.sveltekit.mdx @@ -0,0 +1,51 @@ + + + + +Opt in by adding `spanStreamingIntegration()` to your list of integrations when initializing the SDK in your client hook file: + + + + +```javascript {filename: src/hooks.client.(js|ts)} +import * as Sentry from "@sentry/sveltekit"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + integrations: [ + // enables stream mode + Sentry.spanStreamingIntegration(), + ], +}); +``` + + + + + + + +Then set the `traceLifecycle` option to `'stream'` when initializing the SDK in your server instrumentation file: + +Requires SvelteKit `2.31.0` or higher. + + + + +```javascript {filename: src/instrumentation.server.(js|ts)} +import * as Sentry from "@sentry/sveltekit"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + // enables stream mode + traceLifecycle: "stream", +}); +``` + + + + + +To revert to transaction mode, remove `traceLifecycle` and `spanStreamingIntegration()` from these files. diff --git a/platform-includes/performance/enable-stream-mode/javascript.tanstackstart-react.mdx b/platform-includes/performance/enable-stream-mode/javascript.tanstackstart-react.mdx new file mode 100644 index 00000000000000..6253f20d444193 --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.tanstackstart-react.mdx @@ -0,0 +1,58 @@ + + + + +Opt in by adding `spanStreamingIntegration()` to your list of integrations when initializing the SDK in your `router.tsx` file: + + + + +```javascript {filename: src/router.tsx} +import * as Sentry from "@sentry/tanstackstart-react"; +import { createRouter } from "@tanstack/react-router"; + +export const getRouter = () => { + const router = createRouter(); + + if (!router.isServer) { + Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + integrations: [ + Sentry.tanstackRouterBrowserTracingIntegration(router), + // enables stream mode + Sentry.spanStreamingIntegration(), + ], + }); + } + return router; +}; +``` + + + + + + + +Then set the `traceLifecycle` option to `'stream'` when initializing the SDK in your `instrument.server.mjs` file: + + + + +```javascript {filename: instrument.server.mjs} +import * as Sentry from "@sentry/tanstackstart-react"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + // enables stream mode + traceLifecycle: "stream", +}); +``` + + + + + +To revert to transaction mode, remove `traceLifecycle` and `spanStreamingIntegration()` from these files. diff --git a/platform-includes/performance/enable-stream-mode/javascript.wasm.mdx b/platform-includes/performance/enable-stream-mode/javascript.wasm.mdx new file mode 100644 index 00000000000000..78bd1c131b44b4 --- /dev/null +++ b/platform-includes/performance/enable-stream-mode/javascript.wasm.mdx @@ -0,0 +1,30 @@ + + + + +Opt in by adding `spanStreamingIntegration()` to your list of integrations when initializing the SDK: + + + + +```javascript +import * as Sentry from "@sentry/browser"; +import { wasmIntegration } from "@sentry/wasm"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + integrations: [ + Sentry.browserTracingIntegration(), + // enables stream mode + Sentry.spanStreamingIntegration(), + wasmIntegration(), + ], +}); +``` + + + + + +To revert to transaction mode, remove `spanStreamingIntegration()` from your integrations.