Hello World
First post here, hello world!
Context
- Nuxt 3.10.3
- Vue 3.4.15
In Nuxt 3.10.3 you can't retrieve custom error message properly.
If you write a custom error message you cannot be able to retrieve it without a little but dirty workaround.
Example
Here is a short example :
- A simple API event handler throwing a basic error
- A simple page with 2 actions:
- getting an error with
$fetch() - getting an error with
useFetch() - and displaying the result
- getting an error with
# /pages/error.vue
<template>
<p><button @click="onClickFetch">GetError with $fetch()</button></p>
<p><button @click="onClickUseFetch">GetError with useFetch()</button></p>
<pre v-if="myError">
- statusCode: {{ myError.statusCode }}
- statusMessage: {{ myError.statusMessage }}
- message: {{ myError.message }}
- data: {{ myError.data }}
</pre>
</template>
<script setup lang="ts">
const myError = useState('myError')
const onClickFetch = async e => {
myError.value = null;
try {
const data = await $fetch('/api/error')
} catch (error) {
myError.value = error
}
}
const onClickUseFetch = async e => {
myError.value = null;
const { data, error, execute, pending, refresh, status } = await useFetch('/api/error')
myError.value = error
}
</script>
# /server/api/error.ts
export default defineEventHandler(async event => {
throw createError({
statusCode: 500,
statusMessage: 'MyError statusMessage (éàè)',
message: 'MyError message (éàè)'
data: {
data: {
message: `MyError data message (éàè)`,
},
},
})
})
Result
- statusCode: 500
- statusMessage: Internal Server Error
- message: [GET] "/api/error": 500 Internal Server Error
- data:
{
data: {
message: `MyError data message (éàè)`,
},
}
As you can see, .statusMessage and .message are not returning your custom message.
Workaround
Dirty workaround : use .data to pass your custom error message.
# /server/api/error.ts
export default defineEventHandler(async event => {
throw createError({
statusCode: 500,
statusMessage: 'Internal Server Error',
// Here we have to define the `data` property
data: {
message: `My custom error message`,
},
})
})
<template>
<div v-if="myError">
<!-- Here we have to use .data.data.message -->
<p>{{ myError.data.data.message }}</p>
</div>
</template>
<script setup lang="ts">
const myError = useState('myError')
try {
const data = await $fetch('/api/error')
} catch (error) {
myError.value = error
}
</script>
It's dirty because your have to do 2 things :
- writing the
datablock on every error you want to throw - using
.data.data.messageevery time you want to display your message
Not found a better solution from now.
If you know a better solution, please, let us know in comment.
Top comments (0)