How we built an error explainer with Gemini

Haze — Sun, 08 Feb 2026 23:12:14 +0000

When you’re stuck on a cryptic error or a long stack trace, you usually want three things: what’s going on, why it’s probably happening, and what to do next. We built Haze to do exactly that - paste an error (or upload a screenshot), click once, and get a short, structured explanation instead of a wall of text.

This post is a quick look at how we did it with Google’s Gemini on Vertex AI - and why we made it a focused product instead of “just paste into ChatGPT.”

The problem

Errors and stack traces are noisy. You don’t always need a long explanation - you need a clear summary, a likely cause, and a few next steps. We wanted that in a fixed format every time so we could show it in a simple UI.

We also wanted something dedicated: no copying into a generic chatbot, no mixing your error with other tabs and context. One place, one click, one clear answer. That’s why we built Haze as a small product: free tier to try it, Pro for unlimited use when you rely on it.

The approach

We use a React + Vite front end and a Node backend. The backend calls Vertex AI (Gemini) with two things: a system prompt that defines the tone and output shape, and a user message that is basically “here’s the error text.”

The system prompt tells the model to act as “Haze,” stay calm and concise, and return only raw JSON with three fields: summary, likely_cause, and next_steps (a short list of actions). We also ask for JSON in the API request so the model is nudged toward valid output. That way we can parse one object and render it—no markdown or extra commentary.

If the API fails or returns something we can’t use, we fall back to a simple rule-based analyzer so the user always gets something in the same format. We also retry a couple of times on rate-limit errors so the odd 429 doesn’t break the flow.

What we learned

Keeping the output strict and JSON-only made the integration straightforward: one parse, one shape, no scraping text out of paragraphs. A single, clear system prompt did most of the work; we didn’t need a long back-and-forth or multiple calls.

Try it (or go Pro)

You can try Haze at haze.no - paste any error or stack trace and hit “Clear the haze.” 10 explanations per month are free (no signup required to try); sign up with email or Google/GitHub to track usage across devices. If you clear the haze a lot, Pro is $9/month for unlimited use - pricing and contact here.

If you’re thinking of adding an “explain this error” feature to an app or a small product, this pattern—system prompt + JSON response + simple fallback—is a solid starting point. If you’d rather not build it yourself, Haze is built for exactly that: one place, one click, clear answers.

DEV Community: Haze

How we built an error explainer with Gemini

The problem

The approach

What we learned

Try it (or go Pro)