Repository navigation
Custom Instrumentation is Not working with New APIs in V8 #13470
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?
Sentry Saas (sentry.io)
Which SDK are you using?
@sentry/browser
SDK Version
8.116.0
Framework Version
React SadK 8.116.0
Link to Sentry event
Reproduction Example/SDK Setup
Sentry Instrument.js file - we have added the sentry Intialization
Sentry.init({
dsn: "https://c556b54f@o3312.ingest.us.sentry.io/450888",
debug:true,
integrations: [
// See docs for support of different versions of variation of react router
// https://docs.sentry.io/platforms/javascript/guides/react/configuration/integrations/react-router/
Sentry.reactRouterV6BrowserTracingIntegration({
useEffect,
useLocation,
useNavigationType,
createRoutesFromChildren,
matchRoutes,
}),
Sentry.replayIntegration(),
],
// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for tracing.
tracesSampleRate: 1.0,
// Set tracePropagationTargets to control for which URLs trace propagation should be enabled
tracePropagationTargets: [/^\//, /^https:\/\/localhost\/api/],
// Capture Replay for 10% of all sessions,
// plus for 100% of sessions with an error
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
});
Steps to Reproduce
-
Custom Instrumentation: We are looking for custom instrumentation to determine the htp request, UI thread and others request in a single group of spans/transaction
In Version7.XX> this feature was available using startTransaction and end the transaction anywhere after custom logic of code -
In Newer version. - With startSpan, startSpanManual, or startInActiveSpan() - all these are starting the span correctly, and ending in callback - working fine,
Requirment:
We dont want to close the span immediately after callback end. To be precise, we want to have any callback as well.
Example: start the user journey span at one component
lets says Component 1 - startSpan()
But performing few actives - like filling a form of 4-5 components
Want to close this span and need to have the entire user journey - HTTP request, UI, component timing, loading images resources script ,etc loading
Closing can be at component 5 .
This we are not able to achieve as callback cannot be single-line. startIdelSpan() - this is also not working.
StartInActiveSpa ()- this works fine but do not capture any http request, resources script etc.
Componet1:
const handleAddLabelClick = () => {
console.log("handleAddLabelClick, start sentry transaction");
captureSentryObservabilityStart();
};
Component 5:
const handleSave = async () => {
// Handle Save sentry closed
captureSentryObservabilityEnd();
};
captureSentryObservabilityStart = () => {
Sentry.continueTrace({ sentryTrace: '', baggage: '' }, function (){
return Sentry.withActiveSpan(null,function(){
parentMenuClicked = Sentry.startInactiveSpan({
op: "menuclicked",
name: entityName,
attributes: {
entityName: entityName
},
forceTransaction: true,
});
});
}
captureSentryObservabilityEnd = () => {
Sentry.withActiveSpan(parentMenuClicked, function(){
childSpanOnParent = Sentry.startInactiveSpan({
name: "gridload",
description: entityPropertyName,
parentSpan: parentMenuClicked,
parentSpanId: parentMenuClicked.spanId,
op: "gridload"
});
});
}
Reference link: #12222
Expected Result
In my Transaction - it should able to track all the HTTP request , reasoucrs, script, etc
Actual Result
In my Transaction - it should able to track all the HTTP request , reasoucrs, script, etc
Activity
mydea commentedon Aug 27, 2024
So I think what I would do in this case is:
By default all new spans (e.g. http spans etc) will be attached to the currently active root span. If you want to delimit actions manually like this, I would first end the active root span to ensure we have a clean slate.
As of now, you'll need to install
@sentry/coreand importstartIdleSpanfrom there. We may hoist this so you can import this from@sentry/reacttoo. Just make sure to have the same version of@sentry/coreinstalled as@sentry/react:Then you do not need to manually attach any spans to this, anything will just go to it by default.
an-and10 commentedon Aug 27, 2024
Thanks for the update.
I tried with above approach,but idle transaction is getting closed with 1-2 seconds automatically.
It's not waiting for my manual closing. Hence it is not able to track other resources.
Please find the screenshot
mydea commentedon Aug 27, 2024
Ah, I see, that's right of course. You can extend the timeouts:
Or whatever timeouts make sense to you - the defaults are 1s / 30s / 15s. The meaning of these timeouts is:
idleTimeout: Defines for how long we wait for any child span to be started. If no child span is started in this timeframe, the idle span is ended.finalTimeout: After this time, the idle span will definitely be ended, no matter what.childSpanTimeout: The max. duration a child span may run until we end the idle spanThe reason we have these timeouts is that stuff in the browser can be hard to be certain about, e.g. http requests may hang or similar things, leading to never ending spans. But if you know what you're doing, you can safely extend these timeouts and manually end the span instead.
AbhiPrasad commentedon Nov 1, 2024
Closing this for clean-up. Please re-open if it still applies. Thank you!