Sazabi React Native SDK

​

About

• Follow a single user’s session from launch to error, across app launches when you give it a storage adapter
• Catch JavaScript errors that reach React Native’s global error handler, fatal ones included, errors thrown while React renders, and unhandled promise rejections on Hermes, with stack traces
• See every touch as an episode, with taps and rage taps derived from them
• Join mobile network calls to backend logs on a shared trace_id
• Use AI to investigate a mobile session end to end

​

What gets captured

​

Configuration

​

Delivery

​

Privacy controls

• Touch names come from developer-authored props only: accessibilityLabel, testID, or a sazabiName prop. Child text is never read. Add sazabiMask to any ancestor to suppress names under it.
• The navigation row records param keys, not values. A deep link’s query string stays in the screen path.
• Request and response bodies are never captured.
• Sensitive URL parameters are redacted. The values of tokens, OAuth codes, API keys, and presigned-URL signatures in a request URL become [redacted]; add your own names with network.redactQueryParams. Credentials in the URL (user:pass@) are never recorded.
• Consent gating. Pass consent: () => boolean | Promise<boolean> and the SDK installs nothing until it resolves true.
• Client-asserted identity. session.distinct_id is whatever the app claims. Treat it as a claim, not as proof of identity.
• Contained failures. Each SDK hook catches its own errors, so a failure inside the SDK is not thrown into your app code. shutdown() removes the network, console, and touch instrumentation; the global error handler and the Hermes rejection tracker cannot be handed back, so they stay installed and do nothing.

​

Prerequisites

• A React Native app on 0.76 or later, or an Expo app on SDK 52 or later.
• A Sazabi project.
• Optional: a key-value store for the storage adapter, such as @react-native-async-storage/async-storage.

​

Set up in the dashboard

npm install @sazabi/react-native @react-native-async-storage/async-storage
# Expo: npx expo install @sazabi/react-native @react-native-async-storage/async-storage

// Import first, because a module that runs earlier can capture the native
// XMLHttpRequest methods before the SDK wraps them.
import "@sazabi/react-native/register";

import AsyncStorage from "@react-native-async-storage/async-storage";
import { init } from "@sazabi/react-native";

init({
  intakeUrl: "<your intake URL>",
  serviceName: "my-mobile-app",
  serviceVersion: "1.4.2",
  environment: "production",
  storage: AsyncStorage, // optional
});

import { useEffect } from "react";
import {
  NavigationContainer,
  useNavigationContainerRef,
} from "@react-navigation/native";
import { SazabiRoot, trackNavigation } from "@sazabi/react-native";

export default function App() {
  const navigationRef = useNavigationContainerRef();
  useEffect(() => trackNavigation(navigationRef), [navigationRef]);
  return (
    <SazabiRoot>
      <NavigationContainer ref={navigationRef}>{/* screens */}</NavigationContainer>
    </SazabiRoot>
  );
}

import { useEffect } from "react";
import { Stack, useNavigationContainerRef } from "expo-router";
import { SazabiRoot, trackNavigation } from "@sazabi/react-native";

export default function RootLayout() {
  const navigationRef = useNavigationContainerRef();
  useEffect(() => trackNavigation(navigationRef), [navigationRef]);
  return (
    <SazabiRoot>
      <Stack />
    </SazabiRoot>
  );
}

init({
  // …
  network: {
    allowlist: ["https://api.example.com"],
  },
});

import { addEvent, identify, log, reset } from "@sazabi/react-native";

identify("user_123", { plan: "pro" }); // on sign-in, an internal id, not an email
addEvent("checkout_started", { cartValue: 42 }); // custom mark
log("ERROR", "checkout failed", { orderId }); // app log line
reset(); // on sign-out

​

Set up with the CLI

sazabi log-sources create sazabi_react_native_sdk --mode manual

​

Verify

1. Use your app: launch it and tap through a few screens. The SDK flushes every 5 seconds by default, and again when the app goes to the background, so events land within about 10 seconds.
2. Check the app: in the Metro console or the device’s network inspector, POSTs to your intake host’s /v1/logs should return 200.
3. Confirm arrival: open the Intake page in the Sazabi dashboard and confirm records from the Sazabi React Native SDK source appear, or ask the agent in a thread: “Show me recent mobile sessions.”

​

Troubleshooting

​

Log stream states

​

Further reading