[Frontend] Use browserDetector to populate browser information into f…

…rontend tel… (#760)

CHANGELOG.md

@@ -18,6 +18,8 @@ tls_certificate_check and bump to OTP-25
 ([#756](https://github.com/open-telemetry/opentelemetry-demo/pull/756))
 * Bump up OTEL Java Agent version to 1.23.0
 ([#757](https://github.com/open-telemetry/opentelemetry-demo/pull/757))
+* Use browserDetector to populate browser info to frontend-web telemetry
+([#760](https://github.com/open-telemetry/opentelemetry-demo/pull/760))
 
 ## v0.1.0
 

src/frontend/utils/telemetry/FrontendTracer.ts

@@ -3,7 +3,7 @@ import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
 import { SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
 import { registerInstrumentations } from '@opentelemetry/instrumentation';
 import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
-import { Resource } from '@opentelemetry/resources';
+import { Resource, detectResources, browserDetector } from '@opentelemetry/resources';
 import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
 import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
 
@@ -13,10 +13,14 @@ const { NEXT_PUBLIC_OTEL_SERVICE_NAME = '', NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACE
 const FrontendTracer = async (collectorString: string) => {
   const { ZoneContextManager } = await import('@opentelemetry/context-zone');
 
+  let resource = new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: NEXT_PUBLIC_OTEL_SERVICE_NAME,
+  });
+
+  const detectedResources = await detectResources({detectors:[browserDetector]});
+  resource = resource.merge(detectedResources);
   const provider = new WebTracerProvider({
-    resource: new Resource({
-      [SemanticResourceAttributes.SERVICE_NAME]: NEXT_PUBLIC_OTEL_SERVICE_NAME,
-    }),
+    resource
   });
 
   provider.addSpanProcessor(