Session Replay for Mobile is now Generally Available: See What Your Users See

Session Replay for Mobile is now generally available. I could bombard you with hyperbolic statements about why Session Replay is worth using, but instead, A…I… wrote you a haiku: 

Screen freeze, devs all sigh.

Replay uncovers the crime:

Forgot .addListener.

In other words, Sentry will stitch together a video reproduction of a user’s session so you can see what’s breaking or janky experiences on a user’s device, without having to guess the steps to recreate their issue using some other obscure device. Who has iPhone 12 Minis lying around these days anyway? Not us. Do you? 

If you want to check out real life examples of how to debug annoying issues with Session Replay for Mobile, skip the next sentence. If not, check out our docs on how to get started for iOS, Android, Flutter, and React Native. 

How can you use Session Replay to debug problems?

You’re probably used to being notified about odd bugs, seeing a crash dump, and then not understanding how a user even got into that state. So then you instrument a bunch of random log statements to try and better understand the state of your application, which then requires you to re-release, and force your users to update the app. You can avoid putting your users through any of that annoying mess if you have a replay of their actual session, including any errors and actions, so you can see exactly what the user did leading up to errors. 

Here are some real examples of Sentry customers who have been using Session Replay for Mobile during its beta over the last 6 months.

Understanding the mobile app state 

Mobile apps come in all forms, and a lot of them are fairly complex, with intricate UI flows and different app states. Using Session Replay helps you understand the current state of your app, and discover the specific UI flow that was causing issues. This gives you an entire view of all errors that happen, including those within your backend services.

Without Session Replay for Mobile, it would be unnecessarily difficult to pinpoint the sequence of events when something went wrong. It’s invaluable in debugging complex user flows.

Backend endpoint error

Debugging server errors can be challenging as it’s unclear what the user did to get there. But with Session Replay for Mobile, you can see the user actions that took place leading up to the endpoint issue. The timeline view allows you to pinpoint exactly when the server error occurred and quickly scrub to that point in time. 

For example, a customer pointed out that they were able to figure out that a 400 error was triggered by refreshing the user profile when the application was going back onto foreground, but the user was already logged out. The fix was simple. They’re now listening for an AppState event, and if the user is logged out, they immediately redirect them to the login screen.

Debug mobile device-specific issues

By using Session Replay for Mobile’s breadcrumbs, you can get critical information relating to the device while seeing user interactions. You can track down the issue and pinpoint exactly when and why it occurred - it’s the worst when you’re debugging and it turns out the issue is because of the network connectivity where the device went suddenly offline.

Breadcrumbs give you the extra context you need to solve issues that can sometimes be invisible in traditional logs.

Getting started with Session Replay for Mobile

Here’s a quick guide on how to integrate this feature into your mobile app:

1. Sign up for Sentry: If you haven’t already, create a Sentry account and set up your mobile project. 

2. Install the SDK: Follow the integration guides for React Native, iOS, Android, Flutter (at the time of this blog post, Flutter support is still in beta), or any other platform you’re using. We really recommend using the Sentry Wizards, which make it super easy to install. For example, you just need to run this in your CLI to get started with your React Native application:

npx @sentry/wizard@latest -i reactNative

3. Enable Session Replay: Once the SDK is installed, enable Session Replay in your project’s settings. We also recommended setting up tracing while you’re configuring; so for React Native, that would look like this:

import * as Sentry from "@sentry/react-native";

Sentry.init({
  dsn: "YOUR_DSN_HERE",
  tracesSampleRate: 1.0,
  replaysSessionSampleRate: 1.0,
  replaysOnErrorSampleRate: 1.0,
  integrations: [
    Sentry.mobileReplayIntegration({
      maskAllImages: true,
      maskAllVectors: true,
      maskAllText: true,
    }),
  ],
});

4. Start Watching Replays: After integrating, start watching replays in Sentry by going to “Replays” in the left-nav bar to get a clear view of what your users are experiencing.

Start finding & fixing errors with Session Replay for Mobile

Session Replay for Mobile connected with breadcrumbs, errors, and network request data should give you everything you need to confirm, debug, and fix any issues with your mobile app. So whether you’re simply fine-tuning performance, improving the UX, or investigating errors or crashes, Sentry removes any unknowns, making it a whole lot easier to find out why your users are rage quitting your mobile apps (hopefully not, but you know what I mean).

Join us on Discord if you have any questions, and check out this live demo of how to use Sentry (and Session Replay) to fix your mobile applications.