@dash0/sdk-web 0.12.1 → 0.13.1

package/dist/types/utils/id.d.ts

@@ -3,4 +3,5 @@ export declare const TRACE_ID_BYTES = 16;
 export declare const PAGE_LOAD_ID_BYTES = 16;
 export declare const SESSION_ID_BYTES = 8;
 export declare const TAB_ID_BYTES = 8;
+export declare const WEB_EVENT_ID_BYTES = 8;
 export declare function generateUniqueId(byteCount: number): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dash0/sdk-web",
-  "version": "0.12.1",
+  "version": "0.13.1",
   "description": "Dash0's Web SDK to collect telemetry from end-users' web browsers",
   "type": "module",
   "main": "dist/dash0.umd.cjs",

package/src/attributes/common.ts

@@ -1,9 +1,10 @@
 import { KeyValue } from "../../types/otlp";
-import { nav, NO_VALUE_FALLBACK, win } from "../utils";
+import { generateUniqueId, nav, NO_VALUE_FALLBACK, WEB_EVENT_ID_BYTES, win } from "../utils";
 import {
   BROWSER_TAB_ID,
   NETWORK_CONNECTION_TYPE,
   SESSION_ID,
+  WEB_EVENT_ID,
   WINDOW_HEIGHT,
   WINDOW_WIDTH,
 } from "../semantic-conventions";
@@ -18,6 +19,10 @@ type Options = {
 };
 
 export function addCommonAttributes(attributes: KeyValue[], options?: Options): void {
+  if (attributes.find((attribute) => attribute.key === WEB_EVENT_ID) === undefined) {
+    addAttribute(attributes, WEB_EVENT_ID, generateUniqueId(WEB_EVENT_ID_BYTES));
+  }
+
   for (let i = 0; i < vars.signalAttributes.length; i++) {
     attributes.push(vars.signalAttributes[i]!);
   }

package/src/attributes/common_test.ts

@@ -0,0 +1,92 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { addCommonAttributes } from "./common";
+import { KeyValue } from "../../types/otlp";
+import * as utils from "../utils";
+import * as varsModule from "../vars";
+import * as urlModule from "./url";
+import * as sessionApi from "../api/session";
+import * as tabIdModule from "../utils/tab-id";
+
+describe("addCommonAttributes", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    vi.spyOn(utils, "generateUniqueId").mockReturnValue("unique-id");
+    vi.spyOn(urlModule, "addUrlAttributes").mockImplementation((attrs) => {
+      attrs.push({ key: "url", value: { stringValue: "http://test" } });
+    });
+    vi.spyOn(utils, "win", "get").mockReturnValue({
+      innerWidth: 800,
+      innerHeight: 600,
+      location: { href: "http://test" },
+    } as any);
+    vi.spyOn(utils, "nav", "get").mockReturnValue({ connection: { effectiveType: "4g" } } as any);
+    vi.spyOn(varsModule.vars, "signalAttributes", "get").mockReturnValue([
+      { key: "foo", value: { stringValue: "bar" } },
+    ]);
+    vi.spyOn(sessionApi, "sessionId", "get").mockReturnValue("session-123");
+    vi.spyOn(tabIdModule, "tabId", "get").mockReturnValue("tab-456");
+  });
+
+  it("adds all expected attributes", () => {
+    const attributes: KeyValue[] = [];
+    addCommonAttributes(attributes);
+
+    expect(attributes).toEqual(
+      expect.arrayContaining([
+        { key: "dash0.web.event.id", value: { stringValue: "unique-id" } },
+        { key: "foo", value: { stringValue: "bar" } },
+        { key: "url", value: { stringValue: "http://test" } },
+        { key: "session.id", value: { stringValue: "session-123" } },
+        { key: "browser.tab.id", value: { stringValue: "tab-456" } },
+        { key: "browser.window.width", value: { doubleValue: 800 } },
+        { key: "browser.window.height", value: { doubleValue: 600 } },
+        { key: "network.connection.subtype", value: { stringValue: "4g" } },
+      ])
+    );
+  });
+
+  it("does not overwrite web.event_id if already present", () => {
+    const attributes: KeyValue[] = [{ key: "web.event_id", value: { stringValue: "existing" } }];
+    addCommonAttributes(attributes);
+
+    const eventId = attributes.find((a) => a.key === "web.event_id");
+    expect(eventId?.value?.stringValue).toBe("existing");
+  });
+
+  it("should not set the session ID if sessionId is not available", () => {
+    vi.spyOn(sessionApi, "sessionId", "get").mockReturnValue("");
+    const attributes: KeyValue[] = [];
+    addCommonAttributes(attributes);
+
+    expect(attributes).not.toEqual(expect.arrayContaining([{ key: "session.id" }]));
+  });
+
+  it("should not set the tab ID if tabId is not available", () => {
+    vi.spyOn(tabIdModule, "tabId", "get").mockReturnValue("");
+    const attributes: KeyValue[] = [];
+    addCommonAttributes(attributes);
+
+    expect(attributes).not.toEqual(expect.arrayContaining([{ key: "browser.tab.id" }]));
+  });
+
+  it("should set the fallback value when window size properties are not available", () => {
+    vi.spyOn(utils, "win", "get").mockReturnValue(undefined);
+    const attributes: KeyValue[] = [];
+    addCommonAttributes(attributes);
+
+    expect(attributes).toEqual(
+      expect.arrayContaining([
+        { key: "browser.window.width", value: { stringValue: "undefined" } },
+        { key: "browser.window.height", value: { stringValue: "undefined" } },
+      ])
+    );
+  });
+
+  it("should not set the network connection type if not available", () => {
+    vi.spyOn(utils, "nav", "get").mockReturnValue({} as any);
+    const attributes: KeyValue[] = [];
+    addCommonAttributes(attributes);
+
+    expect(attributes).not.toEqual(expect.arrayContaining([{ key: "network.connection.subtype" }]));
+  });
+});

