@sentry/react 11.0.0-alpha.0 → 11.0.0-alpha.2

package/build/esm/reactrouter-compat-utils/instrumentation.js

@@ -1,11 +1,11 @@
 import { WINDOW, browserTracingIntegration, startBrowserTracingPageLoadSpan, startBrowserTracingNavigationSpan } from '@sentry/browser';
-import { SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, debug, addNonEnumerableProperty, spanToJSON, getCurrentScope, getClient } from '@sentry/core';
+import { PAGELOAD_SPAN_NAME_FALLBACK, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SEMANTIC_ATTRIBUTE_SENTRY_OP, hasSpanStreamingEnabled, debug, addNonEnumerableProperty, spanToJSON, getCurrentScope, getClient, NAVIGATION_SPAN_NAME_FALLBACK } from '@sentry/core';
 import * as React from 'react';
 import { DEBUG_BUILD } from '../debug-build.js';
 import { hoistNonReactStatics } from '../hoist-non-react-statics.js';
 import { checkRouteForAsyncHandler } from './lazy-routes.js';
 import { getActiveRootSpan, setNavigationContext, clearNavigationContext, resolveRouteNameAndSource, transactionNameHasWildcard, initializeRouterUtils } from './utils.js';
-import { URL_TEMPLATE } from '@sentry/conventions/attributes';
+import { SENTRY_SEGMENT_NAME_SOURCE, SENTRY_OP, URL_TEMPLATE } from '@sentry/conventions/attributes';
 
 let _useEffect;
 let _useLocation;
