Building a Consistent Error Handling Strategy for Vue Apps

{
  "title": "Building a Consistent Error Handling Strategy for Vue Apps",
  "description": "Learn to implement a standardized error handling strategy in Vue to ensure user-friendly error feedback.",
  "category": "Vue Cursor Rules",
  "rules": [
    {
      "id": "vue-global-error-handler",
      "description": "Implement a global error handler using Vue's `config.errorHandler` to catch and process uncaught errors across the application.",
      "severity": "error",
      "pattern": "Vue\\.config\\.errorHandler\\s*=\\s*function\\s*\\(err, vm, info\\)\\s*{[^}]*}",
      "fix": "Ensure that a global error handler is defined to catch and process uncaught errors across the application.",
      "example": {
        "bad": "Vue.config.errorHandler = null;",
        "good": "Vue.config.errorHandler = function (err, vm, info) { /* handle error */ };"
      }
    },
    {
      "id": "vue-error-captured-hook",
      "description": "Utilize the `errorCaptured` lifecycle hook in components to handle errors locally and prevent them from propagating.",
      "severity": "warning",
      "pattern": "errorCaptured\\s*\\(err, vm, info\\)\\s*{[^}]*}",
      "fix": "Implement the `errorCaptured` lifecycle hook in components to handle errors locally and prevent them from propagating.",
      "example": {
        "bad": "errorCaptured() { return false; }",
        "good": "errorCaptured(err, vm, info) { /* handle error */ return false; }"
      }
    },
    {
      "id": "vue-async-error-handling",
      "description": "Ensure that all asynchronous operations are wrapped in `try...catch` blocks to handle potential errors gracefully.",
      "severity": "error",
      "pattern": "async\\s+function\\s*\\w*\\s*\\([^)]*\\)\\s*{[^}]*}",
      "fix": "Wrap all asynchronous operations in `try...catch` blocks to handle potential errors gracefully.",
      "example": {
        "bad": "async function fetchData() { const data = await fetch('/api/data'); }",
        "good": "async function fetchData() { try { const data = await fetch('/api/data'); } catch (error) { /* handle error */ } }"
      }
    },
    {
      "id": "vue-error-boundary-component",
      "description": "Create and use error boundary components to catch and handle errors in their child component tree.",
      "severity": "warning",
      "pattern": "<ErrorBoundary>.*</ErrorBoundary>",
      "fix": "Create and use error boundary components to catch and handle errors in their child component tree.",
      "example": {
        "bad": "<MyComponent />",
        "good": "<ErrorBoundary><MyComponent /></ErrorBoundary>"
      }
    },
    {
      "id": "vue-user-friendly-error-messages",
      "description": "Provide user-friendly error messages instead of raw error details to enhance user experience.",
      "severity": "info",
      "pattern": "throw\\s+new\\s+Error\\(.*\\)",
      "fix": "Provide user-friendly error messages instead of raw error details to enhance user experience.",
      "example": {
        "bad": "throw new Error('Unexpected error occurred');",
        "good": "throw new Error('An unexpected issue occurred. Please try again later.');"
      }
    }
  ]
}