fix launchdarkly integration missing H api calls (#23)

Vadman97 · web-flow · commit 86012564f182 · 2025-05-03T19:17:35.000Z
## Summary * Add `$ld:metric:session:init` events, web vitals metric events, and `document_load` events propagation. ## How did you test this change? new metrics showing up ![Screenshot 2025-05-01 at 18 17 27](https://github.com/user-attachments/assets/e9f2e540-d916-4085-af0e-315c4d6bbe94) ## Are there any deployment considerations? new sdk version released ## Does this work require review from our design team? no
diff --git a/sdk/highlight-next/CHANGELOG.md b/sdk/highlight-next/CHANGELOG.md
@@ -1,5 +1,23 @@
 # @highlight-run/next
 
+## 7.9.8
+
+### Patch Changes
+
+- Updated dependencies [7d1a4af]
+    - highlight.run@9.16.2
+    - @highlight-run/node@3.12.1
+    - @highlight-run/react@17.0.2
+
+## 7.9.7
+
+### Patch Changes
+
+- Updated dependencies [08290c0]
+    - highlight.run@9.16.1
+    - @highlight-run/node@3.12.1
+    - @highlight-run/react@17.0.1
+
 ## 7.9.6
 
 ### Patch Changes
diff --git a/sdk/highlight-next/package.json b/sdk/highlight-next/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@highlight-run/next",
-	"version": "7.9.6",
+	"version": "7.9.8",
 	"description": "Client for interfacing with Highlight in next.js",
 	"files": [
 		"dist",
diff --git a/sdk/highlight-py/CHANGELOG.md b/sdk/highlight-py/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## v0.10.2 (2024-05-02)
+
+### Fix
+
+- Report attributes correctly from `H.trace`
+
 ## v0.9.1 (2025-01-16)
 
 - Update dependencies with known security vulnerabilities
diff --git a/sdk/highlight-py/highlight_io/sdk.py b/sdk/highlight-py/highlight_io/sdk.py
@@ -5,7 +5,6 @@
 import traceback
 import typing
 from importlib import metadata
-
 import sys
 from grpc import Compression
 from opentelemetry import trace as otel_trace, _logs, metrics
@@ -342,6 +341,8 @@ def my_fn():
             set_status_on_exception=False,
             context=context,
         ) as span:
+            if attributes:
+                span.set_attributes(attributes)
             span.set_attributes({"highlight.project_id": self._project_id})
             span.set_attributes({"highlight.session_id": session_id})
             span.set_attributes({"highlight.trace_id": request_id})
diff --git a/sdk/highlight-py/pyproject.toml b/sdk/highlight-py/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "highlight-io"
-version = "0.10.1"
+version = "0.10.2"
 description = "Session replay and error monitoring: stop guessing why bugs happen!"
 license = "Apache-2.0"
 authors = [
diff --git a/sdk/highlight-react/CHANGELOG.md b/sdk/highlight-react/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @highlight-run/react
 
+## 17.0.2
+
+### Patch Changes
+
+- Updated dependencies [7d1a4af]
+    - highlight.run@9.16.2
+
+## 17.0.1
+
+### Patch Changes
+
+- Updated dependencies [08290c0]
+    - highlight.run@9.16.1
+
 ## 17.0.0
 
 ### Patch Changes
diff --git a/sdk/highlight-react/package.json b/sdk/highlight-react/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@highlight-run/react",
-	"version": "17.0.0",
+	"version": "17.0.2",
 	"description": "The official Highlight SDK for React",
 	"license": "Apache-2.0",
 	"peerDependencies": {
diff --git a/sdk/highlight-remix/CHANGELOG.md b/sdk/highlight-remix/CHANGELOG.md
@@ -1,5 +1,23 @@
 # @highlight-run/remix
 
+## 2.0.91
+
+### Patch Changes
+
+- Updated dependencies [7d1a4af]
+    - highlight.run@9.16.2
+    - @highlight-run/node@3.12.1
+    - @highlight-run/react@17.0.2
+
+## 2.0.90
+
+### Patch Changes
+
+- Updated dependencies [08290c0]
+    - highlight.run@9.16.1
+    - @highlight-run/node@3.12.1
+    - @highlight-run/react@17.0.1
+
 ## 2.0.89
 
 ### Patch Changes
diff --git a/sdk/highlight-remix/package.json b/sdk/highlight-remix/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@highlight-run/remix",
-	"version": "2.0.89",
+	"version": "2.0.91",
 	"description": "Client for interfacing with Highlight in Remix",
 	"packageManager": "yarn@4.0.2",
 	"author": "",
diff --git a/sdk/highlight-run/CHANGELOG.md b/sdk/highlight-run/CHANGELOG.md
@@ -1,5 +1,17 @@
 # highlight.run
 
+## 9.16.2
+
+### Patch Changes
+
+- 7d1a4af: move bundled dependencies into dev dependencies
+
+## 9.16.1
+
+### Patch Changes
+
+- 08290c0: reports web vitals metrics, session initialization, document_load, and track events correctly to LD integration
+
 ## 9.16.0
 
 ### Minor Changes
diff --git a/sdk/highlight-run/package.json b/sdk/highlight-run/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "highlight.run",
-	"version": "9.16.0",
+	"version": "9.16.2",
 	"description": "Open source, fullstack monitoring. Capture frontend errors, record server side logs, and visualize what broke with session replay.",
 	"keywords": [
 		"highlight",
@@ -59,28 +59,6 @@
 		"@graphql-codegen/typescript": "^4.0.1",
 		"@graphql-codegen/typescript-graphql-request": "^6.0.1",
 		"@graphql-codegen/typescript-operations": "^4.0.1",
-		"@rollup/plugin-commonjs": "^25.0.7",
-		"@rollup/plugin-json": "^6.1.0",
-		"@rollup/plugin-node-resolve": "^15.2.3",
-		"@rollup/plugin-typescript": "^11.1.6",
-		"@rrweb/types": "workspace:*",
-		"@size-limit/file": "^8.1.0",
-		"@types/chrome": "^0.0.268",
-		"@types/js-cookie": "^3.0.6",
-		"@types/json-stringify-safe": "^5.0.3",
-		"@types/node": "^16.3.1",
-		"@vitest/web-worker": "^1.6.0",
-		"npm-run-all": "^4.1.5",
-		"prettier": "^3.3.3",
-		"readdirp": "^3.6.0",
-		"size-limit": "^8.1.0",
-		"tslib": "^2.6.2",
-		"typescript": "^5.0.4",
-		"vite": "^5.2.12",
-		"vitest": "^1.6.0",
-		"vitest-canvas-mock": "^0.3.3"
-	},
-	"dependencies": {
 		"@opentelemetry/api": "^1.9.0",
 		"@opentelemetry/exporter-metrics-otlp-http": ">=0.57.1",
 		"@opentelemetry/exporter-trace-otlp-http": ">=0.57.1",
@@ -94,16 +72,36 @@
 		"@opentelemetry/sdk-metrics": "^1.30.1",
 		"@opentelemetry/sdk-trace-web": "^1.30.1",
 		"@opentelemetry/semantic-conventions": "^1.28.0",
+		"@rollup/plugin-commonjs": "^25.0.7",
+		"@rollup/plugin-json": "^6.1.0",
+		"@rollup/plugin-node-resolve": "^15.2.3",
+		"@rollup/plugin-typescript": "^11.1.6",
 		"@rrweb/rrweb-plugin-sequential-id-record": "workspace:*",
+		"@rrweb/types": "workspace:*",
+		"@size-limit/file": "^8.1.0",
+		"@types/chrome": "^0.0.268",
+		"@types/js-cookie": "^3.0.6",
+		"@types/json-stringify-safe": "^5.0.3",
+		"@types/node": "^16.3.1",
+		"@vitest/web-worker": "^1.6.0",
 		"error-stack-parser": "2.0.6",
 		"fflate": "^0.8.1",
 		"graphql": "^16.8.1",
 		"graphql-request": "^6.1.0",
 		"graphql-tag": "^2.12.6",
 		"js-cookie": "^3.0.5",
 		"json-stringify-safe": "^5.0.1",
+		"npm-run-all": "^4.1.5",
+		"prettier": "^3.3.3",
+		"readdirp": "^3.6.0",
 		"rrweb": "workspace:*",
+		"size-limit": "^8.1.0",
 		"stacktrace-js": "2.0.2",
+		"tslib": "^2.6.2",
+		"typescript": "^5.0.4",
+		"vite": "^5.2.12",
+		"vitest": "^1.6.0",
+		"vitest-canvas-mock": "^0.3.3",
 		"web-vitals": "^3.5.0",
 		"zone.js": "^0.15.0"
 	},
diff --git a/sdk/highlight-run/src/client/index.tsx b/sdk/highlight-run/src/client/index.tsx
@@ -702,6 +702,9 @@ SessionSecureID: ${this.sessionData.sessionSecureID}`,
 					recordingStartTime: this._recordingStartTime,
 				},
 			})
+			for (const integration of this._integrations) {
+				integration.init(this.sessionData.sessionSecureID)
+			}
 
 			if (this.sessionData.userIdentifier) {
 				this.identify(
@@ -1228,6 +1231,9 @@ SessionSecureID: ${this.sessionData.sessionSecureID}`,
 			category: metric.category,
 			'highlight.session_id': this.sessionData.sessionSecureID,
 		})
+		for (const integration of this._integrations) {
+			integration.recordGauge(this.sessionData.sessionSecureID, metric)
+		}
 	}
 
 	recordCount(metric: RecordMetric) {
@@ -1543,6 +1549,8 @@ SessionSecureID: ${this.sessionData.sessionSecureID}`,
 	}
 
 	registerLD(client: LDClientMin) {
+		// TODO(vkorolik): can only register one LD client for now
+		if (this._integrations.length) return
 		this._integrations.push(new LaunchDarklyIntegration(client))
 	}
 }
diff --git a/sdk/highlight-run/src/client/otel/index.ts b/sdk/highlight-run/src/client/otel/index.ts
@@ -36,7 +36,7 @@ import {
 	BrowserXHR,
 	getBodyThatShouldBeRecorded,
 } from '../listeners/network-listener/utils/xhr-listener'
-import type {
+import {
 	NetworkRecordingOptions,
 	OtelInstrumentatonOptions,
 } from '../types/client'
@@ -50,6 +50,8 @@ import {
 	MeterProvider,
 	PeriodicExportingMetricReader,
 } from '@opentelemetry/sdk-metrics'
+import { IntegrationClient } from '../../integrations'
+import { LD_METRIC_NAME_DOCUMENT_LOAD } from '../../integrations/launchdarkly'
 
 export type BrowserTracingConfig = {
 	projectId: string | number
@@ -62,19 +64,22 @@ export type BrowserTracingConfig = {
 	tracingOrigins?: boolean | (string | RegExp)[]
 	urlBlocklist?: string[]
 	instrumentations?: OtelInstrumentatonOptions
+	getIntegrations?: () => IntegrationClient[]
 }
 
 let providers: {
 	tracerProvider?: WebTracerProvider
 	meterProvider?: MeterProvider
 } = {}
+let otelConfig: BrowserTracingConfig | undefined
 const RECORD_ATTRIBUTE = 'highlight.record'
 
 export const setupBrowserTracing = (config: BrowserTracingConfig) => {
 	if (providers.tracerProvider !== undefined) {
 		console.warn('OTEL already initialized. Skipping...')
 		return
 	}
+	otelConfig = config
 
 	const backendUrl =
 		config.backendUrl ||
@@ -516,20 +521,21 @@ const assignDocumentDurations = (span: api.Span) => {
 	const readableSpan = span as unknown as ReadableSpan
 	const events = readableSpan.events
 
-	const durations = {
+	const durations_ns = {
 		unload: calculateDuration('unloadEventStart', 'unloadEventEnd', events),
 		dom_interactive: calculateDuration(
-			'domInteractive',
 			'fetchStart',
+			'domInteractive',
 			events,
 		),
 		dom_content_loaded: calculateDuration(
-			'domContentLoadedEventEnd',
 			'domContentLoadedEventStart',
+			'domContentLoadedEventEnd',
 			events,
 		),
 		dom_complete: calculateDuration('fetchStart', 'domComplete', events),
 		load_event: calculateDuration('loadEventStart', 'loadEventEnd', events),
+		document_load: calculateDuration('fetchStart', 'loadEventEnd', events),
 		first_paint: calculateDuration('fetchStart', 'firstPaint', events),
 		first_contentful_paint: calculateDuration(
 			'fetchStart',
@@ -545,8 +551,16 @@ const assignDocumentDurations = (span: api.Span) => {
 		request: calculateDuration('requestStart', 'requestEnd', events),
 		response: calculateDuration('responseStart', 'responseEnd', events),
 	}
+	for (const _integration of otelConfig?.getIntegrations?.() ?? []) {
+		if (durations_ns.document_load > 0) {
+			_integration.recordGauge(otelConfig?.sessionSecureId ?? '', {
+				name: LD_METRIC_NAME_DOCUMENT_LOAD,
+				value: durations_ns.document_load / 1e6,
+			})
+		}
+	}
 
-	Object.entries(durations).forEach(([key, value]) => {
+	Object.entries(durations_ns).forEach(([key, value]) => {
 		if (value > 0) {
 			span.setAttribute(`timings.${key}.ns`, value)
 			span.setAttribute(
diff --git a/sdk/highlight-run/src/index.tsx b/sdk/highlight-run/src/index.tsx
@@ -43,8 +43,12 @@ import { initializeFetchListener } from './listeners/fetch'
 import { initializeWebSocketListener } from './listeners/web-socket'
 import { ViewportResizeListenerArgs } from './client/listeners/viewport-resize-listener'
 import { getNoopSpan } from './client/otel/utils.js'
-import { setupLaunchDarklyIntegration } from './integrations/launchdarkly'
+import {
+	LaunchDarklyIntegration,
+	setupLaunchDarklyIntegration,
+} from './integrations/launchdarkly'
 import { LDClientMin } from './integrations/launchdarkly/types/LDClient'
+import { IntegrationClient } from './integrations'
 
 enum MetricCategory {
 	Device = 'Device',
@@ -81,6 +85,7 @@ let onHighlightReadyTimeout: ReturnType<typeof setTimeout> | undefined =
 
 let highlight_obj: Highlight
 let first_load_listeners: FirstLoadListeners
+let integrations: IntegrationClient[] = []
 let init_called = false
 type Callback = (span?: Span) => any
 let getTracer: () => Tracer | undefined
@@ -149,6 +154,7 @@ const H: HighlightPublicInterface = {
 						serviceName:
 							options?.serviceName ?? 'highlight-browser',
 						instrumentations: options?.otel?.instrumentations,
+						getIntegrations: () => [...integrations],
 					})
 					getTracer = otelGetTracer
 
@@ -627,13 +633,16 @@ const H: HighlightPublicInterface = {
 		processQueue()
 	},
 	registerLD(client) {
+		// TODO(vkorolik): can only register one LD client for now
+		if (integrations.length) return
 		// TODO(vkorolik): consolidate once firstload/client are merged
 		// client integration necessary to track events from ErrorListener
 		H.onHighlightReady(() => {
 			highlight_obj.registerLD(client)
 		})
 		// firstload integration necessary to immediately capture ld.identify
 		setupLaunchDarklyIntegration(this, client)
+		integrations.push(new LaunchDarklyIntegration(client))
 	},
 }
 
diff --git a/sdk/highlight-run/src/integrations/index.ts b/sdk/highlight-run/src/integrations/index.ts
@@ -1,6 +1,9 @@
 import type { ErrorMessage, Source } from '../client/types/shared-types'
+import type { RecordMetric } from '../client/types/types'
 
 export interface IntegrationClient {
+	init(sessionSecureID: string): void
+
 	identify(
 		sessionSecureID: string,
 		user_identifier: string,
@@ -11,4 +14,6 @@ export interface IntegrationClient {
 	error(sessionSecureID: string, error: ErrorMessage): void
 
 	track(sessionSecureID: string, metadata: object): void
+
+	recordGauge(sessionSecureID: string, metric: RecordMetric): void
 }
diff --git a/sdk/highlight-run/src/integrations/launchdarkly/index.ts b/sdk/highlight-run/src/integrations/launchdarkly/index.ts

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@highlight-run/next",`
`3`		`- "version": "7.9.6",`
	`3`	`+ "version": "7.9.8",`
`4`	`4`	`"description": "Client for interfacing with Highlight in next.js",`
`5`	`5`	`"files": [`
`6`	`6`	`"dist",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@highlight-run/react",`
`3`		`- "version": "17.0.0",`
	`3`	`+ "version": "17.0.2",`
`4`	`4`	`"description": "The official Highlight SDK for React",`
`5`	`5`	`"license": "Apache-2.0",`
`6`	`6`	`"peerDependencies": {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@highlight-run/remix",`
`3`		`- "version": "2.0.89",`
	`3`	`+ "version": "2.0.91",`
`4`	`4`	`"description": "Client for interfacing with Highlight in Remix",`
`5`	`5`	`"packageManager": "yarn@4.0.2",`
`6`	`6`	`"author": "",`