package/src/semantic-conventions.ts

@@ -8,6 +8,7 @@ export const DEPLOYMENT_ID = "deployment.id";
 // Misc Signal Attribute Keys
 export const EVENT_NAME = "event.name";
 export const WEB_EVENT_TITLE = "dash0.web.event.title";
+export const WEB_EVENT_ID = "dash0.web.event.id";
 export const PAGE_LOAD_ID = "page.load.id";
 export const SESSION_ID = "session.id";
 export const USER_AGENT = "user_agent.original";

package/src/utils/id.ts

@@ -3,6 +3,7 @@ export const TRACE_ID_BYTES = 16;
 export const PAGE_LOAD_ID_BYTES = TRACE_ID_BYTES;
 export const SESSION_ID_BYTES = SPAN_ID_BYTES;
 export const TAB_ID_BYTES = SPAN_ID_BYTES;
+export const WEB_EVENT_ID_BYTES = SPAN_ID_BYTES;
 
 const SHARED_CHAR_CODES_ARRAY = Array(32);
 export function generateUniqueId(byteCount: number): string {

package/src/utils/otel/span.ts

@@ -1,23 +1,29 @@
 import { KeyValue, Span, SpanStatus } from "../../../types/otlp";
 import { nowNanos } from "../time";
-import { SPAN_KIND_CLIENT, SPAN_STATUS_UNSET } from "../../semantic-conventions";
+import { SPAN_KIND_CLIENT, SPAN_STATUS_UNSET, WEB_EVENT_ID } from "../../semantic-conventions";
 import { sessionId } from "../../api/session";
 import { generateTraceId } from "../trace-id";
 import { generateSpanId } from "../span-id";
+import { addAttribute } from "./attributes";
 
 export type InProgressSpan = Omit<Span, "endTimeUnixNano">;
 
 export function startSpan(name: string): InProgressSpan {
   const traceId = generateTraceId(sessionId);
+  const spanId = generateSpanId(traceId);
+
+  const attributes: KeyValue[] = [];
+  addAttribute(attributes, WEB_EVENT_ID, spanId);
+
   return {
     traceId,
-    spanId: generateSpanId(traceId),
+    spanId,
     name,
     // Always CLIENT for now https://github.com/open-telemetry/opentelemetry-proto/blob/ac3242b03157295e4ee9e616af53b81517b06559/opentelemetry/proto/trace/v1/trace.proto#L143-L169
     // Note: we directly define otlp here, this differs from the values used by oteljs internally.
     kind: SPAN_KIND_CLIENT,
     startTimeUnixNano: nowNanos(),
-    attributes: [],
+    attributes,
     events: [],
     links: [],
     status: { code: SPAN_STATUS_UNSET },