[frontend] update browser tracer provider config (#2092)

* updated deprecated calls

* remove deprecated calls

Author: puckpuck

CHANGELOG.md

@@ -13,6 +13,8 @@ the release.
   ([#2072](https://github.com/open-telemetry/opentelemetry-demo/pull/2072))
 * [grafana] Update dashboards with service map
   ([#2085](https://github.com/open-telemetry/opentelemetry-demo/pull/2085))
+* [frontend] Update OpenTelemetry Browser SDK initialization
+  ([#2092](https://github.com/open-telemetry/opentelemetry-demo/pull/2092))
 
 ## 2.0.0
 

src/frontend/utils/telemetry/FrontendTracer.ts

@@ -7,46 +7,49 @@ import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
 import { registerInstrumentations } from '@opentelemetry/instrumentation';
 import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
 import { Resource, browserDetector } from '@opentelemetry/resources';
-import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
+import { SEMRESATTRS_SERVICE_NAME } from '@opentelemetry/semantic-conventions';
 import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
 import { SessionIdProcessor } from './SessionIdProcessor';
 import { detectResourcesSync } from '@opentelemetry/resources/build/src/detect-resources';
-import { ZoneContextManager } from '@opentelemetry/context-zone';
 
 const {
   NEXT_PUBLIC_OTEL_SERVICE_NAME = '',
   NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT = '',
   IS_SYNTHETIC_REQUEST = '',
 } = typeof window !== 'undefined' ? window.ENV : {};
 
-const FrontendTracer = () => {
+const FrontendTracer = async () => {
+  const { ZoneContextManager } = await import('@opentelemetry/context-zone');
+
   let resource = new Resource({
-    [SemanticResourceAttributes.SERVICE_NAME]: NEXT_PUBLIC_OTEL_SERVICE_NAME,
+    [SEMRESATTRS_SERVICE_NAME]: NEXT_PUBLIC_OTEL_SERVICE_NAME,
   });
-
   const detectedResources = detectResourcesSync({ detectors: [browserDetector] });
   resource = resource.merge(detectedResources);
-  const provider = new WebTracerProvider({ resource });
-
-  provider.addSpanProcessor(new SessionIdProcessor());
 
-  provider.addSpanProcessor(
-    new BatchSpanProcessor(
-      new OTLPTraceExporter({
-        url: NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT || 'http://localhost:4318/v1/traces',
-      }),
-      {
-        scheduledDelayMillis: 500,
-      }
-    )
-  );
+  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()],
+      propagators: [
+        new W3CBaggagePropagator(),
+        new W3CTraceContextPropagator()],
     }),
   });