Journey Recording

Journey Recording captures the complete path a user takes through your app: screen transitions, gestures, tap locations, scroll events, and periodic screenshots — all correlated into a visual timeline in the Desktop App.

Setup

Journey recording activates automatically when debug mode is enabled. For reliable screen attribution, pass your navigation ref:

1. Initialize with Debug Mode

import WhatzBug from '@whatzbug/react-native';

await WhatzBug.init({
  projectId: 'your-project-id',
  publishableKey: 'pk_your_key',
  apiBaseUrl: 'https://api.whatzbug.com',
  debug: true,
});

2. Screen Attribution (Recommended)

import { createNavigationContainerRef } from '@react-navigation/native';

const navigationRef = createNavigationContainerRef();
WhatzBug.setNavigationRef(navigationRef);

// Use navigationRef in your NavigationContainer:
<NavigationContainer ref={navigationRef}>
  <RootNavigator />
</NavigationContainer>

Legacy: Manual Screen Components

The previous setup using WZBDebugRoot and per-screen WZBScreen wrappers still works but is no longer required. See React Components for details.

Components

<WZBDebugRoot> (optional — legacy)

Root wrapper that enables gesture tracking. No longer required with the simplified integration model — gesture capture is wired automatically when debug mode is active.

<WZBScreen name="..."> (optional — manual override)

Marks a component as a named screen. Prefer setNavigationRef() for automatic screen attribution. Use WZBScreen or the useWZBScreen(name) hook only if you need manual screen naming.

<WZBScrollView>

Drop-in replacement for React Native's ScrollView that automatically tracks scroll depth and velocity.

<WZBFlatList>

Drop-in replacement for FlatList with gesture-aware scroll tracking.

<WZBSectionList>

Drop-in replacement for SectionList with gesture-aware scroll tracking.

Configuration Options

What Gets Captured

• Screen transitions: Navigation events with screen names and timestamps.
• Tap events: Location (x, y), target component, screen name.
• Scroll events: Scroll depth, velocity, direction, container identity.
• Screenshots: Periodic JPEG captures at configurable intervals.
• Lifecycle events: App backgrounding, foregrounding, session boundaries.

Next Steps