🚀 Next.js Error Handling (Easy Notes)

📌 1. Error Types

👉 2 types ke errors hote hain:

🟢 1. Expected Errors

Normal errors (API fail, form validation)

🔴 2. Unexpected Errors

Bugs / crash / exception

🟢 2. Expected Error Handle (Best तरीका)

👉 Server Action me handle karo
👉 Throw mat karo ❌
👉 Return karo ✅

plaintext

"use server"

export async function createPost(prevState, formData) {
  const title = formData.get("title")

  if (!title) {
    return { message: "Title required" }
  }

  return { message: "Success" }
}

💻 Client me show karo

plaintext

"use client"
import { useActionState } from "react"

const [state, action, pending] = useActionState(createPost, { message: "" })

<form action={action}>
  <input name="title" />
  <p>{state.message}</p>
  <button disabled={pending}>Submit</button>
</form>

👉 Error message UI me dikhega

🖥️ 3. Server Component Error

plaintext

export default async function Page() {
  const res = await fetch("api/data")

  if (!res.ok) {
    return "Error aa gaya"
  }

  return "Success"
}

🚫 4. 404 Page (notFound)

plaintext

import { notFound } from "next/navigation"

if (!data) {
  notFound()
}

👉 Custom page:

plaintext

export default function NotFound() {
  return <h1>404 Page</h1>
}

🔴 5. Unexpected Error (Error Boundary)

👉 error.js file create karo

plaintext

"use client"

export default function Error({ error, unstable_retry }) {
  return (
    <div>
      <h2>Error aa gaya</h2>
      <button onClick={unstable_retry}>Try Again</button>
    </div>
  )
}

👉 Auto catch karega errors

🧩 6. Error Boundary Concept

👉 Error aaya → pura app crash nahi hoga

👉 Sirf us component ka fallback dikhega

📌 Next.js automatically handle karta hai

⚠️ 7. Event Handler Error

👉 Error boundary handle nahi karta

plaintext

"use client"
import { useState } from "react"

const [error, setError] = useState(null)

try {
  throw new Error("Fail")
} catch (e) {
  setError(e)
}

👉 Manual handle karna padega

🔄 8. Retry Feature

👉 Error me retry option hota hai

plaintext

<button onClick={unstable_retry}>
  Try Again
</button>

👉 Component re-render hoga

🌍 9. Global Error

👉 Pure app ke liye error

plaintext

"use client"

export default function GlobalError() {
  return (
    <html>
      <body>Error aa gaya</body>
    </html>
  )
}

🧠 10. Important Rules (Interview)

Expected error → return value
Unexpected → throw error
error.js → boundary
notFound() → 404
useActionState → form error

🔥 Short Revision (1 min)

👉 Error 2 type:

Expected
Unexpected

👉 error.js = fallback UI

👉 notFound = 404

👉 Event error = manual

💥 Super Simple Line

👉 "Next.js me errors ko safe handle karne ke liye error boundaries aur server actions use hote hain"

🚀 Full Flow

Error aaya
Handle (return / throw)
UI show fallback
Retry possible