React Native SDK for Instalog - a developer tool for debugging mobile apps. It provides error tracking, crash reporting, user feedback collection, and event logging capabilities for React Native applications.
npm i @instalog.dev/react-native
For feedback functionality on Android, ensure you have the Instalog activity registered in your AndroidManifest.xml:
<activity android:name="dev.instalog.mobile.feedback.InstalogFeedbackActivity" android:label="Instalog" android:theme="@style/Theme.Instalog"/>
Initialize Instalog at the beginning of your app, typically in your main App file:
import { Instalog } from '@instalog.dev/react-native'; // Initialize with default options await Instalog.initialize('YOUR_API_KEY'); // Or with custom options await Instalog.initialize('YOUR_API_KEY', { isFeedbackEnabled: true, isCrashEnabled: true, isLogEnabled: true, isLoggerEnabled: true, autoCaptureCrashes: true, errorGrouping: { enabled: true, flushIntervalMs: 30000, errorThreshold: 5, timeWindowMs: 60000, flushOnBackground: true, }, });
Identify your users to associate logged events and crashes with specific users:
await Instalog.identifyUser('user_id_or_email');
Log specific events with optional properties:
await Instalog.log('button_clicked', { screen: 'HomeScreen', buttonType: 'primary', timestamp: new Date().toISOString(), });
Use the ErrorBoundary component to catch and report React component errors:
import { Instalog } from '@instalog.dev/react-native'; export default function App() { return ( <Instalog.ErrorBoundary fallback={<YourCustomErrorScreen />} onError={(error, errorInfo) => { // Handle the error event, if needed console.log('Caught an error:', error); }} > <YourApp /> </Instalog.ErrorBoundary> ); }
Send manual error reports:
try { // Some code that might throw riskyOperation(); } catch (error) { if (error instanceof Error) { // Format the error into a report const report = Instalog.formatErrorReport(error); // Send the report to Instalog await Instalog.sendCrash('Custom Error Name', report); } }
Show a feedback modal to collect user feedback:
await Instalog.showFeedbackModal();
// Simulate a crash for testing await Instalog.simulateCrash();
| Method | Description |
|---|---|
initialize(apiKey, options) |
Initializes the Instalog SDK with API key and options |
identifyUser(userId) |
Sets the user ID for tracking |
log(event, properties) |
Logs an event with optional properties |
sendCrash(name, report) |
Manually sends a crash report |
showFeedbackModal() |
Shows the feedback collection UI |
simulateCrash() |
Simulates a crash for testing |
formatErrorReport(error, errorInfo) |
Formats an error into a structured report |
ErrorBoundary |
React component to catch and report rendering errors |
| Option | Type | Default | Description |
|---|---|---|---|
isCrashEnabled |
boolean | false | Enable crash reporting |
isFeedbackEnabled |
boolean | false | Enable user feedback collection |
isLogEnabled |
boolean | false | Enable event logging |
isLoggerEnabled |
boolean | false | Enable console logging |
autoCaptureCrashes |
boolean | false | Automatically capture unhandled JS errors |
errorGrouping |
object | See below | Configuration for error grouping behavior |
| Option | Type | Default | Description |
|---|---|---|---|
enabled |
boolean | true | Whether to enable error grouping |
flushIntervalMs |
number | 30000 | Interval between error group flush checks (ms) |
errorThreshold |
number | 5 | Number of occurrences before sending a group report |
timeWindowMs |
number | 60000 | Max age before sending a group report (ms) |
flushOnBackground |
boolean | true | Flush errors when app goes to background |
requireNetwork |
boolean | true | Check network status before sending reports |
maxErrorsPerGroup |
number | 10 | Max errors to store per group |
dynamicFlushInterval |
boolean | true | Enable dynamic flush intervals based on error frequency |
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library