Can't record custom spans with @sentry/astro #16316
Comments
|
Thanks for writing in and providing a reproduction! I just looked at it and the SDK reached the code path in this condition: 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:
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:
|
|
Thanks for the investigation, @s1gr1d! Can you suggest a workaround for the time being? |
|
@dowski I took another look at your repro to find a workaround. Astro takes the place where you add your CauseOriginal code<script>
import * as Sentry from "@sentry/astro";
Sentry.startSpan({ name: "Bar span", op: "bar" }, (span) => {
...
});
</script>
<Layout>
<button id="error-button">Throw test error</button>
<script is:inline>
function handleClick() {
throw new Error("This is a test error");
}
document
.querySelector("#error-button")
.addEventListener("click", handleClick);
</script>
<Welcome />
</Layout>leads to this rendered html 
As you can see, the script tag is really outside of the main SolutionTo fix this, I recommend you move your Here's the simplest fix I could find: <Layout>
<script>
import * as Sentry from "@sentry/astro";
Sentry.startSpanManual({ name: "Bar span", op: "bar" }, (span) => {
...
});
</script>
<button id="error-button">Throw test error</button>
<script is:inline>
function handleClick() {
throw new Error("This is a test error");
}
document
.querySelector("#error-button")
.addEventListener("click", handleClick);
</script>
<Welcome />
</Layout>Which leads to a correct script load order: 
side note: There are two things that regularly trip me up when working with Astro. Just putting them here as a reminder, mostly for myself but maybe it's also helpful context:
|
Is there an existing issue for this?
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 devshould let you try it out.Steps to Reproduce
npm create astro@latestIn 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
barspan 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×tamp=1747426373.733
The text was updated successfully, but these errors were encountered: