Repository navigation
Distribution tracing is not working in V8.3.0 in Javascript browser CDN bundle #12222
Description
Is there an existing issue for this?
- I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
- I have reviewed the documentation https://docs.sentry.io/
- 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
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://abc@abc.ingest.us.sentry.io/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
Activity
mydea commentedon May 27, 2024
Hey,
can you try to remove the
parentSpanIsAlwaysRootSpan: falseconfig 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, notstartSpanManual, for it.an-and10 commentedon May 27, 2024
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
#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 commentedon May 27, 2024
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, useSentry.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.
3 remaining items
an-and10 commentedon Jul 7, 2024
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 commentedon Jul 8, 2024
@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 commentedon Nov 23, 2024
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 🥀