Capture app navigation events
LogRocket Flutter support is currently in Beta
User navigation between app pages is captured in session replay via LogRocketNavigatorObserver
. When registered, the navigator observer captures navigations to and away from pages in apps. Note that support currently covers navigations that use Flutter's Navigator.of(context).push
and pop
API.
Registering the navigation observer
Register LogRocket's navigation observer on construction of your WidgetsApp
or any of its subclasses, such as MaterialApp
. Passing a URL host to the navigator observer's constructor will form the base of URLs generated for navigation events.
class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
return LogRocketWidget(
child: MaterialApp(
title: 'Flutter App',
home: HomePage(),
navigatorObservers: [LogRocketNavigatorObserver('example.com')]
theme: ...
)
);
}
}
Tag pages
Pages can be tagged independently of automatic navigation captures by calling LogRocket.tagPage
, and passing the name of the tagged page. It is recommended that the LogRocket navigation observer is registered on the WidgetsApp
instance before pages are tags, as navigation events generated by page tags inherit the navigation observer's URL. Tagged pages register as the final path segment in a navigation hierarchy. Route pushes and pops on the app will clear any page tag from the navigation observer's URL. In a stateless widget, the call to tagPage
should be made in the widget's build
method.
Tag pages in a stateful widget
Call tagPage
in a stateful widget from the initState
method in its associated State
object to avoid repetitive navigation events as the stateful widget is re-rendered in response to state changes.
class Home extends StatefulWidget {
const Home({super.key});
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
void initState() {
super.initState();
LogRocket.tagPage('Home');
}
@override
Widget build(BuildContext context) {
return const Text('Welcome');
}
}