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 all 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
49 changes: 47 additions & 2 deletions 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,51 @@ 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 notSupported={['browser']}>

### 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 by injecting your server's tracing information as `<meta>` tags into the HTML that's initially served to the browser. 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.

The easiest and recommended way to do this is to use the `Sentry.getTraceMetaTags()`:

```javascript {5} {filename:index.js}
function renderHtml() {
return `
<html>
<head>
${Sentry.getTraceMetaTags()}
</head>
<body>
<!-- Your HTML content -->
</body>
</html>
`;
}
```

Alternatively, if you need more control over how meta tags are generated, you can use `Sentry.getTraceData()` to get only the meta tag values and generate the meta tags yourself:

```javascript {2, 7-8} {filename:index.js}
function renderHtml() {
const metaTagValues = Sentry.getTraceData();

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

</PlatformCategorySection>

### Starting a New Trace

Available since SDK version `8.5.0`.
Expand All @@ -214,7 +259,7 @@ This means that spans or errors collected by the SDK during this new trace will

To start a new trace that remains valid throughout the duration of a callback, use `startNewTrace`:

```javascript {2-6}
```javascript {2-9}
myButton.addEventListener("click", async () => {
Sentry.startNewTrace(() => {
Sentry.startSpan(
Expand Down
Loading