|
1 | 1 | # React Native OpenTelemetry Demo |
2 | 2 |
|
3 | | -This is a React Native application built with Expo SDK 53 that demonstrates the LaunchDarkly Observability React Native SDK. The app showcases automatic instrumentation for tracing, logging, metrics, and error tracking. |
4 | | - |
5 | | -## Features |
6 | | - |
7 | | -- 🔍 **Automatic Tracing**: Network requests and custom operation tracing |
8 | | -- 📊 **Metrics Collection**: Performance metrics, custom metrics, and device metrics |
9 | | -- 📝 **Structured Logging**: Automatic console instrumentation with session context |
10 | | -- 🐛 **Error Tracking**: Automatic error capture with stack traces and custom error recording |
11 | | -- 📱 **Session Management**: Automatic session tracking with device context |
12 | | -- ⚡ **Performance Monitoring**: App lifecycle events and device information |
13 | | - |
14 | | -## Architecture |
15 | | - |
16 | | -This app uses: |
17 | | -- **Expo SDK 53** with React Native 0.79 |
18 | | -- **New Architecture** enabled by default |
19 | | -- **LaunchDarkly React Native SDK v10** |
20 | | -- **LaunchDarkly Observability React Native SDK** |
21 | | - |
22 | | -## Prerequisites |
23 | | - |
24 | | -- Node.js 18+ and Yarn |
25 | | -- iOS Simulator or Android Emulator |
26 | | -- Expo CLI (`npx expo-cli@latest`) |
| 3 | +This is a React Native application that demonstrates the LaunchDarkly Observability React Native SDK. |
27 | 4 |
|
28 | 5 | ## Getting Started |
29 | 6 |
|
30 | | -1. **Install dependencies** (from the monorepo root): |
| 7 | +1. **Install dependencies**: |
31 | 8 | ```bash |
32 | 9 | yarn install |
33 | 10 | ``` |
34 | 11 |
|
35 | | -2. **Start the development server** (with mobile SDK key): |
| 12 | +2. **Start the OTel collector** (and view logs): |
36 | 13 | ```bash |
37 | | - LAUNCHDARKLY_MOBILE_KEY=<your_mobile_sdk_key> yarn ios |
| 14 | + yarn otel:start |
38 | 15 | ``` |
39 | 16 |
|
40 | | -3. **Run on your platform**: |
41 | | - - Follow instructions to run on whatever platform |
42 | | - |
43 | | -4. **Configure LaunchDarkly** (optional): |
| 17 | +3. **Configure LaunchDarkly** (optional): |
44 | 18 | - Adjust OTLP endpoint and configuration as needed |
45 | 19 |
|
46 | | -## Demo Features |
47 | | - |
48 | | -The app includes several interactive demonstrations: |
49 | | - |
50 | | -### 1. Session Information |
51 | | -- Displays current session ID, user ID, device ID, app version, and platform |
52 | | -- Shows automatic session tracking capabilities |
53 | | - |
54 | | -### 2. Test Observability Features |
55 | | -- **Record Test Error**: Demonstrates custom error recording with metadata |
56 | | -- **Make Network Request**: Shows automatic network request tracing and logging |
57 | | -- **Record Custom Metrics**: Examples of various metric types (count, histogram, etc.) |
58 | | -- **Set Random User ID**: Demonstrates user association with sessions |
59 | | - |
60 | | -### 3. Automatic Instrumentation |
61 | | -- Console logging is automatically hooked and sent as structured logs |
62 | | -- Network requests are automatically traced |
63 | | -- Errors are automatically captured with stack traces |
64 | | -- App lifecycle events are tracked |
| 20 | +4. **Start the development server**: |
| 21 | + ```bash |
| 22 | + # Make sure to set your SDK key when starting the app |
| 23 | + LAUNCHDARKLY_MOBILE_KEY=<your_mobile_sdk_key> yarn ios |
| 24 | + ``` |
65 | 25 |
|
66 | 26 | ## Configuration |
67 | 27 |
|
68 | 28 | ### LaunchDarkly Setup |
69 | 29 |
|
70 | | -The observability plugin is configured in `lib/launchdarkly.ts`: |
71 | | - |
72 | | -```typescript |
73 | | -new Observability({ |
74 | | - serviceName: 'react-native-otel-demo', |
75 | | - serviceVersion: Constants.expoConfig?.version || '1.0.0', |
76 | | - otlpEndpoint: Constants.expoConfig?.extra?.sdkKey, |
77 | | - enableTracing: true, |
78 | | - enableLogs: true, |
79 | | - enableMetrics: true, |
80 | | - enableErrorTracking: true, |
81 | | - enablePerformanceMonitoring: true, |
82 | | - enableConsoleLogging: true, |
83 | | - debug: __DEV__, |
84 | | - customHeaders: { |
85 | | - 'x-service-name': 'react-native-otel-demo', |
86 | | - }, |
87 | | - sessionTimeout: 30 * 60 * 1000, // 30 minutes |
88 | | -}) |
89 | | -``` |
90 | | - |
91 | | -### OTLP Endpoint Configuration |
92 | | - |
93 | | -By default, the app uses `https://otlp.highlight.io:4318` as the OTLP endpoint. You can: |
94 | | - |
95 | | -1. Use your own OpenTelemetry collector |
96 | | -2. Use a different observability platform (Jaeger, Zipkin, etc.) |
97 | | -3. Use LaunchDarkly's own observability endpoints |
98 | | - |
99 | | -Update the `otlpEndpoint` and `customHeaders` in the configuration as needed. |
100 | | - |
101 | | -## Development Console |
102 | | - |
103 | | -Check your development console to see: |
104 | | - |
105 | | -- **Structured Logs**: All console messages with session context |
106 | | -- **Trace Information**: Span details and trace hierarchy |
107 | | -- **Error Details**: Stack traces and error metadata |
108 | | -- **Performance Metrics**: Request durations and custom metrics |
109 | | -- **Session Events**: User actions and lifecycle events |
110 | | - |
111 | | -## Observability API Usage |
112 | | - |
113 | | -### Manual Instrumentation |
114 | | - |
115 | | -```typescript |
116 | | -import { LDObserve } from '@launchdarkly/observability-react-native'; |
117 | | - |
118 | | -// Record custom errors |
119 | | -LDObserve.recordError(error, sessionId, requestId, metadata); |
120 | | - |
121 | | -// Record custom metrics |
122 | | -LDObserve.recordMetric({ |
123 | | - name: 'user_action', |
124 | | - value: 1, |
125 | | - attributes: { action: 'button_click', screen: 'home' } |
126 | | -}); |
127 | | - |
128 | | -// Record custom logs |
129 | | -LDObserve.recordLog('User action', 'info', sessionId, requestId, metadata); |
130 | | - |
131 | | -// Trace custom operations |
132 | | -LDObserve.runWithHeaders('operation-name', {}, (span) => { |
133 | | - span.setAttribute('custom.attribute', 'value'); |
134 | | - // Your operation code here |
135 | | -}); |
136 | | - |
137 | | -// Set user ID for session tracking |
138 | | -await LDObserve.setUserId('user123'); |
139 | | -``` |
140 | | - |
141 | | -### Session Management |
142 | | - |
143 | | -```typescript |
144 | | -// Get current session information |
145 | | -const sessionInfo = await LDObserve.getSessionInfo(); |
146 | | - |
147 | | -// Set user ID |
148 | | -await LDObserve.setUserId('user123'); |
149 | | - |
150 | | -// Check if observability is initialized |
151 | | -const isReady = LDObserve.isInitialized(); |
152 | | -``` |
153 | | - |
154 | | -## Project Structure |
155 | | - |
156 | | -``` |
157 | | -e2e/react-native-otel/ |
158 | | -├── app/ # App screens and navigation |
159 | | -│ ├── (tabs)/ |
160 | | -│ │ ├── index.tsx # Main demo screen |
161 | | -│ │ └── explore.tsx # Secondary screen |
162 | | -│ └── _layout.tsx # Root layout with LaunchDarkly initialization |
163 | | -├── lib/ |
164 | | -│ └── launchdarkly.ts # LaunchDarkly and Observability configuration |
165 | | -├── components/ # Reusable UI components |
166 | | -├── assets/ # Images and other assets |
167 | | -├── app.json # Expo configuration |
168 | | -├── package.json # Dependencies and scripts |
169 | | -└── README.md # This file |
170 | | -``` |
171 | | - |
172 | | -## Dependencies |
173 | | - |
174 | | -### Core Dependencies |
175 | | -- `@launchdarkly/react-native-client-sdk`: LaunchDarkly feature flags |
176 | | -- `@launchdarkly/observability-react-native`: Observability instrumentation |
177 | | -- `expo`: Expo SDK and tooling |
178 | | - |
179 | | -### Required Peer Dependencies |
180 | | -- `@react-native-async-storage/async-storage`: Persistent storage |
181 | | -- `react-native-device-info`: Device information |
182 | | - |
183 | | -## Troubleshooting |
184 | | - |
185 | | -### Common Issues |
186 | | - |
187 | | -1. **LaunchDarkly not initialized**: |
188 | | - - Check that you've set a valid mobile key |
189 | | - - Ensure internet connectivity |
190 | | - |
191 | | -2. **Observability data not appearing**: |
192 | | - - Verify OTLP endpoint configuration |
193 | | - - Check network connectivity |
194 | | - - Enable debug mode in configuration |
195 | | - |
196 | | -3. **Build errors**: |
197 | | - - Run `yarn install` from the monorepo root |
198 | | - - Clear Metro cache: `npx expo start --clear` |
199 | | - |
200 | | -### Debug Mode |
201 | | - |
202 | | -Enable debug mode by setting `debug: true` in the Observability configuration. This will log detailed information about: |
203 | | -- Telemetry data being sent |
204 | | -- Network requests to OTLP endpoints |
205 | | -- Session management |
206 | | -- Error details |
207 | | - |
208 | | -## New Architecture Support |
209 | | - |
210 | | -This app is configured to use React Native's New Architecture by default (enabled in `app.json`). The LaunchDarkly Observability SDK is fully compatible with the New Architecture. |
211 | | - |
212 | | -## Contributing |
213 | | - |
214 | | -To add new observability features or fix issues: |
215 | | - |
216 | | -1. Make changes to the relevant files |
217 | | -2. Test on both iOS and Android |
218 | | -3. Verify observability data is being generated correctly |
219 | | -4. Update this README if needed |
220 | | - |
221 | | -## Learn More |
222 | | - |
223 | | -- [LaunchDarkly React Native SDK Documentation](https://docs.launchdarkly.com/sdk/client-side/react/react-native) |
224 | | -- [LaunchDarkly Observability SDK Documentation](../../../sdk/@launchdarkly/observability-react-native/README.md) |
225 | | -- [Expo Documentation](https://docs.expo.dev/) |
226 | | -- [OpenTelemetry Documentation](https://opentelemetry.io/docs/) |
| 30 | +The observability plugin is configured in `lib/launchdarkly.ts`. |
0 commit comments