From 8737c614dbbe3f1a14377f317490eb200e17c196 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Wed, 31 Jul 2024 15:38:28 +0200 Subject: [PATCH 1/6] feat(node): Add documentation for `getMetaTagValues` function --- .../custom-instrumentation/javascript.mdx | 41 ++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx b/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx index f2184f33aefde..a7393f153e8ad 100644 --- a/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx +++ b/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx @@ -169,7 +169,7 @@ In this example, we create a new transaction that is attached to the trace speci -### 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. @@ -205,6 +205,45 @@ 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. + + +### 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 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 HTML 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 ` + + + + + + + + + + `; +} +``` + + + +This setup is only required if you have a custom SSR or HTML page generation setup. +If you're using a meta framework like Next.js, the respective Sentry SDK already takes care of setting the tracing information automatically. + + + + + ### Starting a New Trace Available since SDK version `8.5.0`. From a3ebd81f69c9e5fc92749a5c259ae5ee6d6d3126 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Wed, 31 Jul 2024 15:44:36 +0200 Subject: [PATCH 2/6] slight wording adjustment --- .../custom-instrumentation/javascript.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx b/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx index a7393f153e8ad..7315836772742 100644 --- a/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx +++ b/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx @@ -209,8 +209,9 @@ The two services are now connected with your custom distributed tracing implemen ### 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 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 HTML and continue the trace. +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 `` 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 `` tags and continue the trace. Note that your browser SDK needs to register `browserTracingIntegration` for this to work. ```javascript From dcf6b067784a5a3b3a080168986a64bf9975b140 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Tue, 6 Aug 2024 12:47:01 +0200 Subject: [PATCH 3/6] Apply suggestions from code review Co-authored-by: Liza Mock Co-authored-by: Francesco Novy --- .../custom-instrumentation/javascript.mdx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx b/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx index 7315836772742..aaab965cbf98f 100644 --- a/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx +++ b/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx @@ -209,16 +209,13 @@ The two services are now connected with your custom distributed tracing implemen ### 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 `` 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 `` tags and continue the trace. -Note that your browser SDK needs to register `browserTracingIntegration` for this to work. +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 `` 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 `` 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.getActiveSpan(), Sentry.getClient() ); From 5f49365767c0d107893d8eebaf11064d30cc3d92 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Tue, 6 Aug 2024 12:47:25 +0200 Subject: [PATCH 4/6] Update platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx --- .../distributed-tracing/custom-instrumentation/javascript.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx b/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx index aaab965cbf98f..f71a19e860381 100644 --- a/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx +++ b/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx @@ -209,7 +209,7 @@ The two services are now connected with your custom distributed tracing implemen ### 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 `` 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 `` tags and continue the trace. Note, that your browser SDK needs to register `browserTracingIntegration` for this to work. +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 `` 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 `` tags and continue the trace. Note, that your browser SDK needs to register `browserTracingIntegration` for this to work. ```javascript function renderHtml() { From 483def4f2d95a7002fc23f4ad7f70203ba95b9d0 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Tue, 6 Aug 2024 13:05:36 +0200 Subject: [PATCH 5/6] update for new APIs --- .../custom-instrumentation/javascript.mdx | 38 +++++++++++-------- 1 file changed, 23 insertions(+), 15 deletions(-) diff --git a/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx b/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx index f71a19e860381..72863b1759633 100644 --- a/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx +++ b/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx @@ -209,21 +209,16 @@ The two services are now connected with your custom distributed tracing implemen ### 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 `` 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 `` tags and continue the trace. Note, that your browser SDK needs to register `browserTracingIntegration` for this to work. +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 `` 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 `` 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.getActiveSpan(), - Sentry.getClient() - ); +The easiest and recommended way to do this is to use the `Sentry.getTraceMetaTags()`: +```javascript {5} {filename:index.js} +function renderHtml() { return ` - - + ${Sentry.getTraceMetaTags()} @@ -233,12 +228,25 @@ function renderHtml() { } ``` - +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: -This setup is only required if you have a custom SSR or HTML page generation setup. -If you're using a meta framework like Next.js, the respective Sentry SDK already takes care of setting the tracing information automatically. +```javascript {2, 7-8} {filename:index.js} +function renderHtml() { + const metaTagValues = Sentry.getTraceData(); - + return ` + + + + + + + + + + `; +} +``` @@ -251,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( From c750e4ec874762e7689b6bdbdca5130827bc5f1e Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Tue, 6 Aug 2024 13:22:09 +0200 Subject: [PATCH 6/6] supporter->notSupported --- .../distributed-tracing/custom-instrumentation/javascript.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx b/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx index 72863b1759633..a27adc4b2cd0a 100644 --- a/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx +++ b/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx @@ -205,7 +205,7 @@ 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. - + ### Injecting Tracing Information into HTML