feat: Allow defining page.route

examples/hello-world-react-create-app/package.json

@@ -13,6 +13,8 @@
     "npm": "^10.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router": "^6.25.1",
+    "react-router-dom": "^6.25.1",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^4.0.1"

examples/hello-world-react-create-app/src/index.tsx

@@ -4,8 +4,13 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-import { HoneycombWebSDK } from '@honeycombio/opentelemetry-web';
+import {
+  HoneycombWebSDK,
+  DynamicAttributesSpanProcessor,
+} from '@honeycombio/opentelemetry-web';
 import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
+import { RouterProvider } from 'react-router-dom';
+import { router } from './router';
 
 const configDefaults = {
   ignoreNetworkEvents: true,
@@ -17,6 +22,7 @@ const root = ReactDOM.createRoot(
 root.render(
   <React.StrictMode>
     <App />
+    <RouterProvider router={router} />
   </React.StrictMode>,
 );
 
@@ -28,7 +34,25 @@ root.render(
 // It's just for debugging purposes.
 reportWebVitals(console.log);
 
+function createRouteGetter() {
+  let route = window.location.pathname;
+  router.subscribe((state) => {
+    let newRoute = '';
+    // some shenanigans here since routes can be nested
+    for (let i = state.matches.length - 1; i >= 0; --i) {
+      const path = state.matches[i]?.route.path;
+      if (!path) continue;
+      if (!route.startsWith(path))
+        newRoute =
+          path + (newRoute.startsWith('/') ? newRoute : '/' + newRoute);
+    }
+    route = newRoute;
+  });
+  return () => route;
+}
+
 try {
+  const getRoute = createRouteGetter();
   const sdk = new HoneycombWebSDK({
     apiKey: 'api-key-goes-here',
     serviceName: 'hny-web-distro-example:hello-world-react-create-app',
@@ -39,6 +63,11 @@ try {
         '@opentelemetry/instrumentation-document-load': configDefaults,
       }),
     ], // add automatic instrumentation
+    spanProcessors: [
+      new DynamicAttributesSpanProcessor({
+        getAttributes: () => ({ 'page.route': getRoute() }),
+      }),
+    ],
   });
   sdk.start();
 } catch (err) {

examples/hello-world-react-create-app/src/router.tsx

@@ -0,0 +1,17 @@
+import { createBrowserRouter, useParams } from 'react-router-dom';
+
+function Hello({ name }: { name?: string }) {
+  const params = useParams();
+  const paramName = params['name'];
+  return <h1>Hello {paramName ?? name}!</h1>;
+}
+export const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Hello name="world" />,
+  },
+  {
+    path: '/:name',
+    element: <Hello />,
+  },
+]);

src/browser-attributes-span-processor.ts

@@ -1,37 +1,28 @@
-import { Span } from '@opentelemetry/api';
-import { SpanProcessor } from '@opentelemetry/sdk-trace-base';
+import { DynamicAttributesSpanProcessor } from './dynamic-attributes-span-processor';
+
+function getBrowserAttributes() {
+  const { href, pathname, search, hash, hostname } = window.location;
+
+  return {
+    'browser.width': window.innerWidth,
+    'browser.height': window.innerHeight,
+    'page.hash': hash,
+    'page.url': href,
+    'page.route': pathname,
+    'page.hostname': hostname,
+    'page.search': search,
+
+    'url.path': pathname,
+  };
+}
 
 /**
  * A {@link SpanProcessor} that adds browser specific attributes to each span
  * that might change over the course of a session.
  * Static attributes (e.g. User Agent) are added to the Resource.
  */
-export class BrowserAttributesSpanProcessor implements SpanProcessor {
-  constructor() {}
-
-  onStart(span: Span) {
-    const { href, pathname, search, hash, hostname } = window.location;
-
-    span.setAttributes({
-      'browser.width': window.innerWidth,
-      'browser.height': window.innerHeight,
-      'page.hash': hash,
-      'page.url': href,
-      'page.route': pathname,
-      'page.hostname': hostname,
-      'page.search': search,
-
-      'url.path': pathname,
-    });
-  }
-
-  onEnd() {}
-
-  forceFlush() {
-    return Promise.resolve();
-  }
-
-  shutdown() {
-    return Promise.resolve();
+export class BrowserAttributesSpanProcessor extends DynamicAttributesSpanProcessor {
+  constructor() {
+    super({ getAttributes: getBrowserAttributes });
   }
 }

src/dynamic-attributes-span-processor.ts

@@ -0,0 +1,31 @@
+import { Attributes, Span } from '@opentelemetry/api';
+import { SpanProcessor } from '@opentelemetry/sdk-trace-base';
+
+interface PageRouteSpanProcessorOptions {
+  getAttributes: () => Attributes;
+}
+
+/**
+ * A {@link SpanProcessor} that adds dynamic attributes to every span
+ */
+export class DynamicAttributesSpanProcessor implements SpanProcessor {
+  private getAttributes: () => Attributes;
+  constructor(options: PageRouteSpanProcessorOptions) {
+    this.getAttributes = options.getAttributes;
+  }
+
+  onStart(span: Span) {
+    const attributes = this.getAttributes();
+    span.setAttributes(attributes);
+  }
+
+  onEnd() {}
+
+  forceFlush() {
+    return Promise.resolve();
+  }
+
+  shutdown() {
+    return Promise.resolve();
+  }
+}

src/index.ts

@@ -1,3 +1,4 @@
 export * from './base-otel-sdk';
 export * from './honeycomb-otel-sdk';
 export * from './web-vitals-autoinstrumentation';
+export * from './dynamic-attributes-span-processor';