Xử lý lỗi 404 và Error Layout

Trong quá trình phát triển ứng dụng web, lỗi là điều không thể tránh khỏi — có thể là trang không tồn tại (404), lỗi server, hoặc lỗi API. Nuxt.js cung cấp các công cụ và cơ chế xử lý lỗi rõ ràng, giúp bạn hiển thị thông tin lỗi thân thiện thay vì để ứng dụng sụp đổ hoặc hiển thị giao diện trống. Bài học này sẽ hướng dẫn bạn cách tạo trang 404, error layout, và sử dụng các hàm tiện ích như showError() và createError() để kiểm soát lỗi trong quá trình xử lý dữ liệu.

Xử lý lỗi 404 và Error Layout

1. Tạo trang 404: error.vue trong pages/

Đây là cách đơn giản nhất để hiển thị một trang 404 khi người dùng truy cập vào một đường dẫn không tồn tại.

Lưu ý: Trang pages/error.vue sẽ được Nuxt tự động nhận diện khi xảy ra lỗi routing (404) nếu không có error layout riêng.

pages/error.vue

<template>
  <div class="text-center py-16">
    <h1 class="text-4xl font-bold text-red-600">404 - Không tìm thấy trang</h1>
    <p class="mt-4">Trang bạn đang tìm kiếm không tồn tại.</p>
    <NuxtLink to="/" class="text-blue-500 mt-6 inline-block">Quay về trang chủ</NuxtLink>
  </div>
</template>

2. Tạo layout error.vue trong layouts/

Nuxt hỗ trợ một layout riêng dành cho lỗi. Khi bất kỳ lỗi nào xảy ra trong ứng dụng, layout này sẽ được dùng để hiển thị thông báo lỗi.

layouts/error.vue

<template>
  <div class="min-h-screen flex flex-col items-center justify-center bg-gray-100">
    <h1 class="text-5xl text-red-600 font-bold">Lỗi: {{ error.statusCode }}</h1>
    <p class="text-lg mt-2">{{ error.message }}</p>
    <NuxtLink to="/" class="mt-4 text-blue-600 underline">Trở về trang chủ</NuxtLink>
  </div>
</template>

<script setup>
defineProps({
  error: Object
})
</script>

3. Sử dụng showError() và createError()

Đây là hai tiện ích trong Nuxt để xử lý lỗi một cách có kiểm soát bên trong setup() hoặc asyncData().

• showError(): hiển thị lỗi và dừng hiển thị phần còn lại.
• createError(): tạo ra một đối tượng lỗi có thể ném hoặc truyền đi.

Ví dụ trong script setup:

<script setup>
const route = useRoute()
const slug = route.params.slug

if (!slug) {
  showError({ statusCode: 400, statusMessage: 'Slug không hợp lệ' })
}
</script>

Ví dụ trong asyncData:

export default defineNuxtComponent({
  async setup() {
    const data = await fetchData()

    if (!data) {
      throw createError({
        statusCode: 404,
        statusMessage: 'Dữ liệu không tồn tại'
      })
    }

    return { data }
  }
})

4. Cách xử lý lỗi API và redirect

Trong các dự án thực tế, khi gọi API bạn có thể dùng try/catch để kiểm soát lỗi và quyết định có nên redirect hay hiển thị thông báo.

Ví dụ:

<script setup>
try {
  const data = await $fetch('/api/san-pham/123')
} catch (err) {
  if (err.statusCode === 404) {
    showError({ statusCode: 404, statusMessage: 'Sản phẩm không tồn tại' })
  } else {
    showError({ statusCode: 500, statusMessage: 'Lỗi hệ thống' })
  }
}
</script>

Hoặc dùng navigateTo() để chuyển hướng nếu gặp lỗi:

navigateTo('/not-found')

5. Thực hành: Hiển thị trang lỗi đẹp

Bước 1: Tạo một file layouts/error.vue với giao diện thân thiện, ví dụ dùng Tailwind để tạo layout bắt mắt.

Bước 2: Gọi API giả lập và cố tình gây lỗi để hiển thị thông báo tương ứng.

Bước 3: Điều chỉnh các lỗi thường gặp như:

• Không tìm thấy trang (404)
• Lỗi server (500)
• Lỗi dữ liệu không hợp lệ (400)

Kết luận

Trong bài này, bạn đã học cách xử lý lỗi một cách toàn diện trong Nuxt 3: từ việc tạo trang 404 tùy chỉnh, layout lỗi toàn cục, đến việc sử dụng showError() và createError() để quản lý lỗi bên trong logic. Đây là một bước quan trọng giúp ứng dụng của bạn trở nên chuyên nghiệp, dễ sử dụng và thân thiện với người dùng hơn khi xảy ra sự cố. Việc xử lý lỗi tốt không chỉ giúp người dùng không bị bối rối, mà còn giúp developer dễ dàng debug và cải thiện trải nghiệm chung của hệ thống.