Advanced Configuration

Testing Feature Flags

When using feature flags extensively, configure Reccy to test new features with older sessions.

How It Works

Sessions recorded before a feature flag existed can still test that feature by:

1. Reccy detects which feature flags affect the session’s code path
2. During replay, Reccy can inject different flag values
3. The same session exercises new code paths without re-recording

Configuration

In your project settings, navigate to Feature Flags and:

1. Define your feature flag source (LaunchDarkly, Split, custom)
2. Map flag names to their possible values
3. Reccy will automatically test sessions with different flag combinations

---

Network Stubbing

By default, Reccy stubs all XHR, Fetch, and WebSocket requests with recorded responses. You can customize this behavior.

Passing Through Requests

To test your backend code alongside frontend changes:

1. Go to Project Settings > Network Stubbing
2. Select which request patterns to pass through
3. These requests will hit your actual backend during replay

Caution

Passing through requests makes tests non-deterministic and slower. Use sparingly for integration testing.

Next.js App Router

For Next.js apps using the App Router, Reccy automatically passes through React Server Component requests while stubbing other API calls. This is enabled by default for detected Next.js projects.

---

Source Maps for Coverage

Enable detailed per-file coverage by providing source maps.

Setup

1. Ensure your build generates source maps
2. In Project Settings > Coverage, enable source map upload
3. Configure your CI workflow to upload maps:

- uses: reccy/report-diffs-action/upload-assets@v1
  with:
    api-token: ${{ secrets.RECCY_API_TOKEN }}
    app-directory: "dist"
    source-maps: true

With source maps, you can:

• View coverage percentages per file and folder
• Identify untested code paths
• Prioritize which user flows to record

---

Cross-Environment Recording

Record sessions in one environment (production) and replay against another (staging/preview).

Requirements

For cross-environment replay to work:

Aspect	Must Match
Routes	Same URL patterns
Auth	Compatible token format
APIs	Same endpoint paths
Assets	Use relative URLs

Common Issues

Assets loading from wrong environment:

<!-- Won't work cross-environment -->
<script src="https://prod.example.com/app.js"></script>

<!-- Works everywhere -->
<script src="/app.js"></script>

Auth tokens rejected:

• Ensure test environments accept tokens from the recording environment
• Or configure token refresh for the target environment

---

Monorepo Configuration

For monorepos with multiple apps:

Separate Projects

Create a Reccy project per app, each with its own:

• Recording token
• Session pool
• CI workflow

Shared Sessions

If apps share components, you can:

1. Record sessions from the consumer app
2. Configure Reccy to test both consumer and component library changes
3. Set up path-based workflow triggers:

on:
  push:
    paths:
      - "apps/web/**"
      - "packages/ui/**"

---

Controlling Recording

Start/Stop Programmatically

For single-page apps or complex initialization:

import { startRecording, stopRecording } from "@reccyai/recorder";

// Start after specific conditions
await authenticateUser();
startRecording();

// Stop before sensitive operations
stopRecording();
await processPayment();
startRecording();

Buffering Mode

Record to memory first, then decide whether to send:

import { initRecorder, flush, discard } from "@reccyai/recorder";

initRecorder({
  recordingToken: "<<TOKEN>>",
  bufferMode: true,
});

// Later, based on conditions:
if (userOptedIn) {
  await flush(); // Send buffered data
} else {
  discard(); // Clear buffer without sending
}