DEV Community

Cover image for Stop showing "Something went wrong" to your users. How I automated React error handling with AI
Matheus Lima
Matheus Lima

Posted on

Stop showing "Something went wrong" to your users. How I automated React error handling with AI

#ai #webdev #react #showdev

If you are a frontend or full-stack developer, you probably hate dealing with third-party API errors as much as I do.

You are building a beautiful React, tanStack or Next.js application, everything is smooth, and then you have to integrate an external API. Suddenly, your network tab is full of unpredictable errors: 503 Service Unavailable, 429 Too Many Requests, CORS preflight failed, or some bizarre custom JSON error from a legacy system.

You usually have two choices, and both of them suck:

  1. The Exhausting Way: Write endless switch statements to map every single possible error code and translate them into human-readable messages.

  2. The Lazy Way: Wrap everything in a try/catch and show a generic "Oops, something went wrong. Please try again later" to your user.

I got tired of wasting hours tracking down delicate component errors and writing fallback UI copy. So, I built a tool to completely automate this.

Meet CogniCatch

I built CogniCatch to be the ultimate time-saver for React developers. It's an Edge-native error analytics and UX platform that catches raw, ugly API errors and translates them into empathetic, actionable, and localized UI messages using AI.

Instead of mapping 50 different error scenarios from a public API, you just wrap your risky calls or Error Boundaries with the CogniCatch SDK.

How it saves you hours of work:

  • No more mapping 3rd-party errors: Whether the API fails because of a timeout, a rate limit, or a server crash, CogniCatch understands the context of the raw stack trace and generates a user-friendly explanation on the fly.

  • Automatic Localization: If your user speaks Portuguese, Spanish, or French, the AI automatically translates the recovery message without you having to touch an i18n JSON file.

  • Zero Jargon: It ensures your end-users never see words like "TCP Socket Hang up" or "Null pointer exception". It tells them exactly what happened in plain English (or their native language).

Under the Hood: Built for the Edge

As engineers, we care about latency. An error handling tool cannot slow down your app.

I built the CogniCatch infrastructure to run entirely on the Edge. Here is the stack that makes it execute in milliseconds:

  • Cloudflare Workers & Pages: For global, zero-cold-start execution.
  • Supabase (PostgreSQL) + Drizzle ORM: We bypassed traditional transaction pooling (PgBouncer) issues on the Edge, connecting directly to the database to ensure sub-500ms query times.
  • Upstash Redis: Distributed rate-limiting to protect the ingestion API from DDoS or abuse.
  • OpenAI (GPT-4o-mini): Strictly configured to return structured JSONs with title, description, and severity, while a custom PII Shielding algorithm ensures no sensitive user data ever touches the LLM.

Stop writing generic fallbacks

If you want to save time, keep your codebase clean from endless error-mapping files, and actually provide a great UX when things break, give it a try.

I'm currently opening early access to developers and provisioning the infrastructure.

🔗 Join the Early Adopter Waitlist at cognicatch.dev (Early birds get 50% off the Pro tier for the first 6 months!).

Let me know in the comments: what is the worst/most bizarre third-party API error you've ever had to handle in the frontend?

Top comments (0)