Error Patterns

Error handling components — ErrorCard reusable (animated), Status Code, Global Error พร้อมใช้งานใน error.tsx ทันที

ErrorCard — Reusable Component

Card แสดง error — ColumnFade stagger + shake icon + title + description + Retry button + statusCode. ใช้ใน error.tsx ได้เลย

ColumnFade component ดูโค้ดได้ที่ Framer Motion → Animation Examples → Ready to Use — ต้องเพิ่ม shake variant ใน lib/framer-motion/framer-motion.ts

An unexpected error occurred. Please try again.

ตัวอย่างการใช้ใน error.tsx — ดู code ด้านล่าง

แสดง error ตาม HTTP status code — 401/403/500 มี icon + สี + ข้อความต่างกัน

500

Something went wrong on our end. Please try again later.

Full example — map status code → ข้อความ

Root error boundary — จับ error จาก root layout ต้องมี <html><body> ครบ

global-error.tsx — ดู code ด้านล่าง

Error Boundary Hierarchy — ลำดับการจับ error