DEV Community

Cover image for Dev vs PROD: Throwing Error vs Fallback Using never Type
Arka Chakraborty
Arka Chakraborty

Posted on • Edited on

Dev vs PROD: Throwing Error vs Fallback Using never Type

#react #webdev #javascript #typescript

Throwing Error vs Fallback Using never Type

đź“ť Context

Should you fail fast (throw error) or fail gracefully (fallback)? The answer: both, depending on environment.

🚨 Without TypeScript – The Problem

function Theme({ mode }) { switch (mode) { case "light": return <p>Light Mode</p>; case "dark": return <p>Dark Mode</p>; default: return <p>Unknown Mode</p>; // ❌ hides bug silently } }
Enter fullscreen mode Exit fullscreen mode

✅ With TypeScript + never – Fail Fast in Dev, Fallback in Prod

type ThemeMode = "light" | "dark"; function Theme({ mode }: { mode: ThemeMode }) { switch (mode) { case "light": return <p>Light Mode</p>; case "dark": return <p>Dark Mode</p>; default: { const _exhaustive: never = mode; if (process.env.NODE_ENV === "development") { throw new Error("Unhandled theme mode: " + mode); } // In production → fallback console.warn("Unexpected theme mode:", mode); return <p>Defaulting to Light Mode</p>; } } }
Enter fullscreen mode Exit fullscreen mode

🎯 Takeaway

  • Dev mode: Throw error → surfaces missing cases quickly.
  • Prod mode: Fallback UI + logs → users don’t experience crashes.
  • Balance = strict during development, resilient in production.

Top comments (1)

Collapse
 
ahrjarrett profile image
andrew jarrett • • Edited

Nice pattern!

One neat trick I recently learned: you can also use satisfies to avoid creating the _exhaustive variable:

throw new Error( "Unhandled theme mode: " + mode satisfies never );
Enter fullscreen mode Exit fullscreen mode

TypeScript Playground