# noibu-react-native (v2)

Noibu session replay and error monitoring for React Native. v2 is a thin JS layer over the same
native SDKs every Noibu mobile app uses: on Android the `com.noibu.mobile:session-replay-android`
module (100% Noibu-owned rrweb capture — replay, touches with DXA selectors, keyboard, network,
crashes), on iOS the NoibuSessionReplay Swift package.

See the [CHANGELOG](CHANGELOG.md) for the v0.x → v2 changes and breaking changes.

## Install

```sh
npm install noibu-react-native
cd ios && pod install   # iOS
```

Supports both the old and the new React Native architecture (TurboModule spec in `specs/`).

## Initialize

```ts
import { Noibu } from 'noibu-react-native';

Noibu.init({
  domain: 'shop.example.com', // provided by Noibu
});
```

Call it early (e.g. top of `index.js` / `App.tsx`). All capture starts natively — no further wiring
required. Optional config:

```ts
Noibu.init({
  domain: 'shop.example.com',
  logLevel: 'info',            // integration-debugging diagnostics
  trackTouches: true,
  trackKeyboard: true,
  trackNetwork: true,          // kill switch for all HTTP capture
  trackErrors: true,           // JS handlers + native crash handler
  autoTrackNavigation: false,  // native page per Activity/Fragment (no-wiring fallback)
  captureJsNetwork: false,     // JS fetch/XHR fallback instead of native capture
});
```

## Pages (react-navigation)

```tsx
import { createNavigationContainerRef, NavigationContainer } from '@react-navigation/native';
import { useNoibuNavigation } from 'noibu-react-native';

const navigationRef = createNavigationContainerRef();

function App() {
  useNoibuNavigation(navigationRef);
  return <NavigationContainer ref={navigationRef}>…</NavigationContainer>;
}
```

Other routers: call `Noibu.trackNavigation('ScreenName')` when a screen appears, or set
`autoTrackNavigation: true`.

## Errors & attributes

```ts
Noibu.addError(new Error('Payment declined'));
Noibu.addError('Payment declined', stackString);
Noibu.addCustomAttribute('customerId', '42');
```

Uncaught JS exceptions, unhandled promise rejections (Hermes) and native crashes are captured
automatically. Wrap subtrees with `ErrorBoundary` to also catch React render errors:

```tsx
import { ErrorBoundary } from 'noibu-react-native';
<ErrorBoundary fallback={<Oops />}>…</ErrorBoundary>
```

The v0.x `setupNoibu` and `NoibuJS.*` entry points still work (deprecated — see the CHANGELOG).

## Network capture

Android injects Noibu's OkHttp interceptor via `OkHttpClientProvider`, capturing JS `fetch`/XHR and
native requests alike; iOS captures via `NoibuURLProtocol`. If your app installs its own
`OkHttpClientFactory`, add the interceptor to your builder instead:

```kotlin
OkHttpClientProvider.setOkHttpClientFactory {
  OkHttpClientProvider.createClientBuilder(context)
    .installNetworkInstrumentation() // com.noibu.mobile.sessionreplay.api
    .build()
}
```

## WebView capture (hybrid replay)

Wrap web content in `NoibuWebView` — a drop-in replacement for react-native-webview's `WebView`
that enables Noibu tracking on the underlying native webview BEFORE its first document loads
(replay, clicks, JS errors and HTTP of the page join the session timeline):

```tsx
import { NoibuWebView } from 'noibu-react-native';

<NoibuWebView source={{ uri: 'https://shop.example.com/checkout' }} style={{ flex: 1 }} />
```

Requires the optional peer dependency `react-native-webview >= 13`. Webviews rendered with the
plain `WebView` component are NOT captured — wrapping is the per-webview opt-in (mirror of the
native SDK's `WebViewTracking.enable`), so sensitive webviews (payment 3DS, SSO) stay untracked
by simply not wrapping them. `trackWebViews: false` in `NoibuConfig` disables webview capture
SDK-wide regardless of wrapping.

## Known limitations

- **`privacyMode` is not configurable yet** — capture defaults to mask-sensitive on both
  platforms. A config option is planned.
- **iOS webviews under the new architecture (Fabric)** aren't resolved for tracking yet; the
  legacy (Paper) view registry is supported.
- **RN < 0.76**: backgrounds, corner radii and borders of RN-drawn native views aren't captured
  in replay (older hosts degrade gracefully — text, layout and images still capture).