#Module: nuxt-auth-sanctum - Display a "Cant connect" page instead of error 500 if laravel is offline

5 messages · Page 1 of 1 (latest)

stuck mountainBOT
#

Hi @past juniper. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To display a custom error page like "Can't connect to the server" when your Laravel backend is offline (instead of the default Nuxt error page), you can leverage Nuxt's error handling features. While there is no information in the knowledge sources specifically about the nuxt-auth-sanctum module, you can handle this scenario using Nuxt's built-in error handling mechanisms.

Approach

  1. Catch Network Errors in Your API Calls
    When making API requests (e.g., via useFetch, $fetch, or a custom composable), catch errors that indicate the backend is unreachable (such as network errors or timeouts).

  2. Throw a Custom Error
    Use Nuxt's createError or showError utilities to throw a custom error with a specific status code and message when you detect a connection issue.

  3. Customize error.vue
    In your project root, create or edit ~/error.vue to display a custom message based on the error details.

Example: Custom Error Handling in API Calls

<script setup lang="ts">
import { showError } from '#app'

try {
  // Example API call
  await $fetch('/api/some-endpoint')
} catch (err) {
  // Check for network error (you may need to adjust this based on your fetch library)
  if (!err.response) {
    showError({
      statusCode: 503,
      statusMessage: 'Service Unavailable',
      message: "Can't connect to the server. Please try again later."
    })
  } else {
    throw err
  }
}
</script>

showError utility

Example: Custom error.vue

<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps({
  error: Object as () => NuxtError
})
</script>
#

<template>
<div>
<h1 v-if="error.statusCode === 503">Can't connect to the server</h1>
<p v-else>{{ error.statusMessage || 'An error occurred' }}</p>
<NuxtLink to="/">Go back home</NuxtLink>
</div>
</template>

[Custom error.vue documentation](<https://nuxt.com/docs/guide/directory-structure/error>)

### Notes

- The `error.vue` file is not a route, but a special file Nuxt uses to render errors. You can customize its content based on the error code or message.
- If you use a custom composable or plugin for API calls, you can centralize this error handling logic.
- This approach is generic and works regardless of the authentication module you use, including `nuxt-auth-sanctum`.

I'm sorry, but the knowledge sources do not contain information specific to the `nuxt-auth-sanctum` module. However, the above method is the recommended Nuxt way to handle and customize error pages for network issues or backend downtime, and should work with any module that uses Nuxt's fetch or API utilities.

For more details, see the official Nuxt documentation on error handling and customizing the error page: [Error Handling](<https://nuxt.com/docs/getting-started/error-handling>), [error.vue](<https://nuxt.com/docs/guide/directory-structure/error>).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
#

@past juniper Kapa.ai is still learning and improving, please let me know how I did by reacting below.

past juniper
#

Okay, that was pretty easy....