• Flutter 3.41 o successivo (Dart SDK ^3.0.0).
• Un backend OpenReplay v1.26.0 o successivo. I backend meno recenti non supportano i frame: gli eventi vengono comunque registrati, ma lo schermo no.

Il pacchetto non ha alcuna dipendenza pub — il protocollo di trasmissione, il batching, gzip e multipart sono tutti implementati in Dart, e tutto ciò che è nativo passa attraverso un unico platform channel.

flutter pub add openreplay

Oppure aggiungilo al tuo pubspec.yaml:

dependencies:
  openreplay: ^1.0.9

Devi passare la projectKey a start(). Puoi ottenere questo valore dalla dashboard di OpenReplay in ‘Preferences > Projects’.

Racchiudi la tua app in OpenReplayWidget, quindi avvia il tracker. Il wrapper è obbligatorio: fornisce il repaint boundary da cui vengono acquisiti i frame, quindi senza di esso non viene registrato nulla.

import 'package:flutter/material.dart';
import 'package:openreplay/openreplay.dart';

void main() {
  runApp(const OpenReplayWidget(child: MyApp()));
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) async {
      await OpenReplay.instance.start(
        projectKey: 'YOUR_PROJECT_KEY',
        // not required if you're using our SaaS version
        serverUrl: 'https://your.instance.com/ingest',
      );
    });
  }

  @override
  Widget build(BuildContext context) => MaterialApp(
        // records screen transitions
        navigatorObservers: [ORNavigatorObserver()],
        home: const HomePage(),
      );
}

start() può essere chiamato in sicurezza prima del primo frame — l’acquisizione inizia solo dopo che OpenReplayWidget è stato disposto nel layout.

Aggiungi ORNavigatorObserver al tuo MaterialApp (o CupertinoApp, o a qualsiasi Navigator) in modo che le route inserite e rimosse compaiano nella timeline del replay:

MaterialApp(
  navigatorObservers: [ORNavigatorObserver()],
  // ...
)

Le route vengono segnalate tramite route.settings.name. Le route senza nome ripiegano sulla loro posizione nello stack (route/2), perciò assegnare un nome alle route rende le timeline molto più leggibili.

Consulta come sanificare i dati nei replay Flutter per maggiori dettagli.

Le opzioni vengono passate a start() come OROptions:

await OpenReplay.instance.start(
  projectKey: 'YOUR_PROJECT_KEY',
  options: const OROptions(
    logs: false,
    targetLongEdge: 1080,
  ),
);

• crashes: bool Acquisisce gli errori Dart. I crash nativi richiedono comunque un reporter nativo. Valore predefinito: true.
• analytics: bool Acquisisce tocchi, swipe, schermate e input. Valore predefinito: true.
• performances: bool Acquisisce CPU, memoria, batteria e stato termico. Valore predefinito: true.
• logs: bool Acquisisce l’output di debugPrint. Valore predefinito: true.
• screen: bool Abilita l’acquisizione dei frame. Valore predefinito: true.
• screenshotBatchSize: ScreenshotBatchSize Frame tenuti in buffer prima che un batch venga impacchettato e caricato — low (10), normal (20) oppure high (30). Valore predefinito: normal.
• targetLongEdge: int Lato più lungo di un frame acquisito, in pixel. Limita il costo per frame in modo che non vari con le dimensioni dello schermo. Valore predefinito: 720.
• dedupeFrames: bool Salta i frame i cui pixel sono identici, byte per byte, a quelli del frame precedente. La riproduzione non ne risente — il player mostra l’ultimo snapshot corrispondente o precedente all’istante corrente. Valore predefinito: true.
• maskPlatformViews: bool Copre le platform view (WebView, mappe, anteprima della fotocamera) con un segnaposto. Vengono renderizzate in layer nativi che Flutter non può rileggere, quindi senza questa opzione appaiono vuote. Valore predefinito: true.
• wifiOnly: bool Riservata; non ancora applicata. Valore predefinito: true.
• debugLogs: bool Abilita il logging interno dell’SDK. Valore predefinito: false.
• debugImages: bool Salva i frame acquisiti per il debug. Valore predefinito: false.

Sono disponibili due preset: OROptions.defaults (tutte le opzioni sopra elencate) e OROptions.defaultDebug (lo stesso, con debugLogs: true).

Per impostazione predefinita serverUrl punta a OpenReplay Cloud. I deployment self-hosted lo passano a start() oppure lo impostano in anticipo:

OpenReplay.instance.serverUrl = 'https://your.instance.com/ingest';

Se hai domande su questo processo, non esitare a contattarci su Slack .