Can't record custom spans with @sentry/astro

[dowski]

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/astro

SDK Version

9.19.0

Framework Version

5.7.13

Link to Sentry event

No response

Reproduction Example/SDK Setup

Here's an Astro starter repo with the Sentry integration setup as per the instructions on the Sentry site.

https://github.com/dowski/sentry-tracing-bug

You might need your own secret+DSN configured, but after that npm run dev should let you try it out.

Steps to Reproduce

1. Create a new Astro site with npm create astro@latest
2. Follow the Sentry instructions to add Sentry w/ tracing
3. Verified that error logging works
4. Added custom trace code
5. Reloaded the page

In the console log I added, I see my span typed as SentryNonRecordingSpan. I also see a warning: "Multiple browserTracingIntegration instances are not supported."

Expected Result

My custom bar span is visible in the Sentry dashboard.

Actual Result

I see lots of Astro trace spans, but not my custom one. I've tried this on a couple different times with fresh projects and I get the same result. Here's a link to a sample trace in case you can view it internally.

https://timelinedesign.sentry.io/traces/trace/d8cc48a9f65646d2a5d64506cf7f95f4/?mode=samples&pageEnd&pageStart&project=4509334607167488&query=&sort=-span.duration&source=traces&statsPeriod=14d&table=trace&timestamp=1747426373.733

[s1gr1d]

Thanks for writing in and providing a reproduction!

I just looked at it and the SDK reached the code path in this condition:

sentry-javascript/packages/core/src/tracing/trace.ts

Line 299 in c3a9682

if (!hasSpansEnabled()) {

It should not go into this code path as tracing/spans are enabled. However, the Sentry client config is initialized too late and when loading the page, this happends:

1. Astro loads the script of the page and Sentry runs without the client options
   • this is why you see a non-recording span. Sentry thinks that your tracing is not enabled as there is no enabling option for it
2. The Sentry config is loaded
3. Sentry runs again, but with the client options

This looks like this in the HTML:

<!-- 1. Includes the content of the `script` tag of the page -->
<script type="module" src="/_astro/index.astro_astro_type_script_index_0_lang.Bcqpd90i.js">

<!-- 2. Includes the content injected via `injectScript('page', ...)` and Sentry is loaded too late -->
<script type="module" src="/_astro/page.CanSrq-7.js"></script>

Ideally, we want this:

1. Sentry is initialized
2. Astro loads with all client options