Add tracingOrigins and urlBlocklist to RN Observe plugin (#107)

Author: ccschmitz-launchdarkly

.changeset/sad-emus-turn.md

@@ -0,0 +1,5 @@
+---
+'@launchdarkly/observability-react-native': patch
+---
+
+add tracingOrigins and urlBlocklist and improve span naming

.github/PULL_REQUEST_TEMPLATE.md

@@ -17,9 +17,3 @@
 <!--
  Backend - Do we need to consider migrations or backfilling data?
 -->
-
-## Does this work require review from our design team?
-
-<!--
- Request review from julian-highlight / our design team
--->

sdk/@launchdarkly/observability-react-native/CHANGELOG.md

@@ -5,7 +5,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [0.1.0] - 2024-01-XX
+## [0.1.0] - 2025-07-08
 
 ### Added
 - Initial release of @launchdarkly/observability-react-native

sdk/@launchdarkly/observability-react-native/package.json

@@ -28,6 +28,7 @@
 		"access": "public"
 	},
 	"dependencies": {
+		"@launchdarkly/observability-shared": "workspace:*",
 		"@opentelemetry/api": "^1.9.0",
 		"@opentelemetry/exporter-trace-otlp-http": "^0.56.0",
 		"@opentelemetry/instrumentation": "^0.57.2",

sdk/@launchdarkly/observability-react-native/src/api/Options.ts

@@ -29,6 +29,19 @@ export interface ReactNativeOptions {
 	 */
 	customHeaders?: Record<string, string>
 
+	/**
+	 * Specifies where the backend of the app lives. If specified, the SDK will attach tracing headers to outgoing requests whose destination URLs match a substring or regexp from this list, so that backend errors can be linked back to the session.
+	 * If 'true' is specified, all requests to the current domain will be matched.
+	 * @example tracingOrigins: ['localhost', /^\//, 'backend.myapp.com']
+	 */
+	tracingOrigins?: boolean | (string | RegExp)[]
+
+	/**
+	 * A list of URLs to block from tracing.
+	 * @example urlBlocklist: ['localhost', 'backend.myapp.com']
+	 */
+	urlBlocklist?: string[]
+
 	/**
 	 * Session timeout in milliseconds.
 	 * @default 30 * 60 * 1000 (30 minutes)

sdk/@launchdarkly/observability-react-native/src/client/InstrumentationManager.ts

@@ -24,12 +24,10 @@ import {
 import {
 	LoggerProvider,
 	BatchLogRecordProcessor,
-	LogRecordExporter,
 } from '@opentelemetry/sdk-logs'
 import {
 	MeterProvider,
 	PeriodicExportingMetricReader,
-	PushMetricExporter,
 } from '@opentelemetry/sdk-metrics'
 import { Resource } from '@opentelemetry/resources'
 import {
@@ -38,64 +36,17 @@ import {
 	ATTR_EXCEPTION_TYPE,
 } from '@opentelemetry/semantic-conventions'
 import { SpanStatusCode } from '@opentelemetry/api'
-import {
-	W3CTraceContextPropagator,
-	W3CBaggagePropagator,
-	CompositePropagator,
-} from '@opentelemetry/core'
+import { W3CBaggagePropagator, CompositePropagator } from '@opentelemetry/core'
 import { ReactNativeOptions } from '../api/Options'
 import { Metric } from '../api/Metric'
-
-export class CustomBatchSpanProcessor extends BatchSpanProcessor {
-	private recentHttpSpans = new Map<string, number>()
-	private readonly DEDUP_WINDOW_MS = 1000
-
-	constructor(exporter: SpanExporter, options?: BufferConfig) {
-		super(exporter, options)
-	}
-
-	onEnd(span: ReadableSpan): void {
-		if (this.isHttpSpan(span)) {
-			const spanKey = this.generateHttpSpanKey(span)
-			const now = Date.now()
-
-			this.cleanupOldHttpSpans(now)
-
-			if (this.recentHttpSpans.has(spanKey)) {
-				return // duplicate - skip
-			}
-
-			this.recentHttpSpans.set(spanKey, now)
-			super.onEnd(span)
-
-			return
-		}
-
-		super.onEnd(span)
-	}
-
-	private isHttpSpan(span: ReadableSpan): boolean {
-		const url = span.attributes['http.url']
-		const method = span.attributes['http.method']
-		return Boolean(url && method)
-	}
-
-	private generateHttpSpanKey(span: ReadableSpan): string {
-		const url = span.attributes['http.url'] as string
-		const method = span.attributes['http.method'] as string
-		const startTime = Math.floor(span.startTime[0])
-
-		return `${method}:${url}:${startTime}`
-	}
-
-	private cleanupOldHttpSpans(now: number): void {
-		for (const [key, timestamp] of this.recentHttpSpans.entries()) {
-			if (now - timestamp > this.DEDUP_WINDOW_MS) {
-				this.recentHttpSpans.delete(key)
-			}
-		}
-	}
-}
+import { SessionManager } from './SessionManager'
+import {
+	CustomTraceContextPropagator,
+	getCorsUrlsPattern,
+	getSpanName,
+} from '@launchdarkly/observability-shared'
+import { DeduplicatingExporter } from '../otel/DeduplicatingExporter'
+import { CustomBatchSpanProcessor } from '../otel/CustomBatchSpanProcessor'
 
 export class InstrumentationManager {
 	private traceProvider?: WebTracerProvider
@@ -105,11 +56,9 @@ export class InstrumentationManager {
 	private serviceName: string
 	private resource: Resource = new Resource({})
 	private headers: Record<string, string> = {}
-	private traceExporter?: SpanExporter
-	private logExporter?: LogRecordExporter
-	private metricExporter?: PushMetricExporter
+	private sessionManager?: SessionManager
 
-	constructor(private options: ReactNativeOptions) {
+	constructor(private options: Required<ReactNativeOptions>) {
 		this.serviceName =
 			this.options.serviceName ??
 			'launchdarkly-observability-react-native'
@@ -135,31 +84,46 @@ export class InstrumentationManager {
 		}
 	}
 
+	public setSessionManager(sessionManager: SessionManager) {
+		this.sessionManager = sessionManager
+	}
+
 	private initializeTracing() {
 		if (this.options.disableTraces) return
 
 		const compositePropagator = new CompositePropagator({
 			propagators: [
-				new W3CTraceContextPropagator(),
 				new W3CBaggagePropagator(),
+				new CustomTraceContextPropagator({
+					internalEndpoints: [
+						`${this.options.otlpEndpoint}/v1/traces`,
+						`${this.options.otlpEndpoint}/v1/logs`,
+						`${this.options.otlpEndpoint}/v1/metrics`,
+					],
+					tracingOrigins: this.options.tracingOrigins,
+					urlBlocklist: this.options.urlBlocklist,
+				}),
 			],
 		})
 
 		propagation.setGlobalPropagator(compositePropagator)
 
-		const exporter =
-			this.traceExporter ??
-			new OTLPTraceExporter({
-				url: `${this.options.otlpEndpoint}/v1/traces`,
-				headers: this.headers,
-			})
+		const otlpExporter = new OTLPTraceExporter({
+			url: `${this.options.otlpEndpoint}/v1/traces`,
+			headers: this.headers,
+		})
+		const exporter = new DeduplicatingExporter(
+			otlpExporter,
+			this.options.debug,
+		)
 
 		const processors: SpanProcessor[] = [
 			new CustomBatchSpanProcessor(exporter, {
 				maxQueueSize: 100,
 				scheduledDelayMillis: 500,
 				exportTimeoutMillis: 5000,
 				maxExportBatchSize: 10,
+				debug: this.options.debug,
 			}),
 		]
 
@@ -171,15 +135,52 @@ export class InstrumentationManager {
 		this.traceProvider.register()
 		trace.setGlobalTracerProvider(this.traceProvider)
 
+		const corsPattern = getCorsUrlsPattern(this.options.tracingOrigins)
+
 		registerInstrumentations({
 			instrumentations: [
 				new FetchInstrumentation({
-					// TODO: Verify this works the same as the web implementation.
-					// Look at getCorsUrlsPattern. Take into account tracingOrigins.
-					propagateTraceHeaderCorsUrls: /.*/,
+					applyCustomAttributesOnSpan: (span, request) => {
+						if (!(span as any).attributes) {
+							return
+						}
+						const readableSpan = span as unknown as ReadableSpan
+
+						const url = readableSpan.attributes[
+							'http.url'
+						] as string
+						const method = request.method ?? 'GET'
+
+						span.updateName(getSpanName(url, method, request.body))
+					},
+					propagateTraceHeaderCorsUrls: corsPattern,
 				}),
 				new XMLHttpRequestInstrumentation({
-					propagateTraceHeaderCorsUrls: /.*/,
+					applyCustomAttributesOnSpan: (span, xhr) => {
+						if (!(span as any).attributes) {
+							return
+						}
+						const readableSpan = span as unknown as ReadableSpan
+
+						try {
+							const url = readableSpan.attributes[
+								'http.url'
+							] as string
+							const method = readableSpan.attributes[
+								'http.method'
+							] as string
+							let responseText: string | undefined
+							if (['', 'text'].includes(xhr.responseType)) {
+								responseText = xhr.responseText
+							}
+							span.updateName(
+								getSpanName(url, method, responseText),
+							)
+						} catch (e) {
+							console.error('Failed to update span name:', e)
+						}
+					},
+					propagateTraceHeaderCorsUrls: corsPattern,
 				}),
 			],
 		})
