Next.js / Error UI

Error UI

Апп ажиллах явцад алдаа гарахаас зайлсхийх боломжгүй — сүлжээ тасрах, өгөгдлийн сан хариу өгөхгүй байх, байхгүй файл унших зэрэг бүх зүйл тохиолдож болно. Next.js-д error.tsx файл нэмэхэд алдааг автоматаар барьж, хэрэглэгчид ойлгомжтой мэдэгдэл харуулна — апп бүхэлдээ унахаас сэргийлдэг.

error.tsx — Автомат алдааны UI

page.tsx-тай нэг директорт error.tsx нэмэхэд тухайн хуудас болон түүний дотор гарсан бүх алдааг барьдаг:

код
app/
└── courses/
    ├── page.tsx          ← Энд алдаа гарвал...
    ├── loading.tsx
    └── error.tsx         ← ...энд барина

error.tsx нь заавал Client Component байх ёстой — алдааны мэдээллийг харуулж, дахин оролдох товч нэмэхэд onClick event хэрэгтэй тул:

tsx
// app/courses/error.tsx
"use client";

import { useEffect } from "react";

interface Props {
  error: Error & { digest?: string };
  reset: () => void;
}

export default function CoursesError({ error, reset }: Props) {
  useEffect(() => {
    // Алдааг log-д бүртгэх (жишээлбэл Sentry рүү илгээх)
    console.error(error);
  }, [error]);

  return (
    <div className="flex flex-col items-center justify-center min-h-[400px] gap-4">
      <h2 className="text-xl font-bold text-white">Алдаа гарлаа</h2>
      <p className="text-slate-400 text-sm text-center max-w-xs">
        Сургалтуудыг ачаалахад алдаа гарлаа. Дахин оролдоно уу.
      </p>
      <button
        onClick={reset}
        className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-500 transition-colors"
      >
        Дахин оролдох
      </button>
    </div>
  );
}

reset функцийг дуудахад Next.js тухайн хэсгийг дахин render хийхийг оролдоно — хуудсыг бүхэлд нь дахин ачаалах шаардлагагүй.

error.tsx Props

| Prop | Төрөл | Тайлбар | | ------- | ----------------------------- | -------------------------------------- | | error | Error & { digest?: string } | Гарсан алдааны объект | | reset | () => void | Тухайн хэсгийг дахин render хийх функц |

error.message нь алдааны тайлбар текстийг агуулдаг. Гэхдээ production орчинд энэ текстийг хэрэглэгчид шууд харуулахаас болгоомжил — дотоод мэдээлэл задарч болно.

Global error — Root алдаа

app/layout.tsx-д гарсан алдааг барихад app/global-error.tsx ашиглана. Энэ файл <html> болон <body> тэгийг өөрөө агуулах ёстой:

tsx
// app/global-error.tsx
"use client";

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <html lang="mn">
      <body className="bg-[#0b1120]">
        <div className="flex flex-col items-center justify-center min-h-screen gap-4">
          <h1 className="text-2xl font-bold text-white">
            Системийн алдаа гарлаа
          </h1>
          <p className="text-slate-400">Уучлаарай, санаандгүй алдаа гарлаа.</p>
          <button
            onClick={reset}
            className="px-4 py-2 bg-indigo-600 text-white rounded-lg"
          >
            Дахин оролдох
          </button>
        </div>
      </body>
    </html>
  );
}

Алдааг санаатайгаар гаргах

Хөгжүүлэлтийн явцад error.tsx зөв ажиллаж байгаа эсэхийг шалгахад Server Component-с алдаа шиддэг:

tsx
// app/test/page.tsx — Туршилтын зорилгоор
export default async function TestPage() {
  // Энэ алдааг app/test/error.tsx барина
  throw new Error("Туршилтын алдаа");

  return <div>Энэ харагдахгүй</div>;
}
tsx
// app/test/error.tsx
"use client";

export default function TestError({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  return (
    <div className="p-6">
      <h2 className="text-white font-bold">Барьсан алдаа:</h2>
      <p className="text-red-400 font-mono text-sm mt-2">{error.message}</p>
      <button
        onClick={reset}
        className="mt-4 px-3 py-1 bg-[#1e293b] text-slate-300 rounded text-sm"
      >
        Дахин оролдох
      </button>
    </div>
  );
}

error.tsx давхарлалт

loading.tsx шиг error.tsx мөн давхарлагдана. Тохирох хамгийн ойр error.tsx-г ашиглана:

код
app/
├── error.tsx                          ← Root алдааны UI
└── courses/
    ├── error.tsx                      ← /courses/* алдааны UI
    └── [courseSlug]/
        ├── error.tsx                  ← /courses/[slug]/* алдааны UI
        └── [lessonSlug]/
            └── page.tsx

Хичээлийн хуудасд алдаа гарвал /courses/[courseSlug]/error.tsx барина. Тэр файл байхгүй бол /courses/error.tsx барина. Мөн байхгүй бол app/error.tsx барина.

Дараагийн хичээлд:

Not Found хуудас судална. notFound() функц болон not-found.tsx файл ашиглан 404 алдааг хэрэглэгчид тааламжтайгаар харуулах аргыг ойлгоно.

← Өмнөх хичээлLoading UI ба SuspenseДараах хичээл →Not Found хуудас