sentry-span-streaming-js
starsforks
How to install sentry-span-streaming-js?
getsentry/sentry-for-ai/sentry-span-streaming-js
$npx -y skills add getsentry/sentry-for-ai --skill sentry-span-streaming-jsMigrate JavaScript SDK to Sentry span streaming (span-first trace lifecycle). Use when asked to "enable span streaming", "migrate to span streaming", "use traceLifecycle stream", "add spanStreamingIntegration", or switch from transaction-based to streamed span delivery in a JavaS
SKILL.md
| 1 | > [All Skills](../../SKILL_TREE.md) > [Feature Setup](../sentry-feature-setup/SKILL.md) > Span Streaming (JavaScript) |
| 2 | |
| 3 | # Sentry Span Streaming Migration (JavaScript) |
| 4 | |
| 5 | Migrate from the default transaction-based trace lifecycle (`static`) to span streaming (`stream`), where spans are sent individually as they complete instead of being batched into a transaction at the end. |
| 6 | |
| 7 | This skill covers the JavaScript SDK (Browser, Node.js, Bun, Deno, Cloudflare). For Python, see [Span Streaming (Python)](../sentry-span-streaming-python/SKILL.md). For Dart/Flutter, see [Span Streaming (Dart)](../sentry-span-streaming-dart/SKILL.md). |
| 8 | |
| 9 | ## Invoke This Skill When |
| 10 | |
| 11 | - User asks to "enable span streaming" or "migrate to span streaming" in a JavaScript project |
| 12 | - User wants to switch from transaction-based to streamed span delivery |
| 13 | - User mentions `traceLifecycle`, `spanStreamingIntegration`, or `withStreamedSpan` |
| 14 | - User wants lower latency span delivery or per-span processing |
| 15 | |
| 16 | --- |
| 17 | |
| 18 | ## Phase 1: Detect |
| 19 | |
| 20 | ### 1.1 Detect Environment |
| 21 | |
| 22 | ```bash |
| 23 | # Detect if browser, server, or both |
| 24 | grep -rn "from '@sentry/browser'\|from '@sentry/react'\|from '@sentry/vue'\|from '@sentry/angular'\|from '@sentry/svelte'\|from '@sentry/nextjs'\|from '@sentry/nuxt'\|from '@sentry/sveltekit'\|from '@sentry/remix'\|from '@sentry/solidstart'\|from '@sentry/astro'\|from '@sentry/react-router'" --include="*.ts" --include="*.js" --include="*.tsx" --include="*.jsx" --include="*.mjs" -l 2>/dev/null | head -20 |
| 25 | |
| 26 | grep -rn "from '@sentry/node'\|from '@sentry/bun'\|from '@sentry/deno'\|from '@sentry/cloudflare'" --include="*.ts" --include="*.js" --include="*.tsx" --include="*.jsx" --include="*.mjs" -l 2>/dev/null | head -20 |
| 27 | ``` |
| 28 | |
| 29 | ### 1.2. Find Existing Sentry Config |
| 30 | |
| 31 | ```bash |
| 32 | # Find Sentry.init calls |
| 33 | grep -rn "Sentry\.init\|init({" --include="*.ts" --include="*.js" --include="*.tsx" --include="*.jsx" --include="*.mjs" -l 2>/dev/null | head -20 |
| 34 | |
| 35 | # Find beforeSendSpan usage |
| 36 | grep -rn "beforeSendSpan" --include="*.ts" --include="*.js" --include="*.tsx" --include="*.jsx" --include="*.mjs" -l 2>/dev/null |
| 37 | |
| 38 | # Find beforeSendTransaction usage |
| 39 | grep -rn "beforeSendTransaction" --include="*.ts" --include="*.js" --include="*.tsx" --include="*.jsx" --include="*.mjs" -l 2>/dev/null |
| 40 | |
| 41 | # Find ignoreSpans usage |
| 42 | grep -rn "ignoreSpans" --include="*.ts" --include="*.js" --include="*.tsx" --include="*.jsx" --include="*.mjs" -l 2>/dev/null |
| 43 | ``` |
| 44 | |
| 45 | ### 1.3 Classify Environment |
| 46 | |
| 47 | Based on detection results, classify each `Sentry.init` call as: |
| 48 | |
| 49 | | Environment | Packages | Migration Path | |
| 50 | |---|---|---| |
| 51 | | **Browser** | `@sentry/browser`, `@sentry/react`, `@sentry/vue`, `@sentry/angular`, `@sentry/svelte` | Add `spanStreamingIntegration()` | |
| 52 | | **Server** | `@sentry/node`, `@sentry/bun`, `@sentry/deno`, `@sentry/cloudflare` | Add `traceLifecycle: 'stream'` | |
| 53 | | **Framework (both)** | `@sentry/nextjs`, `@sentry/nuxt`, `@sentry/sveltekit`, `@sentry/remix`, `@sentry/astro`, `@sentry/solidstart`, `@sentry/react-router` | Migrate both client and server configs separately | |
| 54 | |
| 55 | --- |
| 56 | |
| 57 | ## Phase 2: Migrate |
| 58 | |
| 59 | **Prerequisites:** Sentry JavaScript SDK `>=10.66.0` with tracing enabled (`tracesSampleRate` or `tracesSampler` configured). |
| 60 | |
| 61 | Apply changes to each `Sentry.init` call. Work through each file identified above. |
| 62 | |
| 63 | ### 2.1 Enable Span Streaming |
| 64 | |
| 65 | #### Server-Side SDKs |
| 66 | |
| 67 | Add `traceLifecycle: 'stream'` to `Sentry.init()`: |
| 68 | |
| 69 | ```js |
| 70 | // Before |
| 71 | Sentry.init({ |
| 72 | dsn: '...', |
| 73 | tracesSampleRate: 1.0, |
| 74 | }); |
| 75 | |
| 76 | // After |
| 77 | Sentry.init({ |
| 78 | dsn: '...', |
| 79 | tracesSampleRate: 1.0, |
| 80 | traceLifecycle: 'stream', |
| 81 | }); |
| 82 | ``` |
| 83 | |
| 84 | #### Browser-Side SDKs |
| 85 | |
| 86 | Add `Sentry.spanStreamingIntegration()` to the `integrations` array. The integration automatically enables `traceLifecycle: 'stream'` — you do not need to set it manually. |
| 87 | |
| 88 | ```js |
| 89 | // Before |
| 90 | Sentry.init({ |
| 91 | dsn: '...', |
| 92 | integrations: [ |
| 93 | Sentry.browserTracingIntegration(), |
| 94 | ], |
| 95 | tracesSampleRate: 1.0, |
| 96 | }); |
| 97 | |
| 98 | // After |
| 99 | Sentry.init({ |
| 100 | dsn: '...', |
| 101 | integrations: [ |
| 102 | Sentry.spanStreamingIntegration(), |
| 103 | Sentry.browserTracingIntegration(), |
| 104 | ], |
| 105 | tracesSampleRate: 1.0, |
| 106 | }); |
| 107 | ``` |
| 108 | |
| 109 | The order of `spanStreamingIntegration()` relative to other integrations does not matter. |
| 110 | |
| 111 | #### Framework SDKs (Client + Server) |
| 112 | |
| 113 | Apply the browser migration to client config files and the server migration to server config files. Common patterns: |
| 114 | |
| 115 | | Framework | Client Config | Server Config | |
| 116 | |---|---|---| |
| 117 | | Next.js | `sentry.client.config.ts` | `sentry.server.config.ts`, `sentry.edge.config.ts` | |
| 118 | | Nuxt | Client-side `Sentry.init` in module | Se |
People who liked this also viewed
6 picksType
- azure-diagnosticsDebug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe triage. WHEN: debug production issues, troubleshoot app service, app service high CPU, app service deploySkillsJul 2026
- systematic-debuggingUse when encountering any bug, test failure, or unexpected behavior, before proposing fixesSkillsJul 2026
- safe-debugRigor Debug / Rigor Audit skill for deep learning research work. Use when the user pastes a traceback, terminal error, CUDA OOM, checkpoint load failure, shape mismatch, NaN loss symptom, or training SkillsMay 2026
- explore-runRigor Improve / Rigor Explore run leaf skill for bounded exploratory evidence in deep learning research repositories. Use when the researcher explicitly authorizes exploratory runs such as small-subseSkillsMay 2026
- minimal-run-and-auditRigor Run skill for README-first deep learning repo reproduction. Use when the task is specifically to capture or normalize evidence from the selected smoke test or documented inference or evaluation SkillsMay 2026
- insforge-debugUse when diagnosing problems in an InsForge project — reactive failures (SDK error object, HTTP 4xx/5xx, gateway timeout 502/503/504, edge function failure or timeout, login/OAuth/auth errors, RLS denSkillsJul 2026
