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
10.53.1
Framework Version
Astro 6.3.5
Link to Sentry event
No response
Reproduction Example/SDK Setup
Github repo with a reproduction: https://github.com/angelikatyborska/astro-sentry-meta-tag-insertion-bug
Steps to Reproduce
- I am using Astro Starlight with its Code component. This component takes the content of the code block and duplicates it in the data attribute
data-code so that the "copy code" button can read from that attribute.
- My project showcases code snippets that represent full HTML pages, containing
<head> tags in its content, and as a result, in the data-code attribute value.
- @sentry/astro seems to do some sort of global replace of all
<head> strings to append a <meta name="sentry-route-name"...> tag which is necessary in the page's real head, but not anywhere in it's body.
Expected Result
Using @sentry/astro should not modify markup that is completely unrelated to the library's functioning.
Actual Result
Using @sentry/astro breaks the markup of my Astro Starlight code component.
This is a HTML snippet of the above component as it is rendered when Sentry is not included in the project:
<button title="Copy to clipboard" data-copied="Copied!" data-code="<!DOCTYPE html>�<html>� <head>� <meta charset="UTF-8">�<title>{% block title %}Welcome to Storyblok!{% endblock %}</title>�� {% block stylesheets %}� {% endblock %}� {% block javascripts %}� {% endblock %}� </head>� <body>� <div class="container">� {% block body %}{% endblock %}� </div>� </body>�</html>"><div></div></button>Same component snippet with Sentry included in the project. Note how it starts to differ after the <head> string in the data-code attribute.
<button title="Copy to clipboard" data-copied="Copied!" data-code="<!DOCTYPE html>�<html>� <head><meta name="sentry-route-name" content="%2F%5B...slug%5D"/>� <meta charset="UTF-8">�<title>{% block title %}Welcome to Storyblok!{% endblock %}</title>�� {% block stylesheets %}� {% endblock %}� {% block javascripts %}� {% endblock %}� </head>� <body>� <div class="container">� {% block body %}{% endblock %}� </div>� </body>�</html>"><div></div></button>Please refer to my reproduction repository to see visually how this invalid HTML breaks my page.
Additional Context
No response
Priority
React with 👍 to help prioritize this issue. Please use comments to provide useful context, avoiding +1 or me too, to help us triage it.
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
10.53.1
Framework Version
Astro 6.3.5
Link to Sentry event
No response
Reproduction Example/SDK Setup
Github repo with a reproduction: https://github.com/angelikatyborska/astro-sentry-meta-tag-insertion-bug
Steps to Reproduce
data-codeso that the "copy code" button can read from that attribute.<head>tags in its content, and as a result, in thedata-codeattribute value.<head>strings to append a<meta name="sentry-route-name"...>tag which is necessary in the page's real head, but not anywhere in it's body.Expected Result
Using @sentry/astro should not modify markup that is completely unrelated to the library's functioning.
Actual Result
Using @sentry/astro breaks the markup of my Astro Starlight code component.
This is a HTML snippet of the above component as it is rendered when Sentry is not included in the project:
Same component snippet with Sentry included in the project. Note how it starts to differ after the
<head>string in thedata-codeattribute.Please refer to my reproduction repository to see visually how this invalid HTML breaks my page.
Additional Context
No response
Priority
React with 👍 to help prioritize this issue. Please use comments to provide useful context, avoiding
+1orme too, to help us triage it.