@instalog.dev/react-native

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.

Installation

npm i @instalog.dev/react-native

Platform-specific Setup

Android

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"/>

Usage

Initialization

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,
  },
});

User Identification

Identify your users to associate logged events and crashes with specific users:

await Instalog.identifyUser('user_id_or_email');

Event Logging

Log specific events with optional properties:

await Instalog.log('button_clicked', {
  screen: 'HomeScreen',
  buttonType: 'primary',
  timestamp: new Date().toISOString(),
});

Error Boundary

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>
  );
}

Manual Error Reporting

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);
  }
}

User Feedback

Show a feedback modal to collect user feedback:

await Instalog.showFeedbackModal();

Test/Debug Methods

// Simulate a crash for testing
await Instalog.simulateCrash();

API Reference

Instalog

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

Options

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

Error Grouping Options

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

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library