Use different otel endpoint when request contains the synthetic_request=true header

Author: jordibisbal8

src/frontend/pages/_document.tsx

@@ -3,16 +3,9 @@
 
 import Document, { DocumentContext, Html, Head, Main, NextScript } from 'next/document';
 import { ServerStyleSheet } from 'styled-components';
+import {context, propagation} from "@opentelemetry/api";
 
-const { ENV_PLATFORM, WEB_OTEL_SERVICE_NAME, PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT } = process.env;
-
-const envString = `
-window.ENV = {
-  NEXT_PUBLIC_PLATFORM: '${ENV_PLATFORM}',
-  NEXT_PUBLIC_OTEL_SERVICE_NAME: '${WEB_OTEL_SERVICE_NAME}',
-  NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT: '${PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT}',
-};
-`;
+const { ENV_PLATFORM, WEB_OTEL_SERVICE_NAME, PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT, OTEL_COLLECTOR_NAME} = process.env;
 
 export default class MyDocument extends Document<{ envString: string }> {
   static async getInitialProps(ctx: DocumentContext) {
@@ -26,6 +19,19 @@ export default class MyDocument extends Document<{ envString: string }> {
         });
 
       const initialProps = await Document.getInitialProps(ctx);
+      const baggage = propagation.getBaggage(context.active());
+      const isSyntheticRequest = baggage?.getEntry('synthetic_request')?.value === 'true';
+
+      const otlpTracesEndpoint = isSyntheticRequest
+          ? `http://${OTEL_COLLECTOR_NAME}:4318/v1/traces`
+          : PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT;
+
+      const envString = `
+        window.ENV = {
+          NEXT_PUBLIC_PLATFORM: '${ENV_PLATFORM}',
+          NEXT_PUBLIC_OTEL_SERVICE_NAME: '${WEB_OTEL_SERVICE_NAME}',
+          NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT: '${otlpTracesEndpoint}',
+        };`;
       return {
         ...initialProps,
         styles: [initialProps.styles, sheet.getStyleElement()],