Nuxt.js Error Handling

ภาพรวม

การจัดการข้อผิดพลาดใน Nuxt แบ่งออกเป็นหลายระดับ ตั้งแต่การดักจับข้อผิดพลาดในคอมโพเนนต์ ไปจนถึงการแสดงหน้าข้อผิดพลาดทั้งหน้า

การจัดการข้อผิดพลาดใน Vue

ใช้ onErrorCaptured เพื่อดักจับข้อผิดพลาดในคอมโพเนนต์

<script setup>
onMounted(() => {
  // จัดการข้อผิดพลาดใน lifecycle hook
  onErrorCaptured((err, instance, info) => {
    console.error("เกิดข้อผิดพลาด:", err);
    // หยุดการแพร่กระจายข้อผิดพลาด
    return true;
  });
});
</script>

หน้าข้อผิดพลาด (Error Page)

สร้างไฟล์ error.vue ในโฟลเดอร์ pages/ เพื่อกำหนดหน้าข้อผิดพลาดที่กำหนดเอง

<template>
  <div class="error-container">
    <h1 v-if="error.statusCode === 404">ไม่พบหน้าเว็บ</h1>
    <h1 v-else>เกิดข้อผิดพลาด: {{ error.message }}</h1>
    <p>กรุณาลองใหม่อีกครั้งในภายหลัง</p>
    <button @click="handleError">กลับหน้าหลัก</button>
  </div>
</template>

<script setup>
const props = defineProps({
  error: Object,
});

const handleError = () => {
  // ล้างข้อผิดพลาดและเปลี่ยนเส้นทาง
  clearError({
    redirect: "/",
  });
};
</script>

<style scoped>
.error-container {
  text-align: center;
  padding: 2rem;
}
button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background: #0056b3;
}
</style>

ฟังก์ชันสำหรับจัดการข้อผิดพลาด

createError

สร้างออบเจ็กต์ข้อผิดพลาดพร้อมข้อมูลเพิ่มเติม

// ตัวอย่างการใช้งานใน API route
// pages/api/user/[id].ts
export default defineEventHandler(async (event) => {
  const id = event.context.params?.id;
  const user = await getUserById(id);

  if (!user) {
    throw createError({
      statusCode: 404,
      statusMessage: "ไม่พบผู้ใช้",
      data: { id },
    });
  }

  return user;
});

showError

แสดงหน้าข้อผิดพลาดแบบเต็มหน้าจอ

// ตัวอย่างการใช้งานใน middleware
export default defineNuxtRouteMiddleware((to, from) => {
  if (!isAuthenticated()) {
    return showError({
      statusCode: 403,
      statusMessage: "กรุณาเข้าสู่ระบบก่อน",
    });
  }
});

clearError

ล้างสถานะข้อผิดพลาดปัจจุบัน

// ตัวอย่างการใช้งาน
const clearErrorAndRedirect = () => {
  clearError({
    redirect: "/dashboard", // เปลี่ยนเส้นทางหลังจากล้างข้อผิดพลาด
  });
};

Global Error Handler

ตั้งค่าตัวจัดการข้อผิดพลาดระดับแอปพลิเคชัน

// plugins/error-handler.ts
export default defineNuxtPlugin((nuxtApp) => {
  // จัดการข้อผิดพลาดของ Vue
  nuxtApp.vueApp.config.errorHandler = (error, instance, info) => {
    // ส่งข้อผิดพลาดไปยังบริการติดตามข้อผิดพลาด
    console.error("Vue error:", error);
  };

  // ใช้ Nuxt hook สำหรับข้อผิดพลาด
  nuxtApp.hook("vue:error", (error) => {
    console.error("Global Vue error:", error);
  });

  // จัดการข้อผิดพลาดระหว่างการเริ่มต้นแอป
  nuxtApp.hook("app:error", (error) => {
    console.error("App error:", error);
  });
});

ตัวอย่างการใช้งานร่วมกัน

<template>
  <div>
    <h1>ข้อมูลผู้ใช้</h1>
    <div v-if="pending">กำลังโหลด...</div>
    <div v-else-if="error">
      <p>เกิดข้อผิดพลาด: {{ error.message }}</p>
      <button @click="retry">ลองใหม่</button>
    </div>
    <div v-else>
      <p>ชื่อ: {{ user.name }}</p>
      <p>อีเมล: {{ user.email }}</p>
    </div>
  </div>
</template>

<script setup>
const route = useRoute();
const userId = computed(() => route.params.id);

const { data: user, pending, error, refresh } = useFetch(
  () => `/api/users/${userId.value}`,
  {
    onError: (err) => {
      console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", err);
      // แสดงข้อความที่อ่านง่ายขึ้นสำหรับผู้ใช้
      err.message = "ไม่สามารถโหลดข้อมูลผู้ใช้ได้ กรุณาลองใหม่ภายหลัง";
    },
  },
);

function retry() {
  refresh();
}
</script>

สรุป

• ใช้ createError เพื่อสร้างข้อผิดพลาดที่กำหนดเอง
• ใช้ error.vue สำหรับหน้าข้อผิดพลาดที่กำหนดเอง
• ใช้ clearError เพื่อล้างสถานะข้อผิดพลาด
• ตั้งค่า global error handler ใน plugin สำหรับการจัดการข้อผิดพลาดทั้งแอป
• ใช้ onErrorCaptured สำหรับการจัดการข้อผิดพลาดในคอมโพเนนต์

TIP

• ควรแสดงข้อความข้อผิดพลาดที่อ่านง่ายสำหรับผู้ใช้
• บันทึกข้อผิดพลาดทั้งหมดลงในระบบติดตามข้อผิดพลาด
• ใช้ HTTP status code ที่เหมาะสมสำหรับข้อผิดพลาดแต่ละประเภท