[APP-ERR-03] Replacing Technical gRPC Errors with Visual UI Modals

Product Ingestion Screen

Published

October 14, 2026

NoteTask Brief
  • Repository / Component: food_tracker_mobile (Dart / Flutter).
  • Task Type: Frontend (UI / Layout).
  • Associated Screen: Product Ingestion (Receipt Mode / Voice Mode).
  • Status: Ready for Implementation

Task Description

The current implementation displays raw technical text from gRPC socket errors directly onto the user’s screen whenever a network failure occurs (e.g., gRPC Error (code: 16... authorization token is not provided)).

It is necessary to hide these technical details from the user and replace the error banner with elegant Modal Bottom Sheets featuring human-readable text and action buttons based on the specific error code.

Error Mapping Reference (For UI)

When a network layer error occurs, the interface must display a modal bottom sheet using the following texts and icons:

1. Session Authorization Error (gRPC 16 / HTTP 401)

  • Icon: <i class="bi-lock-fill"></i>
  • Title: Authorization Failure
  • Text: Could not verify your profile to upload data. Please try refreshing your session.
  • Action Button: [ Refresh Session ]

2. Server Unavailable / Network Disconnection (gRPC 14 / HTTP 503)

  • Icon: <i class="bi-cloud-slash-fill"></i>
  • Title: Connection Issues
  • Text: The ingestion server is temporarily unavailable. Please check your internet connection or try again in a minute.
  • Action Button: [ Retry ]

3. Validation Error / Unreadable Receipt (gRPC 3 / HTTP 400)

  • Icon: <i class="bi-exclamation-triangle-fill"></i>
  • Title: Recognition Error
  • Text: Failed to recognize the products. Please take a clearer photo of the receipt or repeat the audio recording.
  • Action Button: [ Got it ]

Step-by-Step Instructions for Flutter

  1. Creating the Bottom Sheet Component: Build a reusable AppErrorBottomSheet widget based on the standard showModalBottomSheet function.
  2. Component Parameterization: The widget must accept an icon, a title, a description text, and a callback function for the action button (onPressed).
  3. Intercepting Error States: In the UI layer of the product ingestion screen, trigger the method to display the newly created bottom sheet inside a BlocListener instead of rendering raw error strings.
  4. Implementing the Mapping: Write a clean switch-case statement checking against GrpcError codes that passes the appropriate parameters from the reference manual above when invoking the bottom sheet.