@spectosh/react-native

Specto for React Native apps. A session records the app's screens, network requests, console output, JavaScript errors and your custom events, and the dashboard treats it like a web session: it shows up in Sessions (Device: mobile or tablet), its errors group into Issues, and its screens count in funnels and paths as pages (/Checkout).

Apps have no DOM, so there is no screen replay — a session's page shows its timeline, requests, logs and errors.

Install

npm install @spectosh/react-native @react-native-async-storage/async-storage

AsyncStorage is optional; it keeps one visitor id across app launches. Without it, every launch is a new visitor.

Start

import AsyncStorage from '@react-native-async-storage/async-storage'
import { init } from '@spectosh/react-native'

const specto = await init({
  key: 'pk_…',                          // the project's public key
  endpoint: 'https://specto.example.com', // your Specto instance
  storage: AsyncStorage,
  app: { name: 'Shop', version: '1.4.2' },
})

init reads the project's capture settings (Settings → Privacy): when recording is off, or the session falls outside the sample rate, it records nothing.

Screens, users and events

// React Navigation: every focused route becomes a screen
<NavigationContainer ref={navigationRef} onReady={() => specto.trackNavigation(navigationRef)}>

// or by hand
specto.screen('Checkout')

specto.identify(user.id, { plan: 'pro' })
specto.track('checkout_started', { items: 3 })
specto.captureError(error) // caught errors; uncaught ones are recorded for you

What is recorded

| | | |---|---| | Screens | trackNavigation or screen(name) | | Requests | method, URL, status and duration of every fetch/XMLHttpRequest (not bodies or headers); privacy: 'strict' drops query strings | | Console | console.log/info/warn/error/debug text; strict privacy masks it; captureConsole: false turns it off | | Errors | uncaught errors (through ErrorUtils, the app's own handler still runs) and captureError |

Email addresses and card-length numbers are replaced before anything leaves the device. Events are sent in batches every 5 seconds and when the app goes to the background; a batch that fails is retried with the same number, so the server stores it once. After 30 minutes in the background the next foreground starts a new session.

Options

| Option | Default | | |---|---|---| | key | — | the project's public key | | endpoint | — | your Specto URL | | storage | memory | getItem/setItem (AsyncStorage) | | app | — | { name, version }, shown in the session's user agent | | privacy | 'balanced' | 'strict': no query strings, console masked | | captureConsole | true | | | captureNetwork | true | | | sampleRate | 1 | the lower of this and the project's applies | | tablet | false | count an Android tablet as a tablet |

@spectosh/react-native/core exports createSpecto without React Native imports, for tests or other JavaScript runtimes.