Error tracking, crash reporting, and navigation monitoring for iOS and Android apps.
React Native Integration
Error tracking and monitoring for React Native applications. Captures native crashes, tracks screen views, monitors app state changes, and provides an error boundary component.
npm install @codmir/sdkQuick Start
// App.tsx
import * as Codmir from '@codmir/sdk/react-native';
Codmir.init({
dsn: 'https://your-project.codmir.com/api/overseer',
captureNativeCrashes: true,
trackScreenViews: true,
});
export default function App() {
return <YourApp />;
}Configuration
import { init } from '@codmir/sdk/react-native';
init({
dsn: process.env.CODMIR_DSN,
// Native crash capture (default: true)
captureNativeCrashes: true,
// Screen view tracking (default: true)
trackScreenViews: true,
// App state change tracking (default: true)
trackAppState: true,
// Include device metadata (default: true)
includeDeviceInfo: true,
});Config Reference
| Option | Type | Default | Description |
|---|---|---|---|
captureNativeCrashes | boolean | true | Capture native crash errors via global handler |
trackScreenViews | boolean | true | Auto-track screen views |
trackAppState | boolean | true | Track foreground/background transitions |
includeDeviceInfo | boolean | true | Include device metadata in events |
Device Information
Set device info to tag all events with platform, OS version, model, and app version.
import { setDeviceInfo } from '@codmir/sdk/react-native';
import DeviceInfo from 'react-native-device-info';
setDeviceInfo({
platform: Platform.OS as 'ios' | 'android',
osVersion: Platform.Version.toString(),
deviceModel: await DeviceInfo.getModel(),
appVersion: DeviceInfo.getVersion(),
buildNumber: DeviceInfo.getBuildNumber(),
isEmulator: await DeviceInfo.isEmulator(),
});Navigation Tracking
Manual Screen Tracking
import { trackScreenView } from '@codmir/sdk/react-native';
// Call from your navigation listener
trackScreenView('HomeScreen');
trackScreenView('ProfileScreen', { userId: 'u_123' });React Navigation Integration
import { createNavigationListener } from '@codmir/sdk/react-native';
import { NavigationContainer } from '@react-navigation/native';
function App() {
return (
<NavigationContainer onStateChange={createNavigationListener()}>
<Stack.Navigator>{/* screens */}</Stack.Navigator>
</NavigationContainer>
);
}App State Tracking
Track foreground/background transitions for crash context.
import { trackAppStateChange } from '@codmir/sdk/react-native';
import { AppState } from 'react-native';
AppState.addEventListener('change', (nextState) => {
trackAppStateChange(nextState);
});Error Boundary
Wrap your app or screen trees to capture React rendering errors.
import { createErrorBoundary } from '@codmir/sdk/react-native';
import React from 'react';
const ErrorBoundary = createErrorBoundary(React);
export default function App() {
return (
<ErrorBoundary
fallback={<ErrorScreen />}
onError={(error, componentStack) => {
console.log('Caught by boundary:', error.message);
}}
>
<YourApp />
</ErrorBoundary>
);
}Manual Capture
import {
captureException,
captureMessage,
setUser,
addBreadcrumb,
} from '@codmir/sdk/react-native';
setUser({ id: 'user-123', email: '[email protected]' });
addBreadcrumb({
category: 'user.action',
message: 'Tapped purchase button',
data: { productId: 'prod-456' },
});
try {
await purchaseItem(productId);
} catch (error) {
captureException(error, {
extra: { productId, screen: 'ProductDetail' },
});
}TypeScript Support
import type {
ReactNativeConfig,
DeviceInfo,
ErrorBoundaryProps,
OverseerConfig,
UserContext,
Breadcrumb,
} from '@codmir/sdk/react-native';