Reputation: 111
I'm trying to implement sentry into my code base. Following the documentation I'm supposed to use SentryNavigationObserver()
and pass it into MaterialApp()
like so:
routerConfig: _appRouter.config(
navigatorObservers: () => [SentryNavigatorObserver()],
However this solution doesn't track any Tab changes. Whenever I change a tab it appears to be noticing pushes of my RouterPage but not the tabs. As per my AutoRoute config:
AutoRoute(
page: RouterPage.page,
initial: true,
path: '/',
children: <AutoRoute>[
AutoRoute(page: DemoPage.page, path: 'demo'),
AutoRoute(page: SentryPage.page, path: '', initial: true),
AutoRoute(
page: SettingsPage.page,
path: 'settings',
),
],
),
It tracks pushes of a new page but doesn't go deep enough to figure out what page/tab is pushed. The breadcrumbs then look something like this
RouterPage -> RouterPage -> RouterPage -> RouterPage...
instead of
SentryPage -> DemoPage -> SettingsPage -> SentryPage...
I have tried to implement it myself using the already addressed need of tracking tab changes using AutoRouterObserver
import 'dart:async';
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:sentry_flutter/sentry_flutter.dart';
class SentryRouteObserver extends AutoRouterObserver {
@override
void didPush(Route route, Route? previousRoute) {
super.didPush(route, previousRoute);
unawaited(
Sentry.addBreadcrumb(
Breadcrumb(
message: 'Navigated to ${route.settings.name}',
category: 'navigation',
data: {
'state': 'didPush',
'to': route.settings.name,
},
),
),
);
}
@override
void didPop(Route route, Route? previousRoute) {
super.didPop(route, previousRoute);
unawaited(
Sentry.addBreadcrumb(
Breadcrumb(
message: 'Navigated to ${route.settings.name}',
category: 'navigation',
data: {
'state': 'didPop',
if (previousRoute?.settings.name != null) 'from': previousRoute!.settings.name else 'to': route.settings.name,
},
),
),
);
}
@override
void didReplace({Route? newRoute, Route? oldRoute}) {
super.didReplace(newRoute: newRoute, oldRoute: oldRoute);
unawaited(
Sentry.addBreadcrumb(
Breadcrumb(
message: 'Navigated to ${newRoute!.settings.name}',
category: 'navigation',
data: {
'state': 'didPush',
if (newRoute.settings.name != null) 'to': newRoute.settings.name else 'from': oldRoute?.settings.name,
},
),
),
);
}
// only override to observer tab routes
@override
void didInitTabRoute(TabPageRoute route, TabPageRoute? previousRoute) {
unawaited(
Sentry.addBreadcrumb(
Breadcrumb(
message: 'Navigated to ${route.name}',
category: 'navigation',
data: {
'state': 'didPush',
if (previousRoute?.name != null) 'from': previousRoute?.name,
'to': route.name,
},
),
),
);
}
@override
void didChangeTabRoute(TabPageRoute route, TabPageRoute previousRoute) {
unawaited(
Sentry.addBreadcrumb(
Breadcrumb(
message: 'Navigated to ${route.name}',
category: 'navigation',
data: {
'state': 'didPush',
'from': previousRoute.name,
'to': route.name,
},
),
),
);
}
}
And while with this approach the breadcrumbs show the navigation, it's not tracked either by view_names attribute in the App's context (in sentry's issue overview) nor is it tracked by the transaction tag.
I feel like I'm going in the wrong direction.
So then I looked inside the SentryNavigationObserver code and understood that creating this manually is definitely not the correct way to approach it. And even if I did, It is inevitable that it will break. And that's why I'm here. What is the correct way to approach this and how can I track tab changes in sentry while using auto_route?
Upvotes: 0
Views: 94