Let’s get SessionMate recording user interactions on your device.

Get Started

Session mate has it’s own package, so let’s start by adding the session_mate package from pub.

session_mate: ^0.7.5

It also comes with a CLI which can be installed from homebrew . To use this tap add the FilledStacks tap

brew tap filledstacks/tap

Then install the package.

brew install sessionmate

Now that you have the packages installed we can update the code use SessionMate.

Common errors

• Dependency clashes: Please let us know about any dependency clashes you experience

Setup SessionMate code

We start by calling setup in the main function.

Future<void> main() {
	
	...
	await setupSessionMate();
	
	runApp(const MainApp());
}

A common piece of code we saw in our early adopter’s main functions is the following.

WidgetsFlutterBinding.ensureInitialized();

If you’re using this in your main function you can update it to the following:

if (!kReplaySession) {    
	WidgetsFlutterBinding.ensureInitialized();
}

await setupSessionMate();

Save crashes to SessionMate

When an uncaught exception happens we want to capture all the information and tell SessionMate about it. To do that we need to monitor crashes using the SessionMateCrashMonitor.

We can do this at a global level in the main.dart file.

Future<void> main() {
	
	...
	await setupSessionMate();
	SessionMateCrashMonitor.monitor(const MainApp());
}

This function will be triggered and save a session when an unhandled exception gets loose in your codebase.

Use the SessionMate widgets

The last thing to do is to setup SessionMate to record all interactions.

We do that by adding a builder to your Material app. We wrap the SessionMateBuilder around every view that’s navigated to in your app. This way we can see what the users are doing on the view.

MaterialApp(	
	...	
	builder: (context, child) => SessionMateBuilder(    
		minimumStartupTime: 6000,    
		verboseLogs: true,
		child: child!, 
	),
)

The last piece of code to add is the SessionMateRouteObserver. This you can add into your navigator observers.

MaterialApp( 
	... 
	navigatorObservers: [        
		SessionMateNavigatorObserver.instance, 
	],
)

If you’re using Navigator 2.0 you can use the same observer.

That’s everything we need to get SessionMate recording interactions with the app. Let’s test to see if SessionMate can drive your app after a recording by doing a local test.