Frontend API errors fail silently — add catch blocks and user-facing error messages #15

New issue

Closed

opened 2026-05-01 09:22:09 -07:00 by pyr0ball · 0 comments

pyr0ball commented

2026-05-01 09:22:09 -07:00

Owner

Problem

Several async functions in OpportunitiesView.vue (and likely other views) have no catch block. When the API returns an error, the UI does nothing — no toast, no status change, no console output visible to the user.

Example

async function markManualPosted() {
  saving.value = true
  try {
    const updated = await api.opportunities.markPosted(...)
    // success path
  } finally {
    saving.value = false  // no catch — error is swallowed
  }
}

User clicks "Mark as posted", nothing happens, no feedback. Root cause was a 500 from the API — invisible to the user.

Fix

Add catch blocks to all async action functions in the frontend
Show a user-facing error message (toast or inline) on failure
Log the error to console for debugging
Audit CampaignDetail.vue, CampaignList.vue, PostsView.vue for the same pattern

Acceptance criteria

All async actions in OpportunitiesView.vue have catch + user-visible error
Other views audited and fixed
Error message includes enough context to know what failed

## Problem Several async functions in `OpportunitiesView.vue` (and likely other views) have no `catch` block. When the API returns an error, the UI does nothing — no toast, no status change, no console output visible to the user. ## Example ```ts async function markManualPosted() { saving.value = true try { const updated = await api.opportunities.markPosted(...) // success path } finally { saving.value = false // no catch — error is swallowed } } ``` User clicks "Mark as posted", nothing happens, no feedback. Root cause was a 500 from the API — invisible to the user. ## Fix - Add `catch` blocks to all async action functions in the frontend - Show a user-facing error message (toast or inline) on failure - Log the error to console for debugging - Audit `CampaignDetail.vue`, `CampaignList.vue`, `PostsView.vue` for the same pattern ## Acceptance criteria - [ ] All async actions in `OpportunitiesView.vue` have catch + user-visible error - [ ] Other views audited and fixed - [ ] Error message includes enough context to know what failed