Skip to content

2026-01-05: Fix Dev Env & Error Handling

Task Metadata

  • 📆 Date: 2026-01-05
  • 🚥 Status: Completed

1. Context

  • Goal: Fix the configuration issue causing the deployed dev environment to connect to the Prod AppSync API, and improve the frontend error handling to display useful messages from the API.
  • Trigger: User reported FieldUndefined errors on the deployed dev site (schema mismatch) and unhelpful "Error: [object Object]" UI messages.

2. Approach

  • Configuration (Environment Variables):

    • Current State: API endpoints are hardcoded in amplify.config.js with simple boolean logic.
    • Target State: All environment-specific config (API URL, User Pool ID, etc.) will be loaded via standard VITE_* environment variables.
    • Action:
      1. Create frontend/.env for local development defaults.
      2. Refactor frontend/src/amplify.config.js to read import.meta.env.VITE_API_ENDPOINT, etc.
      3. Update Architecture docs to mandate setting these variables in CI/CD (Amplify Console).

  • Error Handling:

    • The AppSync client returns a 200 OK response with an errors array for GraphQL errors.
    • The current ApiMealService likely doesn't check for this errors array or doesn't format it for the UI.
    • Fix:
      1. Update ApiMealService to check for response.errors. If present, throw a formatted error (e.g., joining the messages).
      2. Update Dashboard to display this formatted string instead of the raw error object.

3. Impact Analysis

  • Files to Modify:
    • frontend/src/amplify.config.js
    • frontend/src/services/ApiMealService.ts (or .js)
    • frontend/src/pages/Dashboard.tsx (or .jsx)
  • Risks:
    • None. This is a fix for existing broken behavior in the dev environment.

4. Execution Plan

  • Update frontend/src/amplify.config.js to support VITE_APP_ENV.
  • Update ApiMealService to throw meaningful errors from response.errors.
  • Verify Dashboard displays the error text correctly.