feat: ✨ add semantic browser resource fields & honeycomb distro info (#…

…23)

Swaps out the `browserDetection` export from `@opentelemetry/resources`, replaces it with the one provided by [`@opentelemetry/opentelemetry-browser-detector`](https://github.com/open-telemetry/opentelemetry-js/blob/57008533aba7ccd51ea80f38ff4f29404d47eb9c/experimental/packages/opentelemetry-browser-detector/src/BrowserDetector.ts)

examples/hello-world-web/README.md

@@ -4,13 +4,14 @@ You can run this example to see the SDK in action.
 
 ## Run this application
 
-`npm install` 
+`npm install`
 
 Paste your API key into `index.js`, where is says "your api key goes here".
 
-`npm run build` TODO: this step doesn't work. The module isn't published yet.
+`npm run build` 
 
-`npm run serve`
+
+`npm run start`
 
 Visit [http://localhost:8080]() to see "hello world".
 

package.json

@@ -36,6 +36,7 @@
     "@opentelemetry/api": "^1.7.0",
     "@opentelemetry/exporter-trace-otlp-http": "^0.46.0",
     "@opentelemetry/instrumentation": "^0.45.1",
+    "@opentelemetry/opentelemetry-browser-detector": "^0.47.0",
     "@opentelemetry/resources": "^1.19.0",
     "@opentelemetry/sdk-trace-base": "^1.18.1",
     "@opentelemetry/sdk-trace-web": "^1.18.1",

src/base-otel-sdk.ts

@@ -23,7 +23,6 @@ import {
   registerInstrumentations,
 } from '@opentelemetry/instrumentation';
 import {
-  browserDetector,
   Detector,
   DetectorSync,
   detectResourcesSync,
@@ -42,6 +41,7 @@ import {
 import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
 import { WebSDKConfiguration } from './types';
 import { SessionIdSpanProcessor } from './session-id-span-processor';
+import { browserDetector } from '@opentelemetry/opentelemetry-browser-detector';
 
 /** This class represents everything needed to register a fully configured OpenTelemetry Web SDK */
 

src/honeycomb-otel-sdk.ts

@@ -1,11 +1,14 @@
 import { WebSDK } from './base-otel-sdk';
 import { HoneycombOptions } from './types';
 import { configureHoneycombHttpJsonTraceExporter } from './http-json-trace-exporter';
+import { configureHoneycombResource } from './honeycomb-resource';
 
 export class HoneycombWebSDK extends WebSDK {
   constructor(options?: HoneycombOptions) {
     super({
+      resource: configureHoneycombResource(options),
       traceExporter: configureHoneycombHttpJsonTraceExporter(options),
+
       ...options,
     });
   }

src/honeycomb-resource.ts

@@ -0,0 +1,12 @@
+import { Resource } from '@opentelemetry/resources';
+import { HoneycombOptions } from './types';
+import { VERSION } from './version';
+
+export function configureHoneycombResource(
+  options?: HoneycombOptions,
+): Resource {
+  return new Resource({
+    'honeycomb.distro.version': VERSION,
+    'honeycomb.distro.runtime_version': 'browser',
+  }).merge(options?.resource ? options.resource : null);
+}

src/version.ts

@@ -0,0 +1 @@
+export const VERSION = '0.0.1';

test/honeycomb-resource.test.ts

@@ -0,0 +1,26 @@
+import { configureHoneycombResource } from '../src/honeycomb-resource';
+import { Resource } from '@opentelemetry/resources';
+import { VERSION } from '../src/version';
+
+test('it should return a Resource', () => {
+  const resource = configureHoneycombResource();
+  expect(resource).toBeInstanceOf(Resource);
+  expect(resource.attributes['honeycomb.distro.version']).toEqual(VERSION);
+  expect(resource.attributes['honeycomb.distro.runtime_version']).toEqual(
+    'browser',
+  );
+});
+
+test('it should merge resource attributes provided from another resource', () => {
+  const resource = configureHoneycombResource({
+    resource: new Resource({
+      myTestAttr: 'my-test-attr',
+    }),
+  });
+  expect(resource).toBeInstanceOf(Resource);
+  expect(resource.attributes['honeycomb.distro.version']).toEqual(VERSION);
+  expect(resource.attributes['honeycomb.distro.runtime_version']).toEqual(
+    'browser',
+  );
+  expect(resource.attributes.myTestAttr).toEqual('my-test-attr');
+});