diff options
| author | Saumit <justsaumit@protonmail.com> | 2025-09-27 02:14:26 +0530 |
|---|---|---|
| committer | Saumit <justsaumit@protonmail.com> | 2025-09-27 02:14:26 +0530 |
| commit | 82e03978b89938219958032efb1448cc76baa181 (patch) | |
| tree | 626f3e54d52ecd49be0ed3bee30abacc0453d081 /src/frontend/pages/_document.tsx | |
Initial snapshot - OpenTelemetry demo 2.1.3 -f
Diffstat (limited to 'src/frontend/pages/_document.tsx')
| -rw-r--r-- | src/frontend/pages/_document.tsx | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/src/frontend/pages/_document.tsx b/src/frontend/pages/_document.tsx new file mode 100644 index 0000000..8a68bc0 --- /dev/null +++ b/src/frontend/pages/_document.tsx @@ -0,0 +1,65 @@ +// Copyright The OpenTelemetry Authors +// SPDX-License-Identifier: Apache-2.0 + +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, OTEL_COLLECTOR_HOST} = process.env; + +export default class MyDocument extends Document<{ envString: string }> { + static async getInitialProps(ctx: DocumentContext) { + const sheet = new ServerStyleSheet(); + const originalRenderPage = ctx.renderPage; + + try { + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: App => props => sheet.collectStyles(<App {...props} />), + }); + + 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_HOST}: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}', + IS_SYNTHETIC_REQUEST: '${isSyntheticRequest}', + };`; + return { + ...initialProps, + styles: [initialProps.styles, sheet.getStyleElement()], + envString, + }; + } finally { + sheet.seal(); + } + } + + render() { + return ( + <Html> + <Head> + <link rel="preconnect" href="https://fonts.googleapis.com" /> + <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" /> + <link + href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" + rel="stylesheet" + /> + </Head> + <body> + <Main /> + <script dangerouslySetInnerHTML={{ __html: this.props.envString }}></script> + <NextScript /> + </body> + </Html> + ); + } +} |