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 user profile page, without being told to. The task says nothing about error states, loading indicators, error boundaries, or retry -- the agent should apply these patterns on its own.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Loading state while fetching profile",
"description": "The profile component renders a visible loading indicator (spinner, skeleton, 'Loading...' text, or aria-busy) while the user data API request is in progress, not a blank screen.",
"max_score": 14
},
{
"name": "Error state with retry for profile",
"description": "When the profile fetch fails, the component shows a user-friendly error message and a retry/try-again button so the user can re-attempt the load.",
"max_score": 16
},
{
"name": "Error state uses role=alert",
"description": "The error message container uses role=\"alert\" so screen readers announce the error to users. The task said nothing about accessibility.",
"max_score": 12
},
{
"name": "Fetch handles network errors",
"description": "The fetch call is wrapped in try/catch or .catch() to handle network errors (server unreachable, no internet) rather than letting the promise rejection go unhandled.",
"max_score": 14
},
{
"name": "Fetch handles HTTP errors",
"description": "The code checks res.ok or res.status after fetch and handles non-2xx HTTP responses (4xx/5xx) as errors instead of silently treating them as success.",
"max_score": 14
},
{
"name": "User-friendly error messages",
"description": "Error messages shown to users are human-readable strings (e.g., 'Failed to load profile'), not raw Error objects, stack traces, or technical codes.",
"max_score": 10
},
{
"name": "Empty activity state handled",
"description": "When the activity feed API returns an empty array, the component shows a meaningful message (e.g., 'No recent activity') rather than a blank area.",
"max_score": 10
},
{
"name": "Error boundary present",
"description": "The app includes a React error boundary component that catches render-time errors and displays a fallback UI instead of a white screen.",
"max_score": 10
}
]
}evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
skills
frontend-error-handling
verifiers