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

{
  "context": "Tests whether the agent proactively adds comprehensive error handling to an order history page with both data fetching and mutation actions, without being told to. The task says nothing about error handling, loading states, or retry -- the agent should apply these patterns on its own.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Loading state while fetching orders",
      "description": "The component renders a loading indicator (spinner, skeleton, or text) while orders are being fetched, not a blank page.",
      "max_score": 14
    },
    {
      "name": "Error state with retry for order fetch",
      "description": "When the order list fetch fails, the component shows an error message with a retry/try-again button.",
      "max_score": 14
    },
    {
      "name": "Empty state for no orders",
      "description": "When the API returns an empty array, the component shows a meaningful message (e.g., 'No orders yet') rather than a blank list.",
      "max_score": 12
    },
    {
      "name": "Reorder action error handling",
      "description": "The 'Reorder' POST action is wrapped in try/catch and shows user feedback (error message, toast, or inline error) when it fails, rather than silently failing.",
      "max_score": 14
    },
    {
      "name": "Fetch handles network errors",
      "description": "The fetch call is wrapped in try/catch or .catch() to handle network failures.",
      "max_score": 10
    },
    {
      "name": "Fetch handles HTTP errors",
      "description": "The code checks res.ok or res.status and handles non-2xx HTTP responses as errors.",
      "max_score": 10
    },
    {
      "name": "Error state uses role=alert",
      "description": "Error message containers use role=\"alert\" for screen reader accessibility. The task said nothing about accessibility.",
      "max_score": 10
    },
    {
      "name": "User-friendly error messages",
      "description": "Error messages are human-readable, not raw Error objects or stack traces.",
      "max_score": 8
    },
    {
      "name": "Error boundary present",
      "description": "The app includes a React error boundary that catches render-time errors and displays a fallback UI.",
      "max_score": 8
    }
  ]
}

evals

scenario-1

criteria.json

task.md

tile.json