Cara Saya Handle Error di Next.js yang Rapi & User-Friendly

Cara Saya Handle Error di Next.js yang Rapi & User-Friendly (2026)

Halo teman-teman,

Error handling sering dianggap sepele, tapi justru ini yang paling sering bikin user frustasi dan developer pusing waktu debugging.

Setelah beberapa project, saya punya pendekatan yang cukup konsisten. Ini yang saya pakai sekarang:

1. Pisahkan Error Berdasarkan Layer

Saya bedakan error jadi 3 jenis:

• Validation Error → dari Zod / form (400)
• Business Logic Error → misalnya “user tidak punya akses” atau “saldo tidak cukup”
• Unexpected Error → error sistem / database / network

2. Custom Error Class

Saya bikin class sendiri biar lebih jelas:

Copycopy code to clipboard
export class AppError extends Error {
  constructor(
    public message: string,
    public statusCode: number = 400,
    public code?: string,
  ) {
    super(message);
  }
}

3. Error Handling di Server Actions

Copycopy code to clipboard
"use server";

export async function createInvoice(data: FormData) {
  try {
    // validation + business logic
  } catch (error) {
    if (error instanceof AppError) {
      return { error: error.message };
    }

    console.error(error);
    return { error: "Something went wrong. Please try again." };
  }
}

4. Error UI yang Baik

• Pakai error.tsx di App Router untuk unexpected error
• Tampilkan pesan yang ramah ke user (jangan expose stack trace)
• Beri tombol “Try again” atau redirect yang jelas

5. Logging yang Berguna

Saya log error ke service seperti Sentry atau Axiom, lengkap dengan context (user id, action name, dll). Sangat membantu waktu debug production.

Prinsip yang Saya Pegang

1. Jangan biarkan error “bocor” ke user dalam bentuk teknis
2. Selalu kasih feedback yang actionable
3. Log detail di server, tampilkan simple di client
4. Consistency lebih penting daripada perfect

Kesimpulan

Error handling yang baik bukan cuma soal try-catch. Itu tentang komunikasi — ke user dan ke diri sendiri waktu debugging.

Kalau error handling di project kalian masih berantakan, coba mulai dari custom error class dan consistent return type dulu.

Pertanyaan buat kalian:
Bagaimana cara kalian handle error di Next.js sekarang?
Pakai library tertentu atau pure custom?

Cerita di komentar yuk!

— Ady Rahmansyah
Software Engineer | Tech Blogger | Coffee Addict