Skip to content

Commit 7ffc912

Browse files
committed
Clean up README
1 parent 144ddbd commit 7ffc912

File tree

2 files changed

+12
-211
lines changed

2 files changed

+12
-211
lines changed

e2e/react-native-otel/README.md

Lines changed: 11 additions & 207 deletions
Original file line numberDiff line numberDiff line change
@@ -1,226 +1,30 @@
11
# React Native OpenTelemetry Demo
22

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.
274

285
## Getting Started
296

30-
1. **Install dependencies** (from the monorepo root):
7+
1. **Install dependencies**:
318
```bash
329
yarn install
3310
```
3411

35-
2. **Start the development server** (with mobile SDK key):
12+
2. **Start the OTel collector** (and view logs):
3613
```bash
37-
LAUNCHDARKLY_MOBILE_KEY=<your_mobile_sdk_key> yarn ios
14+
yarn otel:start
3815
```
3916

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):
4418
- Adjust OTLP endpoint and configuration as needed
4519

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+
```
6525

6626
## Configuration
6727

6828
### LaunchDarkly Setup
6929

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`.

e2e/react-native-otel/package.json

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,7 @@
99
"ios": "expo start --ios",
1010
"web": "expo start --web",
1111
"lint": "expo lint",
12-
"otel:start": "docker-compose -f docker-compose.yaml up -d",
13-
"otel:stop": "docker-compose -f docker-compose.yaml down",
14-
"otel:logs": "docker-compose -f docker-compose.yaml logs -f otel-collector",
15-
"otel:restart": "yarn otel:stop && yarn otel:start"
12+
"otel:start": "docker-compose -f docker-compose.yaml up"
1613
},
1714
"dependencies": {
1815
"@expo/vector-icons": "^14.1.0",

0 commit comments

Comments
 (0)