useErrorHandler

Điểm hiển thị lỗi tập trung: phân loại AppError rồi chọn cách báo — message, notification, hoặc im lặng để form tự hiện.

Trong app sản phẩm, gần như không gọi trực tiếp: layer đã tạo sẵn một handler ở plugin 04.error và cung cấp qua $tascoError. Trang chỉ cần:

const { $tascoError } = useNuxtApp()

try {
  await removeOrder(id)
} catch (caught) {
  $tascoError(caught)
}

Trang này mô tả chính cái handler đó — hữu ích khi cần hiểu quy tắc hiển thị hoặc khi tự dựng handler riêng ngoài Nuxt (ví dụ trong Storybook hoặc một app không dùng layer).

<script setup lang="ts">
import { AppError } from '@tasco/utils'
import { useErrorHandler } from '@tasco/ui'

// Bốn loại lỗi → bốn cách hiển thị khác nhau. Trong app, layer đã gắn sẵn handler
// này và cung cấp qua $tascoError; ở đây gọi trực tiếp để thấy hành vi.
const { handleError } = useErrorHandler({
  onAuthError: () => {
    // Trong app: điều hướng về /auth/login.
  },
})

function show(kind: 'client' | 'server' | 'network' | 'validation') {
  if (kind === 'client') {
    handleError(new AppError('Đơn hàng đã bị khoá bởi người khác.', { status: 409 }))
  } else if (kind === 'server') {
    handleError(new AppError('Dịch vụ tồn kho không phản hồi.', { status: 502 }))
  } else if (kind === 'network') {
    handleError(new AppError('Không kết nối được máy chủ.'))
  } else {
    handleError(new AppError('Dữ liệu không hợp lệ', { status: 422 }))
  }
}
</script>

<template>
  <div style="display: flex; gap: 8px; flex-wrap: wrap">
    <CButton
      size="sm"
      variant="outline"
      @click="show('client')"
    >
      409 — message
    </CButton>
    <CButton
      size="sm"
      variant="outline"
      @click="show('server')"
    >
      502 — notification
    </CButton>
    <CButton
      size="sm"
      variant="outline"
      @click="show('network')"
    >
      Mất mạng — notification
    </CButton>
    <CButton
      size="sm"
      variant="outline"
      @click="show('validation')"
    >
      422 — không hiện gì
    </CButton>
  </div>
</template>

Quy tắc hiển thị

Lỗi	Hiển thị	Hook
401	message	onAuthError — layer điều hướng về trang đăng nhập
403	message	onForbidden
422	Không hiện gì	— form tự gắn lỗi vào từng ô
5xx	notification "Lỗi hệ thống"	—
Không có mã (mất mạng, timeout)	notification	—
Còn lại	message	—

Thông báo giống hệt nhau trong vòng 3 giây chỉ hiện một lần, nên nhiều request cùng hỏng không phủ kín màn hình. Đổi cửa sổ này bằng dedupeMs.

Tự tạo handler

import { useErrorHandler } from '@tasco/ui'

const { handleError } = useErrorHandler({
  onAuthError: () => navigateTo('/auth/login'),
  onForbidden: () => navigateTo('/403'),
  dedupeMs: 5000,
})

handleError trả về AppError đã chuẩn hoá nên dùng tiếp được:

const error = handleError(caught, { silent: true })
if (error.status === 409) await reloadAndRetry()

Tuỳ chọn của handleError	Tác dụng
silent: true	Chỉ phân loại và gọi hook, không hiển thị gì
fallbackMessage	Dùng khi lỗi không có message

Lưu ý

• Không tạo nhiều handler trong cùng một app: mỗi handler có bộ nhớ chống lặp riêng, hai handler sẽ hiện hai toast cho cùng một lỗi.
• 422 cố tình im lặng — đừng "sửa" bằng cách toast thêm, người dùng sẽ thấy lỗi hai nơi.
• Thông báo lấy từ error.message, tức là chuỗi backend trả về: thống nhất với backend rằng chuỗi đó viết cho người dùng cuối đọc.

Liên quan

• Hiển thị lỗi — cách dùng trong app.
• Xử lý lỗi — AppError và phân loại.
• useConfirm.