How to handle Nuxt SSR errors and show custom 404 || 500 pages?

In projects utilizing Nuxt.js for server-side rendering (SSR), handling errors and displaying custom 404 or 500 error pages is a critical aspect of enhancing user experience. The following are the steps to handle these errors and implement custom error pages:

1. Understanding Nuxt.js Error Handling Mechanisms

In Nuxt.js, if an asynchronous data fetching function (such as asyncData or fetch) in a page component throws an error, Nuxt.js automatically displays an error page. By default, Nuxt uses its built-in error page, but you can customize these pages.

2. Creating Custom Error Pages

You can create a custom error page by adding a layouts/error.vue file. This page supports two props: error (which contains specific error information, such as status code and message) and layout (which defines the page layout, optional).

Example:

vue
<template>
  <div>
    <h1 v-if="error.statusCode === 404">Page Not Found</h1>
    <h1 v-if="error.statusCode === 500">Internal Server Error</h1>
    <p>{{ error.message }}</p>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'blog' // You can specify a layout or omit it for the default
}
</script>

3. Capturing and Handling Errors

In your page components or store, ensure you properly handle asynchronous operations that might fail. For example, when using the asyncData method to fetch data, if an error occurs, you can use the error method to specify the error status code and message.

Example:

javascript
async asyncData({ params, error }) {
  try {
    let { data } = await axios.get(`https://api.example.com/posts/${params.id}`);
    return { postData: data };
  } catch (e) {
    error({ statusCode: 404, message: 'Post not found' });
  }
}

4. Testing Your Error Pages

During development, ensure you test the error handling logic and display effects. You can intentionally throw errors to verify that your error pages work as expected.

5. Logging in Production Environments

In production environments, appropriate logging is crucial for monitoring and quickly responding to errors. Ensure you record all relevant error details to help the team identify and resolve issues efficiently.

By following these steps, you can effectively handle errors when using Nuxt.js for SSR and provide a more user-friendly experience through custom error pages. This not only helps users understand what happened but also enhances the overall professionalism and reliability of your website.