tpko
tpko

Reputation: 111

How would one implement observing Tab changes with auto_route to be tracked by Sentry in Flutter

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

Answers (0)

Related Questions