How to handle errors and debug in Nuxt.js?

In Nuxt.js application development, effective error handling and debugging are crucial for ensuring application stability and development efficiency. Here are methods for error handling and debugging in Nuxt.js.

Error Handling Strategies:

1. Page-level Error Handling

   • Error page: Create layouts/error.vue component to handle global errors
   • Error layout: Customize error page style and content
   • Example:

vue
<!-- layouts/error.vue -->
<template>
  <div class="error-page">
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>Server error</h1>
    <p>{{ error.message }}</p>
    <nuxt-link to="/">Back to home</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'blank' // Use blank layout
}
</script>

1. Data Fetching Error Handling

   • asyncData errors: Use try-catch to catch errors
   • fetch errors: Use try-catch to catch errors
   • Example:

javascript
export default {
  async asyncData({ params, $axios, error }) {
    try {
      const data = await $axios.$get(`/api/users/${params.id}`)
      return { user: data }
    } catch (err) {
      error({ statusCode: 500, message: 'Failed to fetch user data' })
    }
  }
}

1. Middleware Error Handling

   • Catch and handle errors in middleware
   • Can redirect to error page or login page

2. Plugin Error Handling

   • Add error handling logic in plugins
   • Avoid plugin errors causing the entire application to crash

3. Global Error Handling

   • Use window.onerror to catch client-side errors
   • Use process.on('unhandledRejection') to catch unhandled Promise errors

Debugging Methods:

1. Development Tools

   • Vue DevTools: For debugging Vue components and state
   • Chrome DevTools: For network requests, performance analysis, etc.
   • Nuxt DevTools: Nuxt-specific development tools

2. Logging

   • Server-side logging: Use console.log or professional logging libraries
   • Client-side logging: Use console.log or frontend logging libraries
   • Error monitoring: Integrate error monitoring services like Sentry

3. Debug Mode

   • Use nuxt dev to start the development server
   • Enable source maps for easier debugging
   • Configure debug option in nuxt.config.js

4. Environment Variables

   • Use .env files to manage environment variables
   • Distinguish between development, testing, and production environments
   • Example:

javascript
// nuxt.config.js
require('dotenv').config()

export default {
  env: {
    API_BASE_URL: process.env.API_BASE_URL || 'http://localhost:3000/api'
  }
}

1. Performance Debugging

   • Use Lighthouse to analyze performance
   • Use Chrome DevTools' Performance panel
   • Use nuxt build --analyze to analyze build output

Best Practices:

1. Error Handling

   • Add error handling for all asynchronous operations
   • Provide friendly error messages to users
   • Record error information for troubleshooting

2. Debugging Tips

   • Use console.log and console.debug to output debugging information
   • Use breakpoints to debug complex logic
   • Use Vue DevTools to inspect component state

3. Error Monitoring

   • Integrate error monitoring services like Sentry
   • Set up error alert mechanisms
   • Regularly analyze error logs

4. Development Environment Configuration

   • Enable detailed error information
   • Configure hot reload to improve development efficiency
   • Use ESLint and Prettier to maintain code quality

Common Errors and Solutions:

1. 404 Error

   • Check if route configuration is correct
   • Ensure page files exist
   • Check if dynamic route parameters are valid

2. 500 Error

   • Check if server-side code has errors
   • Check if API requests are normal
   • View server logs for detailed error information

3. Data Fetching Error

   • Check if API address is correct
   • Check if network connection is normal
   • Check if permissions are sufficient

4. Build Error

   • Check if dependencies are correctly installed
   • Check if code has syntax errors
   • Check if webpack configuration is correct

Recommended Debugging Tools:

• Vue DevTools: Debug Vue components and state
• Sentry: Error monitoring and tracking
• Lighthouse: Performance analysis and optimization suggestions
• Chrome DevTools: Network requests and performance analysis
• Nuxt DevTools: Nuxt-specific development tools