How we are using Sentry for mobile apps

Today i want to show you how we are using sentry as bug-tracker for ours mobile apps written in react-native.

Sentry redux middleware

Because we are using Redux we created Sentry middleware which capture every action into breadcrumbs.

const sentryMiddleware: Middleware<State, Action> = ({ getState }) => next => action => {
  const { type, ...rest } = action;
  Sentry.addBreadcrumb({
    message: `Action: ${type}`,
    category: 'action',
    data: rest,
  });

  const { fcmToken } = getState().notifications;
  fcmToken && Sentry.setTag('fcm_token', fcmToken);

  return next(action);
};

Result of this piece of code in production:

Sentry breadcrumbs created via redux middleware

So now you can track easily history of user journey thru your app.

Custom tags

As you can see above, we store fcm_token as Sentry tag, because sometimes need track bug for specific user and this helps a lot. You can use as Tag whatever you want of course.

Custom Sentry Tag search

Or you can filter on particular event by this tag

So creating Tags can be very helpful. You probably appreciate it in time when you will need track some ugly bug :)

Thanks for reading!

If you need prettify your bug report, check my previous article: https://petrlz63.medium.com/sentry-source-maps-with-hermes-in-react-native-9de970a6699f