errsight-rn

React Native client for ErrSight error tracking. Captures errors and log events from your app and ships them to the ErrSight API in batches.

Features

• Automatic crash capture via React Native's ErrorUtils
• Unhandled promise rejection tracking
• React ErrorBoundary component
• Batched event delivery with configurable flush interval
• Automatic flush on app background/inactive
• Log levels: debug, info, warning, error, fatal
• User context (id, email) attached to every event
• Device context (platform, OS, OS version) included automatically

Installation

npm install errsight-rn
# or
yarn add errsight-rn

Quick Start

Initialise the client once at app startup (e.g. in App.tsx):

import { init } from 'errsight-rn';

init({
  apiKey: 'elp_your_api_key_here',
  environment: 'production',
  minLevel: 'error',
});

That's it — unhandled errors and promise rejections are now captured automatically.

Configuration

| Option | Type | Default | Description | |--------|------|---------|-------------| | apiKey | string | required | Your project API key (elp_...) | | host | string | https://errsight.com | ErrSight API host | | environment | string | production | Environment name | | minLevel | string | error | Minimum level to capture (debug, info, warning, error, fatal) | | batchSize | number | 10 | Events per HTTP request | | flushInterval | number | 2000 | Background flush interval in ms | | captureGlobalErrors | boolean | true | Auto-capture crashes and unhandled rejections |

Manual Logging

import { getClient } from 'errsight-rn';

const client = getClient();

client?.debug('Cache miss', { metadata: { key: 'user:42' } });
client?.info('User signed in');
client?.warn('Deprecated API called');
client?.error('Payment failed', { metadata: { orderId: '123' } });
client?.fatal('Database unreachable');

Capturing Errors

try {
  await riskyOperation();
} catch (err) {
  client?.captureError(err, {
    metadata: { operation: 'riskyOperation' },
  });
}

User Context

Attach user info so errors are linked to the affected user:

// After sign-in
client?.setUser({ id: 42, email: '[email protected]' });

// After sign-out
client?.clearUser();

React Integration

ErrorBoundary

Wrap your component tree to catch render errors:

import { ErrorBoundary } from 'errsight-rn/react';

function App() {
  return (
    <ErrorBoundary fallback={<Text>Something went wrong.</Text>}>
      <MainScreen />
    </ErrorBoundary>
  );
}

With a render-prop fallback for reset:

<ErrorBoundary
  fallback={({ error, reset }) => (
    <View>
      <Text>{error.message}</Text>
      <Button title="Try again" onPress={reset} />
    </View>
  )}
>
  <Dashboard />
</ErrorBoundary>

ErrsightProvider & useErrsight

Access the client from any component via context:

import { ErrsightProvider, useErrsight } from 'errsight-rn/react';

function App() {
  return (
    <ErrsightProvider>
      <MainScreen />
    </ErrsightProvider>
  );
}

function MainScreen() {
  const logger = useErrsight();

  return (
    <Button
      title="Log event"
      onPress={() => logger?.info('Button pressed')}
    />
  );
}

Flushing & Shutdown

Events are flushed automatically every flushInterval ms and when the app moves to background. You can also flush manually:

// Flush immediately (e.g. before navigation)
client?.flush();

// Clean shutdown (flushes remaining events, removes listeners)
client?.shutdown();

License

MIT