CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl-labs/frontend-error-handling

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

1.38x
Quality

84%

Does it follow best practices?

Impact

100%

1.38x

Average score across 5 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

criteria.jsonevals/scenario-4/

{
  "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

tile.json