improve SDK metric reporting (#68)

## Summary

* Correct error stacktrace reporting from new opentelemetry trace-based
implementation
* Fix reporting 0-value document_load durations
* Fix document_load metrics not foorwarding to ld client
* Refactor metrics to live in Observability plugin

## How did you test this change?

[local deploy of react-router e2e app

](https://ld-stg.launchdarkly.com/projects/default/sessions/vAK4nlKb6C7jY33RMqphcppbwe2g?relativeTime=last_30_days&env=test&selected-env=test&related_resource=eyJ0eXBlIjoiZXJyb3IiLCJzZWN1cmVJZCI6IjFMWmk1UTFYc0NwZ0s2c04wRjNndVdMMHMwYTYiLCJpbnN0YW5jZUlkIjo1NDI4Mn0%3D)
## Are there any deployment considerations?

changesets

## Does this work require review from our design team?

no

Author: Vadman97

.changeset/eleven-results-smile.md

@@ -0,0 +1,7 @@
+---
+'highlight.run': patch
+'@launchdarkly/observability': patch
+'@launchdarkly/session-replay': patch
+---
+
+fix ErrorListener incorrectly reporting stacktrace via trace event

.changeset/every-results-report.md

@@ -0,0 +1,6 @@
+---
+'@launchdarkly/observability': minor
+'@launchdarkly/session-replay': minor
+---
+
+move metrics listeners to Observability plugin from SessionReplay

.changeset/pink-kids-sniff.md

@@ -0,0 +1,7 @@
+---
+'highlight.run': patch
+'@launchdarkly/observability': patch
+'@launchdarkly/session-replay': patch
+---
+
+fix document_load metric not forwarding to ldClient

.changeset/sad-snakes-cheat.md

@@ -0,0 +1,7 @@
+---
+'highlight.run': patch
+'@launchdarkly/observability': patch
+'@launchdarkly/session-replay': patch
+---
+
+allow reporting 0-value document_load durations

e2e/react-router/src/routes/root.tsx

@@ -70,6 +70,44 @@ export default function Root() {
 			>
 				LDRecord.start(forceNew)
 			</button>
+			<button
+				onClick={() => {
+					throw new Error('thrown error')
+				}}
+			>
+				throw error
+			</button>
+			<button
+				onClick={() => {
+					LDObserve.recordGauge({
+						name: 'my-random-metric',
+						value: Math.floor(Math.random() * 100),
+					})
+				}}
+			>
+				LDObserve.recordGauge(random value)
+			</button>
+			<button
+				onClick={() => {
+					LDObserve.recordGauge({
+						name: 'my-metric',
+						value: 0,
+					})
+				}}
+			>
+				LDObserve.recordGauge(0 value)
+			</button>
+			<button
+				onClick={() => {
+					LDObserve.recordGauge({
+						name: 'my-metric-attrs',
+						value: 0,
+						attributes: { foo: 'bar', baz: 42 },
+					})
+				}}
+			>
+				LDObserve.recordGauge(0 value w attrs)
+			</button>
 			<button
 				onClick={async () => {
 					setFlags(

sdk/highlight-run/package.json

@@ -33,7 +33,8 @@
 		"enforce-size": "size-limit",
 		"test": "vitest --run",
 		"test:watch": "vitest",
-		"typegen": "FORMAT=d.ts vite build",
+		"typegen": "yarn typegen:check && FORMAT=d.ts vite build",
+		"typegen:check": "tsc --noEmit",
 		"docs": "typedoc"
 	},
 	"type": "module",

sdk/highlight-run/src/client/listeners/error-listener.tsx

@@ -14,7 +14,8 @@ function handleError(
 	source: string | undefined,
 	error?: Error,
 ) {
-	let res = parseError(error ?? event)
+	let e: Error = error ?? event
+	let res = parseError(e)
 	let payload: Object = {}
 	if (event instanceof Error) {
 		event = event.message
@@ -24,6 +25,7 @@ function handleError(
 	}
 	const framesToUse = removeHighlightFrameIfExists(res)
 	callback({
+		error: e,
 		event: stringify(event),
 		type: 'window.onerror',
 		url: window.location.href,

sdk/highlight-run/src/client/otel/index.ts

@@ -576,8 +576,9 @@ 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) {
+	const integrations = otelConfig?.getIntegrations?.() ?? []
+	if (durations_ns.document_load !== undefined) {
+		for (const _integration of integrations) {
 			_integration.recordGauge(otelConfig?.sessionSecureId ?? '', {
 				name: LD_METRIC_NAME_DOCUMENT_LOAD,
 				value: durations_ns.document_load / 1e6,
@@ -586,7 +587,7 @@ const assignDocumentDurations = (span: api.Span) => {
 	}
 
 	Object.entries(durations_ns).forEach(([key, value]) => {
-		if (value > 0) {
+		if (value !== undefined) {
 			span.setAttribute(`timings.${key}.ns`, value)
 			span.setAttribute(
 				`timings.${key}.readable`,
@@ -610,7 +611,7 @@ function calculateDuration(
 	const endEvent = events.find((e) => e.name === endEventName)
 
 	if (!startEvent || !endEvent) {
-		return 0
+		return undefined
 	}
 
 	const startNs = startEvent.time[0] * 1e9 + startEvent.time[1]
@@ -624,20 +625,15 @@ const assignResourceFetchDurations = (
 ) => {
 	const durations = {
 		domain_lookup:
-			(resource.domainLookupEnd - resource.domainLookupStart) * 1e6,
-		connect: (resource.connectEnd - resource.connectStart) * 1e6,
-		request: (resource.responseEnd - resource.requestStart) * 1e6,
-		response: (resource.responseEnd - resource.responseStart) * 1e6,
+			(resource.domainLookupEnd - resource.domainLookupStart) * 1e9,
+		connect: (resource.connectEnd - resource.connectStart) * 1e9,
+		request: (resource.responseEnd - resource.requestStart) * 1e9,
+		response: (resource.responseEnd - resource.responseStart) * 1e9,
 	}
 
 	Object.entries(durations).forEach(([key, value]) => {
-		if (value > 0) {
-			span.setAttribute(`timings.${key}.ns`, value)
-			span.setAttribute(
-				`timings.${key}.readable`,
-				humanizeDuration(value),
-			)
-		}
+		span.setAttribute(`timings.${key}.ns`, value)
+		span.setAttribute(`timings.${key}.readable`, humanizeDuration(value))
 	})
 }
 

sdk/highlight-run/src/client/types/shared-types.ts

@@ -28,4 +28,5 @@ export type ErrorMessage = {
 	/** The Unix Time of when the error was thrown. */
 	timestamp: string
 	payload?: string
+	error?: Error
 }

sdk/highlight-run/src/plugins/record.ts

@@ -51,6 +51,7 @@ export class Record extends Plugin<RecordOptions> implements LDPlugin {
 				environment: options?.environment || 'production',
 				appVersion: options?.version,
 				sessionSecureID: this.sessionSecureID,
+				privacySetting: options?.privacySetting ?? 'strict',
 			}
 
 			this.record = new RecordSDK(client_options)