noibu_flutter 1.0.0-rc.2

Noibu session replay SDK for Flutter. Captures user sessions and replays them in the Noibu dashboard for debugging.

Noibu Flutter SDK

Session replay SDK for Flutter. Captures user sessions and replays them in the Noibu dashboard for debugging.

Installation

Add to your pubspec.yaml:

dependencies:
  noibu_flutter: ^0.1.0

Android

Set minSdkVersion to 26 or higher in android/app/build.gradle:

android {
    defaultConfig {
        minSdkVersion 26
    }
}

iOS

Set the platform to iOS 16.0 or higher in your Podfile:

platform :ios, '16.0'

Usage

Initialize

import 'package:noibu_flutter/noibu_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await NoibuSessionReplay.instance.initialize(
    const NoibuConfiguration(domain: 'your-domain.noibu.com'),
  );

  runApp(NoibuSessionReplay.instance.wrapWithCapture(child: MyApp()));
}

Navigation tracking

The SDK provides two ways to track navigation.

Option 1 — Navigation observer (only works with named routes):

MaterialApp(
  navigatorObservers: [
    NoibuSessionReplay.instance.navigationObserver,
  ],
)

Option 2 — Manual tracking (recommended when using MaterialPageRoute without named routes):

await NoibuSessionReplay.instance.didNavigate(pageName: 'ProductDetail');
Navigator.push(context, MaterialPageRoute(builder: (_) => ProductDetailScreen()));

Important: If you use MaterialPageRoute without a RouteSettings(name: ...), the navigation observer will not register the view. Use didNavigate manually in that case. This is especially important when using WebView tracking, as NoibuInAppWebView requires an active view to capture events correctly.

HTTP Tracking

To capture network requests automatically, call enableHttpTracking() after initialize(). This intercepts all dart:io HttpClient requests globally, including those made via package:http, Dio with the default adapter, and any other library that delegates to dart:io.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await NoibuSessionReplay.instance.initialize(
    const NoibuConfiguration(domain: 'your-domain.noibu.com'),
  );

  NoibuSessionReplay.instance.enableHttpTracking();

  runApp(NoibuSessionReplay.instance.wrapWithCapture(child: MyApp()));
}

You can optionally suppress capture for specific URLs and control body capture:

NoibuSessionReplay.instance.enableHttpTracking(
  ignoreUrlPatterns: [RegExp(r'analytics\.example\.com')],
  captureBodies: false,
);

WebView Tracking

Use NoibuInAppWebView as a drop-in replacement for InAppWebView. It automatically injects the rrweb capture scripts and bridges WebView events into the session replay pipeline.

import 'package:noibu_flutter/noibu_flutter.dart';

NoibuInAppWebView(
  initialUrlRequest: URLRequest(url: WebUri('https://example.com')),
  onLoadStop: (controller, url) {
    // your existing onLoadStop logic
  },
)

Important: Call didNavigate before pushing the screen that contains NoibuInAppWebView. This ensures an active view is registered before the WebView initializes, which is required for the backend stitcher to splice the captured page content at the correct slot.

void openWebView(BuildContext context, String title, String url) {
  NoibuSessionReplay.instance.didNavigate(pageName: title);
  Navigator.push(context, MaterialPageRoute(
    builder: (_) => MyWebViewScreen(url: url),
  ));
}

For advanced cases where NoibuInAppWebView does not expose a parameter you need, use the lower-level API:

InAppWebView(
  initialUserScripts: UnmodifiableListView([
    ...await NoibuWebViewTracking.initialUserScripts(),
  ]),
  onWebViewCreated: (controller) async {
    await controller.enableNoibuTracking();
  },
)

Custom attributes

Attach metadata to the current session. Returns a String with the result status:

final result = await NoibuSessionReplay.instance.addCustomAttribute('userId', '12345');

Error reporting

Report errors to the Noibu dashboard:

await NoibuSessionReplay.instance.addError(
  'Payment failed',
  stack: StackTrace.current.toString(),
);

Privacy

Set the global privacy mode at init:

await NoibuSessionReplay.instance.initialize(
  const NoibuConfiguration(
    domain: 'your-domain.noibu.com',
    privacyMode: NoibuPrivacyMode.maskSensitive, // maskSensitive (default), maskAll, allowAll
  ),
);

Mode	What it does
maskSensitive (default)	Masks sensitive inputs (passwords; fields with a numeric/phone/email keyboard or a sensitive autofill hint) and scrubs PII (card number, SSN, email, phone) from text.
maskAll	Additionally masks all text and input values. Images are not masked — wrap image/media widgets in NoibuPrivacy.mask or .hidden.
allowAll	Least strict, but never fully unmasks: sensitive inputs stay masked and PII is still scrubbed.

Sensitive-input masking and PII scrubbing run in every mode — allowAll cannot disable them.

Mask a specific field or subtree, independent of the global mode:

NoibuPrivacy.mask(child: CreditCardField());   // text, inputs and images
NoibuPrivacy.maskInputs(child: MyForm());       // input values only
NoibuPrivacy.hidden(child: SecretBanner());     // removed from the replay entirely

WebViews: capture requires the NoibuInAppWebView drop-in. Inside a WebView the global mode applies (maskAll masks all web text and inputs, maskSensitive masks web inputs, allowAll masks nothing). NoibuPrivacy does not reach inside a WebView.

Shutdown

await NoibuSessionReplay.instance.shutdown();

Requirements

Platform	Minimum version
Android	API 26 (Android 8.0)
iOS	16.0
Flutter	3.27.0
Dart	3.6.0

License

MIT License. See LICENSE for details.