Flutter: Redirect to home screen on error is buggy using `go_router`

Question

Details:

I am using Riverpod for state management and go_router for route management.

Expected Behavior:

When Flutter throws an error, it will redirect to the home-screen of the app and then continue to work normally.

Actual Behavior:

After redirect to the home-screen, using the app inevitably leads to a redirect back to the home screen.
Sometimes the redirect ends up looping, displaying no content whatsoever.
The redirect happens regardless of error state; doing actions that normally work correctly.
I am not getting any errors in the console, the only evidence I have of something going wrong is the looping redirect when I'm using the app.

In the main page of the app I have:

@override
  Widget build(BuildContext context) {
    AsyncValue<HomeOffers> offers = ref.watch(getSectionOffers(sections));
    Size size = MediaQuery.of(context).size;
    return offers.when(
      loading: () => const FormattedProgressIndicator(),
      error: (error, stackTrace) => const ErrorStatelessView(),
      data: (data) {
        return MaterialApp(
          builder: (context, child) {
            ErrorWidget.builder = (FlutterErrorDetails errorDetails) {
              return const ErrorStatelessView(); // <-- error handling
            };
            return Scaffold(body: offersDisplay(data, size));
          },
          home: Scaffold( ... )

ErrorStatelessView() looks like this:

class ErrorStatelessView extends StatelessWidget {
  const ErrorStatelessView({super.key});

  @override
  Widget build(BuildContext context) {
    Timer(const Duration(seconds: 3), () => context.pushNamed('home')); // <-- redirect logic
    //TODO: Log Errors to something meaningful
    return Scaffold(
        body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(height: 100, child: Image.asset('assets/images/oops.png')),
          const Text('Oops, it looks like something went wrong.'),
          const Text('You will be redirected back to the home'),
          const Text('page shortly.'),
        ],
      ),
    ));
  }
}

score 0 · Answer 1 · answered May 16 '23 at 14:47

The issue was that, once the ErrorStatelessView was loaded, the build method would be invoked on other pages. This is because it is part of the error handling on those pages. Having the redirect inside the build method caused that redirect to happen again and again. I converted ErrorStatelessView to a stateful widget and put the redirect in the initState method.

Here is the solution:

class CustomErrorView extends StatefulWidget {
  const CustomErrorView({super.key});

  @override
  State<CustomErrorView> createState() => _CustomErrorView();
}

class _CustomErrorView extends State<CustomErrorView> {
  @override
  void initState() {
    super.initState();
    Timer(const Duration(seconds: 3), () => context.pushNamed('home'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(height: 100, child: Image.asset('assets/images/oops.png')),
          const Text('Oops, it looks like something went wrong.'),
          const Text('You will be redirected back to the home'),
          const Text('page shortly.'),
        ],
      ),
    ));
  }
}

Flutter: Redirect to home screen on error is buggy using `go_router`

1 Answers1