How to instrument your React Native app with OpenTelemetry

1
import { BasicTracerProvider } from '@opentelemetry/sdk-trace-base'
2
import { Resource } from '@opentelemetry/resources'
3
4
const resource = new Resource({
5
	'highlight.project_id': '<YOUR_PROJECT_ID>',
6
	'service.name': 'reactnativeapp',
7
  'environment': 'production',
8
})
9
10
const tracerProvider = new BasicTracerProvider({ resource })

1
import {
2
	SpanExporter,
3
	ReadableSpan,
4
	TimedEvent,
5
} from '@opentelemetry/sdk-trace-base'
6
import type { Link, Attributes } from '@opentelemetry/api'
7
import { ExportResultCode } from '@opentelemetry/core'
8
9
type KeyValue = {
10
	key: string
11
	value: KeyValue
12
}
13
14
class ReactNativeOTLPTraceExporter implements SpanExporter {
15
	url: string
16
17
	constructor(options: { url: string }) {
18
		this.url = options.url
19
20
		this._buildResourceSpans = this._buildResourceSpans.bind(this)
21
		this._convertEvent = this._convertEvent.bind(this)
22
		this._convertToOTLPFormat = this._convertToOTLPFormat.bind(this)
23
		this._convertLink = this._convertLink.bind(this)
24
		this._convertAttributes = this._convertAttributes.bind(this)
25
		this._convertKeyValue = this._convertKeyValue.bind(this)
26
		this._toAnyValue = this._toAnyValue.bind(this)
27
	}
28
29
	export(spans: ReadableSpan[], resultCallback: any) {
30
		fetch(this.url, {
31
			method: 'POST',
32
			headers: { 'Content-Type': 'application/json' },
33
			body: this._buildResourceSpans(spans),
34
		})
35
			.then(() => {
36
				resultCallback({ code: ExportResultCode.SUCCESS })
37
			})
38
			.catch((err) => {
39
				resultCallback({ code: ExportResultCode.FAILED, error: err })
40
			})
41
	}
42
43
	shutdown() {
44
		return Promise.resolve()
45
	}
46
47
	_buildResourceSpans(spans: ReadableSpan[] = []) {
48
		const resource = spans[0]?.resource
49
		const scope = spans[0]?.instrumentationLibrary
50
51
		return JSON.stringify({
52
			resourceSpans: [
53
				{
54
					resource: {
55
						attributes: resource.attributes
56
							? this._convertAttributes(resource.attributes)
57
							: [],
58
					},
59
					scopeSpans: [
60
						{
61
							scope: {
62
								name: scope?.name,
63
								version: scope?.version,
64
							},
65
							spans: spans.map(this._convertToOTLPFormat),
66
						},
67
					],
68
				},
69
			],
70
		})
71
	}
72
73
	_convertToOTLPFormat(span: ReadableSpan) {
74
		const spanContext = span.spanContext()
75
		const status = span.status
76
77
		return {
78
			traceId: spanContext.traceId,
79
			spanId: spanContext.spanId,
80
			parentSpanId: span.parentSpanId,
81
			traceState: spanContext.traceState?.serialize(),
82
			name: span.name,
83
			// Span kind is offset by 1 because the API does not define a value for unset
84
			kind: span.kind == null ? 0 : span.kind + 1,
85
			startTimeUnixNano: span.startTime[0] * 1e9 + span.startTime[1],
86
			endTimeUnixNano: span.endTime[0] * 1e9 + span.endTime[1],
87
			attributes: span.attributes
88
				? this._convertAttributes(span.attributes)
89
				: [],
90
			droppedAttributesCount: span.droppedAttributesCount || 0,
91
			events: span.events?.map(this._convertEvent) || [],
92
			droppedEventsCount: span.droppedEventsCount || 0,
93
			status: {
94
				code: status.code,
95
				message: status.message,
96
			},
97
			links: span.links?.map(this._convertLink) || [],
98
			droppedLinksCount: span.droppedLinksCount,
99
		}
100
	}
101
102
	_convertEvent(timedEvent: TimedEvent) {
103
		return {
104
			attributes: timedEvent.attributes
105
				? this._convertAttributes(timedEvent.attributes)
106
				: [],
107
			name: timedEvent.name,
108
			timeUnixNano: timedEvent.time[0] * 1e9 + timedEvent.time[1],
109
			droppedAttributesCount: timedEvent.droppedAttributesCount || 0,
110
		}
111
	}
112
113
	_convertLink(link: Link) {
114
		return {
115
			attributes: link.attributes
116
				? this._convertAttributes(link.attributes)
117
				: [],
118
			spanId: link.context.spanId,
119
			traceId: link.context.traceId,
120
			traceState: link.context.traceState?.serialize(),
121
			droppedAttributesCount: link.droppedAttributesCount || 0,
122
		}
123
	}
124
125
	_convertAttributes(attributes: Attributes) {
126
		return Object.keys(attributes).map((key) =>
127
			this._convertKeyValue(key, attributes[key]),
128
		)
129
	}
130
131
	_convertKeyValue(key: string, value: any): KeyValue {
132
		return {
133
			key: key,
134
			value: this._toAnyValue(value),
135
		}
136
	}
137
138
	_toAnyValue(value: any): any {
139
		const t = typeof value
140
		if (t === 'string') return { stringValue: value as string }
141
		if (t === 'number') {
142
			if (!Number.isInteger(value))
143
				return { doubleValue: value as number }
144
			return { intValue: value as number }
145
		}
146
		if (t === 'boolean') return { boolValue: value as boolean }
147
		if (value instanceof Uint8Array) return { bytesValue: value }
148
		if (Array.isArray(value))
149
			return { arrayValue: { values: value.map(this._toAnyValue) } }
150
		if (t === 'object' && value != null)
151
			return {
152
				kvlistValue: {
153
					values: Object.entries(value as object).map(([k, v]) =>
154
						this._convertKeyValue(k, v),
155
					),
156
				},
157
			}
158
159
		return {}
160
	}
161
}