@@ -245,14 +246,17 @@ export class InstrumentationManager {
 		try {
 			const activeSpan = options?.span || trace.getActiveSpan()
 			const span = activeSpan ?? this.getTracer().startSpan('error')
+			const sessionId = this.sessionManager?.getSessionInfo().sessionId
 
 			span.recordException(error)
 			span.setAttribute(ATTR_EXCEPTION_MESSAGE, error.message)
-			span.setAttribute(
-				ATTR_EXCEPTION_STACKTRACE,
-				error.stack ?? 'No stack trace',
-			)
 			span.setAttribute(ATTR_EXCEPTION_TYPE, error.name ?? 'No name')
+			if (error.stack) {
+				span.setAttribute(ATTR_EXCEPTION_STACKTRACE, error.stack)
+			}
+			if (sessionId) {
+				span.setAttribute('highlight.session_id', sessionId)
+			}
 			span.setStatus({ code: SpanStatusCode.ERROR })
 
 			if (attributes) {
@@ -268,6 +272,11 @@ export class InstrumentationManager {
 				'exception.type': error.name,
 				'exception.message': error.message,
 				'exception.stacktrace': error.stack,
+				...(sessionId
+					? {
+							['highlight.session_id']: sessionId,
+						}
+					: {}),
 			})
 		} catch (e) {
 			console.error('Failed to record error:', e)
@@ -320,6 +329,7 @@ export class InstrumentationManager {
 	): void {
 		try {
 			const logger = this.getLogger()
+			const sessionId = this.sessionManager?.getSessionInfo().sessionId
 
 			logger.emit({
 				severityText: level.toUpperCase(),
@@ -330,6 +340,11 @@ export class InstrumentationManager {
 				attributes: {
 					...attributes,
 					'log.source': 'react-native-plugin',
+					...(sessionId
+						? {
+								['highlight.session_id']: sessionId,
+							}
+						: {}),
 				},
 				timestamp: Date.now(),
 			})

sdk/@launchdarkly/observability-react-native/src/client/ObservabilityClient.ts

@@ -57,6 +57,8 @@ export class ObservabilityClient {
 			disableLogs: options.disableLogs ?? false,
 			disableMetrics: options.disableMetrics ?? false,
 			disableTraces: options.disableTraces ?? false,
+			tracingOrigins: options.tracingOrigins ?? false,
+			urlBlocklist: options.urlBlocklist ?? [],
 		}
 	}
 
@@ -77,10 +79,11 @@ export class ObservabilityClient {
 				// Old attribute for connecting to LD project. Can be deprecated in the
 				// future in favor of X-LaunchDarkly-Project header.
 				'highlight.project_id': this.sdkKey,
+				'highlight.session_id': sessionAttributes.sessionId,
 				...this.options.resourceAttributes,
-				...sessionAttributes,
 			})
 
+			this.instrumentationManager.setSessionManager(this.sessionManager)
 			this.instrumentationManager.initialize(resource)
 			this.isInitialized = true