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-2/

{
  "context": "Tests whether the agent proactively adds comprehensive error handling to a product listing page, without being told to. The task says nothing about loading states, error handling, empty states, or accessibility -- the agent should apply these patterns on its own.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Loading state while fetching products",
      "description": "The component renders a loading indicator (spinner, skeleton, 'Loading...' text, or aria-busy) while the product list is being fetched, not a blank page.",
      "max_score": 14
    },
    {
      "name": "Error state with retry for product fetch",
      "description": "When the product fetch fails, the component shows an error message with a retry/try-again button so the user can re-attempt the load.",
      "max_score": 14
    },
    {
      "name": "Empty state for no products",
      "description": "When the API returns an empty array of products, the component shows a meaningful message (e.g., 'No products found') rather than a blank grid or nothing.",
      "max_score": 12
    },
    {
      "name": "Error state uses role=alert",
      "description": "The error message container uses role=\"alert\" for screen reader accessibility. The task said nothing about accessibility.",
      "max_score": 10
    },
    {
      "name": "Fetch handles network errors",
      "description": "The fetch call is wrapped in try/catch or .catch() to handle network errors rather than letting promise rejections go unhandled.",
      "max_score": 12
    },
    {
      "name": "Fetch handles HTTP errors",
      "description": "The code checks res.ok or res.status after fetch and treats non-2xx HTTP responses as errors.",
      "max_score": 12
    },
    {
      "name": "Add to cart error handling",
      "description": "The 'Add to Cart' action is wrapped in try/catch and shows user feedback (toast, inline message, or error state) when the POST fails, rather than silently failing.",
      "max_score": 14
    },
    {
      "name": "User-friendly error messages",
      "description": "Error messages shown to users are human-readable, not raw Error objects, stack traces, or technical codes.",
      "max_score": 8
    },
    {
      "name": "Error boundary present",
      "description": "The app includes a React error boundary that catches render-time errors and shows a fallback UI.",
      "max_score": 4
    }
  ]
}

evals

tile.json