From b4195c92ebee52f118e29c35f3a72c66ff50a1e0 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Mon, 23 May 2022 11:05:00 +0200 Subject: [PATCH 1/4] ref(javascript): Adust docs for dealing with baggage headers (CORS and meta tags) --- .../performance/connect-services/javascript.mdx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/includes/performance/connect-services/javascript.mdx b/src/includes/performance/connect-services/javascript.mdx index 806c902c7984d..02836d8935585 100644 --- a/src/includes/performance/connect-services/javascript.mdx +++ b/src/includes/performance/connect-services/javascript.mdx @@ -1,30 +1,30 @@ ### Navigation and Other XHR Requests -For traces that begin in the front end, any requests made (and any requests your backend makes as a result) are linked through the request header `sentry-trace`. +For traces that begin in the front end, any requests made (and any requests your backend makes as a result) are linked through the request headers `sentry-trace` and `baggage`. The `sentry-trace` header holds information on the trace to identify it while the [W3C compliant](https://www.w3.org/TR/baggage/) `baggage` header contains additional trace-related data that isused for trace-based sampling. -All of Sentry's tracing-related integrations (`BrowserTracing`, `Http`, and `Express`), as well as the Next.JS SDK, either generate or pick up and propagate the trace header automatically, as appropriate, for all transactions and spans that they generate. +All of Sentry's tracing-related integrations (`BrowserTracing`, `Http`, and `Express`), as well as the Next.JS SDK, either generate or pick up and propagate the trace headers automatically, as appropriate, for all transactions and spans that they generate. -The JavaScript SDK will only attach the trace header to outgoing HTTP requests for which the destination is a substring or regex match to the tracingOrigins list. +The JavaScript SDK will only attach the trace headers to outgoing HTTP requests for which the destination is a substring or regex match to the tracingOrigins list. -You'll need to configure your web server [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers) to allow the `sentry-trace` header. The configuration might look like `"Access-Control-Allow-Headers: sentry-trace"`, but the configuration depends on your setup. If you don't allow the `sentry-trace` header, the request might be blocked. +You'll need to configure your web server [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers) to allow the `sentry-trace` and `baggage` headers. The configuration might look like `"Access-Control-Allow-Headers: sentry-trace"` and `"Access-Control-Allow-Headers: baggage"`, but the configuration depends on your setup. If you don't allow the `sentry-trace` and `baggage` headers, the request might be blocked. ### Pageload -For traces that begin in your backend, you can connect the automatically-generated `pageload` transaction on the frontend with the request transaction that serves the page on the backend. Because JavaScript code running in a browser cannot read the response headers of the current page, the `trace_id` must be transmitted in the response itself, specifically in a `` tag in the `` of the HTML sent from your backend. +For traces that begin in your backend, you can connect the automatically-generated `pageload` transaction on the frontend with the request transaction that serves the page on the backend. Because JavaScript code running in a browser cannot read the response headers of the current page, the trace data must be transmitted in the response itself, specifically in a `` tag in the `` of the HTML sent from your backend. ```html + ``` -The `name` attribute must be the string `"sentry-trace"` and the `content` attribute must be generated by your backend Sentry SDK using `span.toSentryTrace()` (or equivalent, depending on the backend platform). This guarantees that a new and unique value will be generated for each request. - +The `name` attributes must be the strings `"sentry-trace"` and `"baggage"` and the `content` attributes must be generated by your backend Sentry SDK. For `sentry-trace` use `span.toSentryTrace()` (or equivalent, depending on the backend platform). This guarantees that a new and unique value will be generated for each request. For `baggage` use `serializeBaggage(span.getBaggage())`. The `span.toSentryTrace()` was previously called `span.toTraceparent()`, so that's what you may find depending on the SDK and version. @@ -33,4 +33,4 @@ The `span.toSentryTrace()` was previously called `span.toTraceparent()`, so that The `span` reference is either the transaction that serves the HTML or any of its child spans. It defines the parent of the `pageload` transaction. -Once the data is included in the `` tag, our `BrowserTracing` integration will pick it up automatically and link it to the transaction generated on pageload. (Note that it will not be linked to automatically-generated `navigation` transactions — that is, those that don't require a full page reload. Each of those will be the result of a different request transaction on the backend and, therefore, should have a unique `trace_id`.) +Once the data is included in the `` tags, our `BrowserTracing` integration will pick them up automatically and link them to the transaction generated on pageload. (Note that they will not be linked to automatically-generated `navigation` transactions — that is, those that don't require a full page reload. Each of those will be the result of a different request transaction on the backend and, therefore, should have a unique `trace_id`.) From 349bf729dc54836c315b25f3d18df1053fe0a1de Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Mon, 23 May 2022 11:17:40 +0200 Subject: [PATCH 2/4] add note about baggage not yet being finalized --- src/includes/performance/connect-services/javascript.mdx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/includes/performance/connect-services/javascript.mdx b/src/includes/performance/connect-services/javascript.mdx index 02836d8935585..6b6935df3de6a 100644 --- a/src/includes/performance/connect-services/javascript.mdx +++ b/src/includes/performance/connect-services/javascript.mdx @@ -2,6 +2,12 @@ For traces that begin in the front end, any requests made (and any requests your backend makes as a result) are linked through the request headers `sentry-trace` and `baggage`. The `sentry-trace` header holds information on the trace to identify it while the [W3C compliant](https://www.w3.org/TR/baggage/) `baggage` header contains additional trace-related data that isused for trace-based sampling. + + +The `baggage` header was added with version 7 of the Sentry Javascript SDK and is not yet standardized across other Sentry SDKs. It is part of an ongoing effort of creating a more frictionless and targeted sapmling approach and its content is subject to change. + + + All of Sentry's tracing-related integrations (`BrowserTracing`, `Http`, and `Express`), as well as the Next.JS SDK, either generate or pick up and propagate the trace headers automatically, as appropriate, for all transactions and spans that they generate. The JavaScript SDK will only attach the trace headers to outgoing HTTP requests for which the destination is a substring or regex match to the tracingOrigins list. From d3d662031fc0cff228019fcb60006eccfd01d4f3 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Tue, 24 May 2022 09:48:28 +0200 Subject: [PATCH 3/4] Apply suggestions from code review Co-authored-by: Luca Forstner --- src/includes/performance/connect-services/javascript.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/includes/performance/connect-services/javascript.mdx b/src/includes/performance/connect-services/javascript.mdx index 6b6935df3de6a..73b6617e88d14 100644 --- a/src/includes/performance/connect-services/javascript.mdx +++ b/src/includes/performance/connect-services/javascript.mdx @@ -1,10 +1,10 @@ ### Navigation and Other XHR Requests -For traces that begin in the front end, any requests made (and any requests your backend makes as a result) are linked through the request headers `sentry-trace` and `baggage`. The `sentry-trace` header holds information on the trace to identify it while the [W3C compliant](https://www.w3.org/TR/baggage/) `baggage` header contains additional trace-related data that isused for trace-based sampling. +For traces that begin in the front end, any requests made (and any requests your backend makes as a result) are linked through the request headers `sentry-trace` and `baggage`. The `sentry-trace` header holds information for identifying the trace, while the [W3C compliant](https://www.w3.org/TR/baggage/) `baggage` header contains additional trace-related data that is used for trace-based sampling. -The `baggage` header was added with version 7 of the Sentry Javascript SDK and is not yet standardized across other Sentry SDKs. It is part of an ongoing effort of creating a more frictionless and targeted sapmling approach and its content is subject to change. +The `baggage` header was added with version 7 of the Sentry Javascript SDK and is not yet standardized across other Sentry SDKs. It is part of an ongoing effort to create a more frictionless and targeted sampling approach, and its content is subject to change. @@ -18,7 +18,7 @@ You'll need to configure your web server [CORS](https://developer.mozilla.org/en ### Pageload -For traces that begin in your backend, you can connect the automatically-generated `pageload` transaction on the frontend with the request transaction that serves the page on the backend. Because JavaScript code running in a browser cannot read the response headers of the current page, the trace data must be transmitted in the response itself, specifically in a `` tag in the `` of the HTML sent from your backend. +For traces that begin in your backend, you can connect the automatically-generated `pageload` transaction on the frontend with the request transaction that serves the page on the backend. Because JavaScript code running in a browser cannot read the response headers of the current page, the trace data must be transmitted in the response itself, specifically in `` tags in the `` of the HTML sent from your backend. ```html From f65f2686783211f652bb10468bb4cc1fd0699ebd Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Mon, 30 May 2022 14:30:11 +0200 Subject: [PATCH 4/4] Apply suggestions from code review Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com> --- src/includes/performance/connect-services/javascript.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/includes/performance/connect-services/javascript.mdx b/src/includes/performance/connect-services/javascript.mdx index 73b6617e88d14..7b4865341ad64 100644 --- a/src/includes/performance/connect-services/javascript.mdx +++ b/src/includes/performance/connect-services/javascript.mdx @@ -1,4 +1,4 @@ -### Navigation and Other XHR Requests +## Navigation and Other XHR Requests For traces that begin in the front end, any requests made (and any requests your backend makes as a result) are linked through the request headers `sentry-trace` and `baggage`. The `sentry-trace` header holds information for identifying the trace, while the [W3C compliant](https://www.w3.org/TR/baggage/) `baggage` header contains additional trace-related data that is used for trace-based sampling. @@ -16,7 +16,7 @@ The JavaScript SDK will only attach the trace headers to outgoing HTTP requests You'll need to configure your web server [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers) to allow the `sentry-trace` and `baggage` headers. The configuration might look like `"Access-Control-Allow-Headers: sentry-trace"` and `"Access-Control-Allow-Headers: baggage"`, but the configuration depends on your setup. If you don't allow the `sentry-trace` and `baggage` headers, the request might be blocked. -### Pageload +## Pageload For traces that begin in your backend, you can connect the automatically-generated `pageload` transaction on the frontend with the request transaction that serves the page on the backend. Because JavaScript code running in a browser cannot read the response headers of the current page, the trace data must be transmitted in the response itself, specifically in `` tags in the `` of the HTML sent from your backend. @@ -30,7 +30,7 @@ For traces that begin in your backend, you can connect the automatically-generat ``` -The `name` attributes must be the strings `"sentry-trace"` and `"baggage"` and the `content` attributes must be generated by your backend Sentry SDK. For `sentry-trace` use `span.toSentryTrace()` (or equivalent, depending on the backend platform). This guarantees that a new and unique value will be generated for each request. For `baggage` use `serializeBaggage(span.getBaggage())`. +The `name` attributes must be the strings `"sentry-trace"` and `"baggage"` and the `content` attributes must be generated by your backend Sentry SDK. For `sentry-trace`, use `span.toSentryTrace()` (or equivalent, depending on the backend platform). This guarantees that a new and unique value will be generated for each request. For `baggage`, use `serializeBaggage(span.getBaggage())`. The `span.toSentryTrace()` was previously called `span.toTraceparent()`, so that's what you may find depending on the SDK and version. @@ -39,4 +39,4 @@ The `span.toSentryTrace()` was previously called `span.toTraceparent()`, so that The `span` reference is either the transaction that serves the HTML or any of its child spans. It defines the parent of the `pageload` transaction. -Once the data is included in the `` tags, our `BrowserTracing` integration will pick them up automatically and link them to the transaction generated on pageload. (Note that they will not be linked to automatically-generated `navigation` transactions — that is, those that don't require a full page reload. Each of those will be the result of a different request transaction on the backend and, therefore, should have a unique `trace_id`.) +Once the data is included in the `` tags, our `BrowserTracing` integration will pick them up automatically and link them to the transaction generated on pageload. Note that they will not be linked to automatically-generated `navigation` transactions — that is, those that don't require a full page reload. Each of those will be the result of a different request transaction on the backend and, therefore, should have a unique `trace_id`.