N
Nuxt•2mo ago
shoaib0987

Disable Default Error Screen

Can someone tell me how to disable nuxt default error screen on production. show errors in console instead for breaking entier application. Thanks! (nuxt v3.11.1)
No description
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @shoaib0987. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To disable the default error screen in Nuxt 3 production and show errors in the console instead, you have a few options: Custom Error Handling The most straightforward approach is to create a custom error.vue file in your project root. This allows you to override the default error page with your own implementation: 
<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps({
  error: Object as () => NuxtError
})

// Log the error to console
console.error('Application error:', props.error)

// Automatically clear the error to prevent showing error UI
// You can remove this if you want to show a minimal error UI
onMounted(() => {
  clearError()
})
</script>

<template>
  <!-- Minimal or empty template -->
  <div></div>
</template>
<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps({
  error: Object as () => NuxtError
})

// Log the error to console
console.error('Application error:', props.error)

// Automatically clear the error to prevent showing error UI
// You can remove this if you want to show a minimal error UI
onMounted(() => {
  clearError()
})
</script>

<template>
  <!-- Minimal or empty template -->
  <div></div>
</template>
This will log errors to the console while preventing the full-screen error page from being displayed to users. Using Error Plugins You can also create a plugin to handle errors globally: 
// plugins/error-handler.ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('vue:error', (error, instance, info) => {
    // Log error to console
    console.error('Vue Error:', error)
  })
  
  nuxtApp.hook('app:error', (error) => {
    // Log app errors to console
    console.error('App Error:', error)
  })
})
// plugins/error-handler.ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('vue:error', (error, instance, info) => {
    // Log error to console
    console.error('Vue Error:', error)
  })
  
  nuxtApp.hook('app:error', (error) => {
    // Log app errors to console
    console.error('App Error:', error)
  })
})
Using NuxtErrorBoundary For more granular control, you can use the <NuxtErrorBoundary> component in your layouts or pages to catch errors locally without triggering the full-screen error page: 
<template>
  <NuxtErrorBoundary @error="logError">
    <!-- Your app content -->
    <NuxtPage />
    
    <!-- Custom error handling -->
    <template #error="{ error }">
      <!-- Empty or minimal error UI -->
    </template>
  </NuxtErrorBoundary>
</template>
<script setup>
function logError(error) {
  console.error('Caught error:', error)
}
</script>
<template>
  <NuxtErrorBoundary @error="logError">
    <!-- Your app content -->
    <NuxtPage />
    
    <!-- Custom error handling -->
    <template #error="{ error }">
      <!-- Empty or minimal error UI -->
    </template>
  </NuxtErrorBoundary>
</template>
<script setup>
function logError(error) {
  console.error('Caught error:', error)
}
</script>
This approach allows you to catch errors at specific levels of your application without breaking the entire app NuxtErrorBoundary. Remember that in production, Nuxt already hides detailed error messages from users for security reasons, as implemented in this PR, but the error page itself will still show. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@803333276101116034> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?