How to detect if a page has an error inside the layout
Inside the default layout I need to detect if there is an error page displayed (like for example a 404 page). How should I do this?
I've tried doing this by accessing
app.context._errored
but this value is not refreshed after a client side navigation, so if we navigate from page with an error to a working page the value of this field remains the same.
Is there an out of the box solution for that or we need to develop custom solution?
And if we need to develop custom solution how should one go about it? Should we create a composable that will hold the error state and somehow update it when error layout is invoked? What would be the proper lifecycle hoot to update such variable?19 Replies
hi, @AnJ 👋 Do you need access to the specific error, or just to know you're on the error page?
Hi, @rohrig . I need to know if I'm on the error page, no matter what the error is.
My first instinct would be to useRoute, perhaps in a middleware, and check if the 404 page, or any other error page, matches the current route. Would that work for you?
Maybe I'm not fully understanding your proposal, but I don't think that would work.
As far as I know we don't have something like a dedicated error route. So we can for example enter a non-existent URL and we will get
useRoute
response like this:![](https://utfs.io/f/fc6a3f31-fd98-453f-89a7-90ccc2b53025-1nq2cb.png)
And in case we will enter an existing URL that matches with a URL inside router configuration, but for some reason there is an error thrown (inside onSSR hook), then we get just this particular route, like for example home page route. I'm not sure how we could check if there is an error in that.
@rohrig I was thinking about a small composable like this:
That we could use to store our custom state, and then use it inside our error layout. So that when error layout is being generated we will set
isErrored
to true
. But admittedly this feels kinda wonky and I'm not sure if this is a proper path.@AnJ you're right, my first instinct was not correct. 😄 Have you tested if you're proposed solution works?
Almost. I'm having trouble with picking correct hook in which I should call the
setError
method.
First I tried putting it inside onSSR
like this:
Error layout (error.vue
):
Main layout (default.vue
):
For server side it works fine. If there is no error then only setError(false)
is called from the main layout. And if there is an error on the page then setError
is called twice, first from default layout with false
, then from error layout with true
. And it works as expected.
The problem arises when I'm navigating on the client side. The setError
inside the main layout is not called at all when doing client side navigation. So if I open a page with an error there is a setError(true)
call. And then when I navigate to a page without an error, the value is not updated and it is still isErrored = true
.
I don't know how to get this to work. What hook should I use so that setError
will be called both for server side and for client side navigation?have you tried calling it in both onSSR and onMounted?
Yes. Then we get a race condition where on SSR stage we get something like this:
and then after that on the client side we get the reverse
In consequence the final value is
isErrored = false
I see 🤔 , let me see what I can find. I'll get back to you. If you solve it in the meantime, please let me know. 🙂
Thank you 🙂
I'm looking into this. What integration and version are you on?
@AnJ The reason I ask is, when I get an error, out of the box it's using the ~/layouts/error.vue. Not the default layout
Core integration is this:
"@vue-storefront/core": "^2.7.1",
When we get an error we get a default layout with error layout nested insidecan you paste in your package.json please?
I'm looking at https://nuxtjs.org/docs/concepts/views/#error-page. Could you elaborate on your end goal, Other than just detecting errors in the default layout, what is it you're trying to achieve?
Nuxt
Views
The Views section describes all you need to know to configure data and views for a specific route in your Nuxt Application. Views consist of an app template, a layout, and the actual page.