---
globs: *.vue,*.js
---

# Error Handling Patterns

## Global Error Handling
```javascript
// main.js - Global error handler
app.config.errorHandler = (err, instance, info) => {
  console.error('Global error:', err)
  console.error('Component instance:', instance)
  console.error('Error info:', info)
  
  // Log to external service
  // logErrorToService(err, info)
}
```

## API Error Handling
```javascript
// services/baseService.js
export const handleApiError = (error, context = 'API call') => {
  if (error.response) {
    const { status, data } = error.response
    switch (status) {
      case 400:
        return new Error(data.message || 'Dữ liệu không hợp lệ')
      case 401:
        return new Error('Phiên đăng nhập đã hết hạn')
      case 403:
        return new Error('Bạn không có quyền thực hiện hành động này')
      case 404:
        return new Error('Không tìm thấy dữ liệu')
      case 500:
        return new Error('Lỗi máy chủ, vui lòng thử lại sau')
      default:
        return new Error(data.message || 'Có lỗi xảy ra')
    }
  } else if (error.request) {
    return new Error('Không thể kết nối đến máy chủ')
  } else {
    return new Error(error.message || 'Có lỗi không xác định')
  }
}
```

## Component Error Boundaries
```vue
<template>
  <div class="error-boundary">
    <div v-if="hasError" class="error-container">
      <div class="alert alert-danger">
        <h5>Đã xảy ra lỗi</h5>
        <p>{{ errorMessage }}</p>
        <button @click="retry" class="btn btn-outline-danger">
          Thử lại
        </button>
      </div>
    </div>
    <slot v-else />
  </div>
</template>

<script setup>
const hasError = ref(false)
const errorMessage = ref('')

const retry = () => {
  hasError.value = false
  errorMessage.value = ''
}

onErrorCaptured((error, instance, info) => {
  hasError.value = true
  errorMessage.value = error.message
  console.error('Component error:', error, info)
  return false
})
</script>
```