Distribution tracing is not working in V8.3.0 in Javascript browser CDN bundle

[an-and10]

Is there an existing issue for this?

• [X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• [X] I have reviewed the documentation https://docs.sentry.io/
• [X] I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Self-hosted/on-premise

Which SDK are you using?

Sentry Browser CDN bundle

SDK Version

8.3.0

Framework Version

Extjs Javascript

Link to Sentry event

https://highradius-is.sentry.io/performance/trace/d4ca3de29b6f40479bd9c975e3d3ba68/?node=txn-aaa64f9318c74c3293da903ccf068c21&statsPeriod=24h&timestamp=1716726384

SDK Setup

Bundle Used:

<script src="https://browser.sentry-cdn.com/8.3.0/bundle.tracing.replay.min.js"></script>
<script src="https://browser.sentry-cdn.com/8.3.0/browserprofiling.min.js"></script>

Sentry.init({
  dsn: 'https://[email protected]/4507288901058560',
  debug: true,
  autoSessionTracking: true,
  autoPerformance: true,
  release: 'June 2024',
  enableTracing: true,
  environment: 'local',
  initialScope: {
    user: {
      username: 'sentry poc',
      id: 'sentry.poc',
      name: 'sentry poc',
    },
  },
  profilesSampleRate: 1.0,
  tracePropagationTargets: ['localhost', /^\/(?!\/)/],
  tracesSampleRate: 1.0, // Capture 100% of the transactions
  sendDefaultPii: true,
  enableLongTask: true,
  parentSpanIsAlwaysRootSpan: false,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  integrations: [
    Sentry.browserTracingIntegration({
      enableInp: true,
      instrumentNavigation: false,
      instrumentPageLoad: true,
      enableHTTPTimings: true,
    }),
    Sentry.replayIntegration({
      maskAllText: false,
      blockAllMedia: false,
      networkDetailAllowUrls: [window.location.origin],
    }),
    Sentry.browserProfilingIntegration(),
  ],
});

Steps to Reproduce

Previously in V7.116.0, distribution tracing was working and we could see the distribution of our resources in transaction performance Sentry UI. We migrated to v8.3.0 due to the profiling feature as it was not available in the older version. In the Older version, we were having custom instrumentation with startTransaction to start any user activity. Now, in the new version, somehow we can get the same kind of behavior using startSpanManual, but "operation duration" is not showing any value and its respective child and parent span is also not capturing any data in Sentry UI.

Expected Result

Previous data in Sentry UI was happening automatically and no major action was required to capture any operations. It was happening under the hood.

We are looking for the same kind of data capturing that was before in V7.116.0.

Before Result

Now in V8.3.0

Actual Result

Expecting to provide if we need to add any config to get this done.

Looking to get the same result as before

[mydea]

Hey,

can you try to remove the parentSpanIsAlwaysRootSpan: false config and see if that has an effect? (In the before scenario, everything was also attached to the root span, so that should be fine).

Also, could you share how you now (on v8) create the gridload span? You should probably use startInactiveSpan, not startSpanManual, for it.

[an-and10]

Hi , Thanks for the response. ParentSpanIsAlwaysRootSpan: doesn't show any impact, issue still persist.

In short: if any custom transaction is started, no tracing is happening Only tracing till pageload is getting captured henceforth no action is triggering.

Here is the code snippet before and after V7.116.0 startParentSpan = function (entityName, entityPropertyName) {     parentMenuClicked = Sentry.startTransaction({         op: menuclicked,         name: entityName,         tags: {             entityName: entityName         }     });

    Sentry.configureScope(function (scope) {         scope.setSpan(parentMenuClicked);     }); }

startChildOnParentSpan = function (entityName, entityPropertyName, operationType, operationDescriptions) {         if (parentMenuClicked) {                 childSpanOnParent = cms.collections.clsObservability[entityName].startChild({             op: operationType,             description: operationDescriptions,             parentSpanId: parentMenuClicked.spanId,             parentSpan: parentMenuClicked         });     } }

In Version 8.3.0 There is no provision to keep seperate root span hence followed this link to setup rootspan for my transaction https://github.com/getsentry/sentry-javascript/issues/12116

Here is code snippet startParentSpan = function (entityName, entityPropertyName) {     console.log("Current ongoing Transaction :" + entityName);     Sentry.continueTrace({ sentryTrace: '', baggage: '' }, function (){         return Sentry.withActiveSpan(null,function(){             parentMenuClicked = Sentry.startInactiveSpan({                 op: "menuclicked",                 name: entityName,                 attributes: {                     entityName: entityName                 },                 forceTransaction: true,             });         });     });

}

startChildOnParentSpan = function (entityName, entityPropertyName) {         if (parentMenuClicked) {                         Sentry.withActiveSpan(parentMenuClicked, function(){                 childSpanOnParent = Sentry.startInactiveSpan({                     name: "gridload",                     description: entityPropertyName,                     parentSpan: parentMenuClicked,                     parentSpanId: parentMenuClicked.spanId,                     op: "gridload"                 });             });     } }

[mydea]

Hmm I see.

So http.client spans will always be attached to the current active span. In your case, there are no active spans, because you are doing startInactiveSpan.

What I would try to do is, instead of startInactiveSpan, use Sentry.startIdleSpan(). This will start an idle span with the given data that will be made active and will auto-end after some time of inactivity. You can still manually end this span, too, if needed. With this, any span http.client span that is ongoing will be attached to this instead.

WARNING: You'll have to make sure to end spans accordingly to prevent there from being two active idle spans at the same time. Othewise, weird things may happen, because the browser cannot know where children should go correctly.

Also, only use idle spans for the top-level spans, not for children.

[getsantry[bot]]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

[an-and10]

Hi ,I tried this approach in javascript, but didnot worked So integrated the same in react project and need to have custom requirement. I tried with idlespan , still it's not tracing anything under the transaction Here I have pasted my code and loggers error

const startTransaction = (eventName, entityName, eventStatus, additionalTags) => {         autonomousObservability[key] = Sentry.startInactiveSpan({             op: eventName,             name: key,             tags: {                 entityName: entityName,                 defaultTagsForTransactions: defaultTagsForTransactions             }         }); }

const completeTransaction = (eventName, entityName, customAllEvent) => {     if (autonomousObservability[key]) {         autonomousObservability[key].end();     } };

Loggers from browser Sentry Logger [log]: [Tracing] Transaction: cancelled -> since tab moved to the background, op: navigation logger.js:84 Sentry Logger [log]: [Tracing] finishing IdleTransaction 2024-07-07T12:44:44.194Z navigation logger.js:84 Sentry Logger [log]: [Tracing] Adding & adjusting spans using Performance API logger.js:84 Sentry Logger [log]: [Tracing] cancelling span since transaction ended early {   "data": {     "sentry.origin": "manual",     "sentry.op": "userJourney"   },   "description": "AUTONOMOUS-InAppCalling",   "op": "userJourney",   "parent_span_id": "b5d40725392f7d33",   "span_id": "b0014c337884955a",   "start_timestamp": 1720356279.8248,   "status": "cancelled",   "tags": {     "entityName": "InAppCalling",     "defaultTagsForTransactions": {       "accountId": "23412",       "accountName": "Brightstar",       "userId": 12235,       "id": "12167::4310"     }   },   "timestamp": 1720356284.1943,   "trace_id": "e2561cd928b14f75a57ed347f795c9ce",   "origin": "manual" }

Even before calling complete transaction, it's getting cancelled immediately and not having any http.cline and ui trace.

[lforst]

@an-and10 would you mind sharing what exactly you're doing? We can't fully gauge the issue from the logs you shared. Thanks!

[getsantry[bot]]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