1
const otlpExporter = new ReactNativeOTLPTraceExporter({
2
	url: 'https://otel.highlight.io:4318/v1/traces',
3
})

1
import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'
2
3
tracerProvider.addSpanProcessor(new BatchSpanProcessor(otlpExporter))
4
tracerProvider.register()
5
6
export const tracer = tracerProvider.getTracer('react-native-tracer')

1
import { tracer } from "./highlight"
2
3
const span = H.tracer.startSpan('Blog Post')
4
// ...some code
5
span.setAttributes({ name: "How to instrument your React Native app with OpenTelemetry" })
6
span.recordException(
7
  new Error('this is an error in the Blog Post span'),
8
)
9
span.end()

1
const ConsoleLevels = {
2
	debug: 'debug',
3
	info: 'info',
4
	log: 'info',
5
	count: 'info',
6
	dir: 'info',
7
	warn: 'warn',
8
	assert: 'warn',
9
	error: 'error',
10
	trace: 'trace',
11
} as const
12
13
export const log = (
14
	level: keyof typeof ConsoleLevels,
15
	message: string,
16
	attributes = {},
17
) => {
18
	const span = tracer.startSpan('highlight.log')
19
	span.addEvent(
20
		'log',
21
		{
22
			...attributes,
23
			['log.severity']: level,
24
			['log.message']: message,
25
		},
26
		new Date(),
27
	)
28
	span.end()
29
}

1
import { log } from "./highlight"
2
3
log("warn", "we are almost finished", { minutesRead: 10 })

1
export const error = (message: string, attributes = {}) => {
2
	const span = tracer.startSpan('highlight.log')
3
	span.recordException(new Error(message), new Date())
4
	span.setAttributes(attributes)
5
	span.end()
6
}

1
import { error } from "./highlight"
2
3
error("user unset", { defaultAvatar: "batman" })

1
type ConsoleFn = (...data: any) => void
2
3
let consoleHooked = false
4
5
export function hookConsole() {
6
	if (consoleHooked) return
7
	consoleHooked = true
8
	for (const [level, highlightLevel] of Object.entries(ConsoleLevels)) {
9
		const origWrite = console[level as keyof Console] as ConsoleFn
10
		;(console[level as keyof Console] as ConsoleFn) = function (
11
			...data: any[]
12
		) {
13
			try {
14
				return origWrite(...data)
15
			} finally {
16
				const o: { stack: any } = { stack: {} }
17
				Error.captureStackTrace(o)
18
				const message = data.map((o) =>
19
					typeof o === 'object' ? safeStringify(o) : o,
20
				)
21
22
				const attributes = data
23
					.filter((d) => typeof d === 'object')
24
					.reduce((a, b) => ({ ...a, ...b }), {})
25
26
				if (level === 'error') {
27
					attributes['exception.type'] = 'Error'
28
					attributes['exception.message'] = message.join('')
29
					attributes['exception.stacktrace'] = JSON.stringify(o.stack)
30
				}
31
32
				log(highlightLevel, message.join(' '), attributes)
33
			}
34
		}
35
	}
36
}
37
38
// https://stackoverflow.com/a/2805230
39
const MAX_RECURSION = 128
40
41
export function safeStringify(obj: any): string {
42
	function replacer(input: any, depth?: number): any {
43
		if ((depth ?? 0) > MAX_RECURSION) {
44
			throw new Error('max recursion exceeded')
45
		}
46
		if (input && typeof input === 'object') {
47
			for (const k in input) {
48
				if (typeof input[k] === 'object') {
49
					replacer(input[k], (depth ?? 0) + 1)
50
				} else if (!canStringify(input[k])) {
51
					input[k] = input[k].toString()
52
				}
53
			}
54
		}
55
		return input
56
	}
57
58
	function canStringify(value: any): boolean {
59
		try {
60
			JSON.stringify(value)
61
			return true
62
		} catch (e) {
63
			return false
64
		}
65
	}
66
67
	try {
68
		return JSON.stringify(replacer(obj))
69
	} catch (e) {
70
		return obj.toString()
71
	}
72
}

1
import { hookConsole } from "./highlight"
2
import { useEffect } from "react"
3
4
// within component
5
useEffect(() => {
6
  hookConsole()
7
}, [])
8
9
console.log("I'm sending to Highlight")