Proactive error handling for React and vanilla JS frontends — every data-fetching component gets loading, error, and empty states, error boundaries, fetch error handling, form validation, optimistic rollback
90
84%
Does it follow best practices?
Impact
100%
1.38xAverage score across 5 eval scenarios
Passed
No known issues
{
"context": "Tests whether the agent proactively adds comprehensive error handling to a team directory with search and an invite form, without being told to. The task says nothing about error states, loading indicators, form validation, or retry -- the agent should apply these patterns on its own.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Loading state while fetching team members",
"description": "The component renders a loading indicator while the team list is being fetched, not a blank page.",
"max_score": 12
},
{
"name": "Error state with retry for team fetch",
"description": "When the team fetch fails, the component shows an error message with a retry/try-again button.",
"max_score": 14
},
{
"name": "Empty state for no results",
"description": "When the API returns an empty array or no members match the search, the component shows a meaningful message (e.g., 'No team members found') rather than a blank area.",
"max_score": 10
},
{
"name": "Invite form submission error handling",
"description": "The invite form POST is wrapped in try/catch and shows an error message to the user when the API call fails.",
"max_score": 14
},
{
"name": "Invite form submitting state",
"description": "While the invite POST is in flight, the form shows a submitting indicator (disabled button, spinner, or 'Sending...' text).",
"max_score": 10
},
{
"name": "Invite form client-side validation",
"description": "The invite form validates required fields (at minimum name and email) before attempting the API call.",
"max_score": 10
},
{
"name": "Fetch handles network and HTTP errors",
"description": "Fetch calls handle both network errors (try/catch around fetch) and HTTP errors (checking res.ok or res.status).",
"max_score": 12
},
{
"name": "Error messages use role=alert",
"description": "Error message containers use role=\"alert\" for screen reader accessibility.",
"max_score": 10
},
{
"name": "User-friendly error messages",
"description": "All error messages are human-readable, not raw Error objects or stack traces.",
"max_score": 8
}
]
}evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
skills
frontend-error-handling
verifiers