handles errors in a more use friendly way

frontend/lib/modules/current_trip_error_message.dart

@@ -16,22 +16,27 @@ class CurrentTripErrorMessage extends StatefulWidget {
 class _CurrentTripErrorMessageState extends State<CurrentTripErrorMessage> {
   @override
   Widget build(BuildContext context) => Center(
-    child: Row(
+    child: Column(
       mainAxisAlignment: MainAxisAlignment.center,
+      crossAxisAlignment: CrossAxisAlignment.center,
       children: [
-        const Icon(
-          Icons.error_outline,
-          color: Colors.red,
-          size: 50,
-        ),
-        const Padding(
-          padding: EdgeInsets.only(left: 10),
+        Text(
+          "😢",
+          style: TextStyle(
+            fontSize: 40,
+          ),
         ),
+        const SizedBox(height: 10),
         AutoSizeText(
-          'Error: ${widget.trip.errorDescription}',
-          maxLines: 3,
+          // at this point the trip is guaranteed to have an error message
+          widget.trip.errorDescription!,
+          maxLines: 30,
+          style: Theme.of(context).textTheme.bodyMedium,
+          textAlign: TextAlign.center,
+
         ),
       ],
-    )
+    ),
   );
+
 }

frontend/lib/modules/current_trip_panel.dart

@@ -1,3 +1,5 @@
+import 'package:anyway/pages/current_trip.dart';
+import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
 
 import 'package:anyway/constants.dart';
@@ -34,15 +36,27 @@ class _CurrentTripPanelState extends State<CurrentTripPanel> {
       listenable: widget.trip,
       builder: (context, child) {
         if (widget.trip.uuid == 'error') {
-          return Align(
-              alignment: Alignment.topCenter,
-              child: SizedBox(
+          return ListView(
+            controller: widget.controller,
+            padding: const EdgeInsets.only(top: 10, left: 10, right: 10, bottom: 30),
+            children: [
+              SizedBox(
                 // reuse the exact same height as the panel has when collapsed
                 // this way the greeter will be centered when the panel is collapsed
-                height: MediaQuery.of(context).size.height * TRIP_PANEL_MIN_HEIGHT,
-                child: CurrentTripErrorMessage(trip: widget.trip)
+                // note that we need to account for the padding above
+                height: MediaQuery.of(context).size.height * TRIP_PANEL_MIN_HEIGHT - 10,
+                child: Center(child: 
+                  AutoSizeText(
+                    maxLines: 1,
+                    'Error',
+                    style: greeterStyle
+                  )
+                ),
               ),
-            );
+
+              CurrentTripErrorMessage(trip: widget.trip),
+            ],
+          );
         } else if (widget.trip.uuid == 'pending') {
             return Align(
               alignment: Alignment.topCenter,

frontend/lib/pages/no_trips_page.dart

@@ -21,10 +21,13 @@ class _NoTripsPageState extends State<NoTripsPage> with ScaffoldLayout {
             Text(
               "No trips yet",
               style: Theme.of(context).textTheme.headlineMedium,
+              textAlign: TextAlign.center,
             ),
+            Padding(padding: EdgeInsets.only(bottom: 10)),
             Text(
               "You can start a new trip by clicking the button below",
               style: Theme.of(context).textTheme.bodyMedium,
+              textAlign: TextAlign.center,
             ),
           ],
         ),

frontend/lib/pages/settings.dart

@@ -177,7 +177,7 @@ class _SettingsPageState extends State<SettingsPage> with ScaffoldLayout {
     return Center(
       child: Column(
         children: [
-          Text('AnyWay does not collect or store any of the data that is submitted via the app. The location of your trip is not stored. The location feature is only used to show your current location on the map, it is not transmitted to our servers.', textAlign: TextAlign.center),
+          Text('AnyWay does not collect or store any of the data that is submitted via the app. The location of your trip is not stored. The location feature is only used to show your current location on the map.', textAlign: TextAlign.center),
           Padding(padding: EdgeInsets.only(top: 3)),
           Text('Our full privacy policy is available under:', textAlign: TextAlign.center),
           

frontend/lib/utils/fetch_trip.dart

@@ -1,5 +1,7 @@
+import "dart:async";
 import "dart:convert";
 import "dart:developer";
+import "dart:io";
 import "package:anyway/main.dart";
 import 'package:dio/dio.dart';
 
@@ -18,11 +20,6 @@ Dio dio = Dio(
     // also accept 500 errors, since we cannot rule out that the server is at fault. We still want to gracefully handle these errors
     validateStatus: (status) => status! <= 500,
     receiveDataWhenStatusError: true,
-    // api is notoriously slow
-    // headers: {
-    //   HttpHeaders.userAgentHeader: 'dio',
-    //   'api': '1.0.0',
-    // },
     contentType: Headers.jsonContentType,
     responseType: ResponseType.json,    
   ),
@@ -48,25 +45,70 @@ fetchTrip(
     );
   } catch (e) {
     trip.updateUUID("error");
-    trip.updateError(e.toString());
+      
+    // Format the error message to be more user friendly
+    String errorDescription;
+    if (e is DioException) {
+        errorDescription = e.message ?? "Unknown error";
+    } else if (e is SocketException) {
+        errorDescription = "No internet connection";
+    } else if (e is TimeoutException) {
+        errorDescription = "Request timed out";
+    } else {
+        errorDescription = "Unknown error";
+    }
+
+    String errorMessage = """
+      We're sorry, the following error was generated:
+
+      ${errorDescription.trim()}
+    """.trim();
+
+    trip.updateError(errorMessage);
     log(e.toString());
+    log(errorMessage);
     return;
   }
 
-  // handle errors
+  // handle more specific errors
   if (response.statusCode != 200) {
     trip.updateUUID("error");
-    String errorDetail;
+    String errorDescription;
     if (response.data.runtimeType == String) {
-      errorDetail = response.data;
+      errorDescription = response.data;
+    } else if (response.data.runtimeType == Map<String, dynamic>) {
+      errorDescription = response.data["detail"] ?? "Unknown error";
     } else {
-      errorDetail = response.data["detail"] ?? "Unknown error";
+      errorDescription = "Unknown error";
     }
-    trip.updateError(errorDetail);
-    log(errorDetail);
+
+    String errorMessage = """
+      We're sorry, our servers generated the following error:
+
+      ${errorDescription.trim()}
+      Please try again.
+    """.trim();
+    trip.updateError(errorMessage);
+    log(errorMessage);
     // Actualy no need to throw an exception, we can just log the error and let the user retry
     // throw Exception(errorDetail);
   } else {
+    
+    // if the response data is not json, throw an error
+    if (response.data is! Map<String, dynamic>) {
+      log("${response.data.runtimeType}");
+      trip.updateUUID("error");
+      String errorMessage = """
+        We're sorry, our servers generated the following error:
+
+        ${response.data.trim()}
+        Please try again.
+      """.trim();
+      trip.updateError(errorMessage);
+      log(errorMessage);
+      return;
+    }
+
     Map<String, dynamic> json = response.data;
 
     // only fill in the trip "meta" data for now