Skip to content

feat(javascript): Add documentation for injecting Html <meta> tags #10926

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Aug 14, 2024
Merged

feat(javascript): Add documentation for injecting Html <meta> tags #10926

Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8737c61
feat(node): Add documentation for `getMetaTagValues` function
Lms24 Jul 31, 2024
a3ebd81
slight wording adjustment
Lms24 Jul 31, 2024
dcf6b06
Apply suggestions from code review
Lms24 Aug 6, 2024
5f49365
Update platform-includes/distributed-tracing/custom-instrumentation/j…
Lms24 Aug 6, 2024
483def4
update for new APIs
Lms24 Aug 6, 2024
c750e4e
supporter->notSupported
Lms24 Aug 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 41 additions & 1 deletion platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ In this example, we create a new transaction that is attached to the trace speci

</PlatformCategorySection>

### Inject Tracing Information to Outgoing Requests
### Inject Tracing Information into Outgoing Requests

For distributed tracing to work, the two headers that you extracted and stored in the active root span, `sentry-trace` and `baggage`, must be added to outgoing HTTP requests.

Expand Down Expand Up @@ -205,6 +205,46 @@ In this example, tracing information is propagated to the project running at `ht

The two services are now connected with your custom distributed tracing implementation.

<PlatformCategorySection supported={['server', 'serverless']}>

### Injecting Tracing Information into HTML

If you're server-side rendering HTML and you use a Sentry SDK in your browser application, you can connect the backend and frontend traces.
You can do this by injecting your server's tracing information `<meta>` tags into the HTML that's initially served to the client.
When the frontend SDK is initialized, it will automatically pick up the tracing information from the `<meta>` tags and continue the trace.
Note that your browser SDK needs to register `browserTracingIntegration` for this to work.

```javascript
function renderHtml() {
const metaTagValues = Sentry.getMetaTagValues(
Sentry.getCurrentScope(),
Sentry.getCurrentSpan(),
Sentry.getClient()
);

return `
<html>
<head>
<meta name="sentry-trace" content="${metaTagValues["sentry-trace"]}">
<meta name="baggage" content="${metaTagValues.baggage}">
</head>
<body>
<!-- Your HTML content -->
</body>
</html>
`;
}
```

<Note>

This setup is only required if you have a custom SSR or HTML page generation setup.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we avoid showing this note, and simply only show this whole section for relevant SDKs? So hide it for next, remix etc?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah let's try this first. We can always expand the allowlist if users are asking for it.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, updated to notSupported=['browser'] which makes this section also dissappear for meta framework SDKs

c750e4e

If you're using a meta framework like Next.js, the respective Sentry SDK already takes care of setting the tracing information automatically.

</Note>

</PlatformCategorySection>

### Starting a New Trace

Available since SDK version `8.5.0`.
Expand Down
Loading