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:
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.
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