From 82e03978b89938219958032efb1448cc76baa181 Mon Sep 17 00:00:00 2001 From: Saumit Date: Sat, 27 Sep 2025 02:14:26 +0530 Subject: Initial snapshot - OpenTelemetry demo 2.1.3 -f --- src/frontend/utils/telemetry/FrontendTracer.ts | 72 ++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 src/frontend/utils/telemetry/FrontendTracer.ts (limited to 'src/frontend/utils/telemetry/FrontendTracer.ts') diff --git a/src/frontend/utils/telemetry/FrontendTracer.ts b/src/frontend/utils/telemetry/FrontendTracer.ts new file mode 100644 index 0000000..d52412c --- /dev/null +++ b/src/frontend/utils/telemetry/FrontendTracer.ts @@ -0,0 +1,72 @@ +// Copyright The OpenTelemetry Authors +// SPDX-License-Identifier: Apache-2.0 + +import { CompositePropagator, W3CBaggagePropagator, W3CTraceContextPropagator } from '@opentelemetry/core'; +import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; +import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'; +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { resourceFromAttributes, detectResources } from '@opentelemetry/resources'; +import { browserDetector } from '@opentelemetry/opentelemetry-browser-detector'; +import { ATTR_SERVICE_NAME } from '@opentelemetry/semantic-conventions'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; +import { SessionIdProcessor } from './SessionIdProcessor'; + +const { + NEXT_PUBLIC_OTEL_SERVICE_NAME = '', + NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT = '', + IS_SYNTHETIC_REQUEST = '', +} = typeof window !== 'undefined' ? window.ENV : {}; + +const FrontendTracer = async () => { + const { ZoneContextManager } = await import('@opentelemetry/context-zone'); + + let resource = resourceFromAttributes({ + [ATTR_SERVICE_NAME]: NEXT_PUBLIC_OTEL_SERVICE_NAME, + }); + const detectedResources = detectResources({detectors: [browserDetector]}); + resource = resource.merge(detectedResources); + + const provider = new WebTracerProvider({ + resource, + spanProcessors: [ + new SessionIdProcessor(), + new BatchSpanProcessor( + new OTLPTraceExporter({ + url: NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT || 'http://localhost:4318/v1/traces', + }), + { + scheduledDelayMillis: 500, + } + ), + ], + }); + + const contextManager = new ZoneContextManager(); + + provider.register({ + contextManager, + propagator: new CompositePropagator({ + propagators: [ + new W3CBaggagePropagator(), + new W3CTraceContextPropagator()], + }), + }); + + registerInstrumentations({ + tracerProvider: provider, + instrumentations: [ + getWebAutoInstrumentations({ + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: /.*/, + clearTimingResources: true, + applyCustomAttributesOnSpan(span) { + span.setAttribute('app.synthetic_request', IS_SYNTHETIC_REQUEST); + }, + }, + }), + ], + }); +}; + +export default FrontendTracer; -- cgit v1.2.3