[demo] update frontend browser sdk code (open-telemetry#6437)

Author: puckpuck

content/en/docs/demo/services/frontend.md

@@ -22,62 +22,61 @@ initialize the SDK and auto-instrumentation based on standard
 for OTLP export, resource attributes, and service name.
 
 ```javascript
-const opentelemetry = require('@opentelemetry/sdk-node');
-const {
-  getNodeAutoInstrumentations,
-} = require('@opentelemetry/auto-instrumentations-node');
-const {
-  OTLPTraceExporter,
-} = require('@opentelemetry/exporter-trace-otlp-grpc');
-const {
-  OTLPMetricExporter,
-} = require('@opentelemetry/exporter-metrics-otlp-grpc');
-const { PeriodicExportingMetricReader } = require('@opentelemetry/sdk-metrics');
-const {
-  alibabaCloudEcsDetector,
-} = require('@opentelemetry/resource-detector-alibaba-cloud');
-const {
-  awsEc2Detector,
-  awsEksDetector,
-} = require('@opentelemetry/resource-detector-aws');
-const {
-  containerDetector,
-} = require('@opentelemetry/resource-detector-container');
-const { gcpDetector } = require('@opentelemetry/resource-detector-gcp');
-const {
-  envDetector,
-  hostDetector,
-  osDetector,
-  processDetector,
-} = require('@opentelemetry/resources');
-
-const sdk = new opentelemetry.NodeSDK({
-  traceExporter: new OTLPTraceExporter(),
-  instrumentations: [
-    getNodeAutoInstrumentations({
-      // only instrument fs if it is part of another trace
-      '@opentelemetry/instrumentation-fs': {
-        requireParentSpan: true,
-      },
+const FrontendTracer = async () => {
+  const { ZoneContextManager } = await import('@opentelemetry/context-zone');
+
+  let resource = new Resource({
+    [SEMRESATTRS_SERVICE_NAME]: NEXT_PUBLIC_OTEL_SERVICE_NAME,
+  });
+  const detectedResources = detectResourcesSync({
+    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(),
+      ],
     }),
-  ],
-  metricReader: new PeriodicExportingMetricReader({
-    exporter: new OTLPMetricExporter(),
-  }),
-  resourceDetectors: [
-    containerDetector,
-    envDetector,
-    hostDetector,
-    osDetector,
-    processDetector,
-    alibabaCloudEcsDetector,
-    awsEksDetector,
-    awsEc2Detector,
-    gcpDetector,
-  ],
-});
+  });
 
-sdk.start();
+  registerInstrumentations({
+    tracerProvider: provider,
+    instrumentations: [
+      getWebAutoInstrumentations({
+        '@opentelemetry/instrumentation-fetch': {
+          propagateTraceHeaderCorsUrls: /.*/,
+          clearTimingResources: true,
+          applyCustomAttributesOnSpan(span) {
+            span.setAttribute('app.synthetic_request', IS_SYNTHETIC_REQUEST);
+          },
+        },
+      }),
+    ],
+  });
+};
 ```
 
 Node required modules are loaded using the `--require` command line argument.