@@ -112,12 +112,12 @@ function processResolvedRoutes(resolvedRoutes, parentRoute, currentLocation = nu
   }
   const targetSpan = capturedSpan ?? getActiveRootSpan();
   if (targetSpan) {
-    const spanJson = spanToJSON(targetSpan);
-    if (spanJson.timestamp) {
+    const { end_timestamp, attributes } = spanToJSON(targetSpan);
+    if (end_timestamp) {
       DEBUG_BUILD && debug.warn("[React Router] Lazy handler resolved after span ended - skipping update");
       return;
     }
-    const spanOp = spanJson.op;
+    const spanOp = attributes[SENTRY_OP];
     let location = currentLocation;
     if (!location && !capturedSpan) {
       if (typeof WINDOW !== "undefined") {
@@ -142,12 +142,11 @@ function processResolvedRoutes(resolvedRoutes, parentRoute, currentLocation = nu
   }
 }
 function updateNavigationSpan(activeRootSpan, location, allRoutes2, forceUpdate = false, matchRoutes) {
-  const spanJson = spanToJSON(activeRootSpan);
-  const currentName = spanJson.description;
+  const { name: currentName, end_timestamp, attributes } = spanToJSON(activeRootSpan);
   const hasBeenNamed = activeRootSpan?.__sentry_navigation_name_set__;
   const currentNameHasWildcard = currentName && transactionNameHasWildcard(currentName);
   const shouldUpdate = !hasBeenNamed || forceUpdate || currentNameHasWildcard;
-  if (shouldUpdate && !spanJson.timestamp) {
+  if (shouldUpdate && !end_timestamp) {
     const currentBranches = matchRoutes(allRoutes2, location);
     const [name, source] = resolveRouteNameAndSource(
       location,
@@ -158,14 +157,16 @@ function updateNavigationSpan(activeRootSpan, location, allRoutes2, forceUpdate
       _lazyRouteManifest,
       _enableAsyncRouteHandlers
     );
-    const currentSource = spanJson.data?.[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE];
+    const currentSource = attributes[SENTRY_SEGMENT_NAME_SOURCE];
     const isImprovement = name && (!currentName || // No current name - always set
     !hasBeenNamed && (currentSource !== "route" || source === "route") || // Not finalized - allow unless downgrading route→url
     currentSource !== "route" && source === "route" || // URL → route upgrade
     currentSource === "route" && source === "route" && currentNameHasWildcard);
     if (isImprovement) {
-      activeRootSpan.updateName(name);
-      activeRootSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
+      const client = getClient();
+      const isUnparameterizedStreamedNavigation = source !== "route" && !!client && hasSpanStreamingEnabled(client);
+      activeRootSpan.updateName(isUnparameterizedStreamedNavigation ? NAVIGATION_SPAN_NAME_FALLBACK : name);
+      activeRootSpan.setAttribute(SENTRY_SEGMENT_NAME_SOURCE, source);
       if (source === "route") {
         activeRootSpan.setAttribute(URL_TEMPLATE, name);
       }
@@ -177,14 +178,14 @@ function updateNavigationSpan(activeRootSpan, location, allRoutes2, forceUpdate
 }
 function setupRouterSubscription(router, routes, version, basename, activeRootSpan) {
   let isInitialPageloadComplete = false;
-  let hasSeenPageloadSpan = !!activeRootSpan && spanToJSON(activeRootSpan).op === "pageload";
+  let hasSeenPageloadSpan = !!activeRootSpan && spanToJSON(activeRootSpan).attributes[SENTRY_OP] === "pageload";
   let hasSeenPopAfterPageload = false;
   let scheduledNavigationHandler = null;
   let lastHandledPathname = null;
   router.subscribe((state) => {
     if (!isInitialPageloadComplete) {
       const currentRootSpan = getActiveRootSpan();
-      const isCurrentlyInPageload = currentRootSpan && spanToJSON(currentRootSpan).op === "pageload";
+      const isCurrentlyInPageload = currentRootSpan && spanToJSON(currentRootSpan).attributes[SENTRY_OP] === "pageload";
       if (isCurrentlyInPageload) {
         hasSeenPageloadSpan = true;
       } else if (hasSeenPageloadSpan) {
@@ -370,9 +371,11 @@ function createReactRouterV6CompatibleTracingIntegration(options, version) {
       const initPathName = WINDOW.location?.pathname;
       if (instrumentPageLoad && initPathName) {
         startBrowserTracingPageLoadSpan(client, {
-          name: initPathName,
+          // With span streaming, span names have to be low cardinality. The route is only resolved
+          // once the router renders, which updates the span name then.
+          name: hasSpanStreamingEnabled(client) ? PAGELOAD_SPAN_NAME_FALLBACK : initPathName,
           attributes: {
-            [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: "url",
+            [SENTRY_SEGMENT_NAME_SOURCE]: "url",
             [SEMANTIC_ATTRIBUTE_SENTRY_OP]: "pageload",
             [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.pageload.react.reactrouter${version ? `_v${version}` : ""}`
           }
@@ -460,8 +463,8 @@ function wrapPatchRoutesOnNavigation(opts, isMemoryRouter = false, capturedSpan)
               }
             }
             const spanJson = activeRootSpan ? spanToJSON(activeRootSpan) : void 0;
-            if (targetPath && activeRootSpan && spanJson && !spanJson.timestamp && // Span hasn't ended yet
-            spanJson.op === "navigation") {
+            if (targetPath && activeRootSpan && spanJson && !spanJson.end_timestamp && // Span hasn't ended yet
+            spanJson.attributes[SENTRY_OP] === "navigation") {
               updateNavigationSpan(
                 activeRootSpan,
                 { pathname: targetPath, search: "", hash: "", state: null, key: "default" },
@@ -486,8 +489,8 @@ function wrapPatchRoutesOnNavigation(opts, isMemoryRouter = false, capturedSpan)
           }
         }
         const spanJson = activeRootSpan ? spanToJSON(activeRootSpan) : void 0;
-        if (activeRootSpan && spanJson && !spanJson.timestamp && // Span hasn't ended yet
-        spanJson.op === "navigation") {
+        if (activeRootSpan && spanJson && !spanJson.end_timestamp && // Span hasn't ended yet
+        spanJson.attributes[SENTRY_OP] === "navigation") {
           const pathname = targetPath;
           if (pathname) {
             updateNavigationSpan(
@@ -516,7 +519,7 @@ function handleNavigation(opts) {
     return;
   }
   const activeRootSpan = getActiveRootSpan();
-  if (activeRootSpan && spanToJSON(activeRootSpan).op === "pageload" && navigationType === "POP") {
+  if (activeRootSpan && spanToJSON(activeRootSpan).attributes[SENTRY_OP] === "pageload" && navigationType === "POP") {
     return;
   }
   if ((navigationType === "PUSH" || navigationType === "POP") && branches) {
@@ -531,7 +534,7 @@ function handleNavigation(opts) {
     );
     const locationKey = computeLocationKey(location);
     const trackedNav = activeNavigationSpans.get(client);
-    const trackedSpanHasEnded = trackedNav && !trackedNav.isPlaceholder ? !!spanToJSON(trackedNav.span).timestamp : false;
+    const trackedSpanHasEnded = trackedNav && !trackedNav.isPlaceholder ? !!spanToJSON(trackedNav.span).end_timestamp : false;
     const { skip, shouldUpdate } = shouldSkipNavigation(trackedNav, locationKey, name, trackedSpanHasEnded);
     if (skip) {
       if (shouldUpdate && trackedNav) {
@@ -542,8 +545,9 @@ function handleNavigation(opts) {
             `[Tracing] Updated placeholder navigation name from "${oldName}" to "${name}" (will apply to real span)`
           );
         } else {
-          trackedNav.span.updateName(name);
-          trackedNav.span.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
+          const isUnparameterizedStreamedNavigation = source !== "route" && hasSpanStreamingEnabled(client);
+          trackedNav.span.updateName(isUnparameterizedStreamedNavigation ? NAVIGATION_SPAN_NAME_FALLBACK : name);
+          trackedNav.span.setAttribute(SENTRY_SEGMENT_NAME_SOURCE, source);
           if (source === "route") {
             trackedNav.span.setAttribute(URL_TEMPLATE, name);
           }
@@ -569,10 +573,11 @@ function handleNavigation(opts) {
     let navigationSpan;
     try {
       navigationSpan = startBrowserTracingNavigationSpan(client, {
-        name: placeholderEntry.routeName,
-        // Use placeholder's routeName in case it was updated
+        // Use placeholder's routeName in case it was updated. With span streaming, span names have to
+        // be low cardinality, so we can't fall back to the URL.
+        name: source === "route" || !hasSpanStreamingEnabled(client) ? placeholderEntry.routeName : NAVIGATION_SPAN_NAME_FALLBACK,
         attributes: {
-          [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
+          [SENTRY_SEGMENT_NAME_SOURCE]: source,
           [SEMANTIC_ATTRIBUTE_SENTRY_OP]: "navigation",
           [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.react.reactrouter${version ? `_v${version}` : ""}`,
           ...source === "route" && { [URL_TEMPLATE]: placeholderEntry.routeName }
@@ -647,8 +652,10 @@ function updatePageloadTransaction({
     );
     getCurrentScope().setTransactionName(name || "/");
     if (activeRootSpan) {
-      activeRootSpan.updateName(name);
-      activeRootSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
+      const client = getClient();
+      const isUnparameterizedStreamedPageload = source !== "route" && !!client && hasSpanStreamingEnabled(client);
+      activeRootSpan.updateName(isUnparameterizedStreamedPageload ? PAGELOAD_SPAN_NAME_FALLBACK : name);
+      activeRootSpan.setAttribute(SENTRY_SEGMENT_NAME_SOURCE, source);
       if (source === "route") {
         activeRootSpan.setAttribute(URL_TEMPLATE, name);
       }
@@ -676,7 +683,7 @@ function shouldUpdateWildcardSpanName(currentName, currentSource, newName, newSo
 }
 function tryUpdateSpanNameBeforeEnd(span, spanJson, currentName, location, routes, basename, spanType, allRoutes2) {
   try {
-    const currentSource = spanJson.data?.[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE];
+    const currentSource = spanJson.attributes[SENTRY_SEGMENT_NAME_SOURCE];
     if (currentSource === "route" && currentName && !transactionNameHasWildcard(currentName)) {
       return;
     }
@@ -696,10 +703,13 @@ function tryUpdateSpanNameBeforeEnd(span, spanJson, currentName, location, route
       _enableAsyncRouteHandlers
     );
     const isImprovement = shouldUpdateWildcardSpanName(currentName, currentSource, name, source, true);
-    const spanNotEnded = spanType === "pageload" || !spanJson.timestamp;
+    const spanNotEnded = spanType === "pageload" || !spanJson.end_timestamp;
     if (isImprovement && spanNotEnded) {
-      span.updateName(name);
-      span.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
+      const client = getClient();
+      const isUnparameterizedStreamedSpan = source !== "route" && !!client && hasSpanStreamingEnabled(client);
+      const fallbackName = spanType === "pageload" ? PAGELOAD_SPAN_NAME_FALLBACK : NAVIGATION_SPAN_NAME_FALLBACK;
+      span.updateName(isUnparameterizedStreamedSpan ? fallbackName : name);
+      span.setAttribute(SENTRY_SEGMENT_NAME_SOURCE, source);
       if (source === "route") {
         span.setAttribute(URL_TEMPLATE, name);
       }
@@ -723,8 +733,8 @@ function patchSpanEnd(span, location, routes, basename, spanType) {
     endCalled = true;
     const endTimestamp = args.length > 0 ? args[0] : Date.now() / 1e3;
     const spanJson = spanToJSON(span);
-    const currentName = spanJson.description;
-    const currentSource = spanJson.data?.[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE];
+    const currentName = spanJson.name;
+    const currentSource = spanJson.attributes[SENTRY_SEGMENT_NAME_SOURCE];
     const cleanupNavigationSpan = () => {
       const client = getClient();
       if (client && spanType === "navigation") {
@@ -759,7 +769,7 @@ function patchSpanEnd(span, location, routes, basename, spanType) {
         tryUpdateSpanNameBeforeEnd(
           span,
           updatedSpanJson,
-          updatedSpanJson.description,
+          updatedSpanJson.name,
           location,
           routes,
           basename,