Vue.js (v3) use error component without changing URL - vue.js

Question

I've been searching and tinkering for a while now without any luck. I'm looking to be able to catch errors and show an "Oops" page. Just to be clear, this isn't about 404 pages (which work fine).
I've reduced this for simplicity but in the below, before a page loads, it "attempts something which may fail". When that fails, I navigate to /error which shows an error page:
const router = createRouter({
routes: [
{
path: '/',
component: Index
},
{
path: '/something',
component: Something
},
{
path: '/error',
component: Error
},
{
path: '/:catchAll(.*)',
component: NotFound
}
]
})
router.beforeEach(async (to, from, next) => {
// attempt something which may fail
})
router.onError(() => router.push('/error'))
This all works fine, but it means that the /error path is navigable, and that a path change occurs. What I'd prefer is a way to be able to show an error component (Error) if an error occurs while keeping the url path the same.
Say I was on / and then I navigated to /something but "something failed", the url path would equal /something but the Error component would be used, rather than the Something component.
Any ideas? It seems like this should be manageable but so far I'm coming up blank.
Thanks

Answer 1

As Duannx commented above, a solution to this was to use a state to control this. Here's how I did it:
I created a Pinia store to hold an error variable:
import { defineStore } from 'pinia'
export const useGlobalStore = defineStore({
id: 'global',
state: () => ({
_error: false
}),
getters: {
error: (state) => state._error
},
actions: {
async setError(value) {
this._error = !!value
}
}
})
In the router, I catch any errors:
import { createRouter, createWebHistory } from 'vue-router'
import { useGlobalStore } from '../stores/global'
import routes from './routes'
const history = createWebHistory(import.meta.env.BASE_URL)
const router = createRouter({ history, routes })
router.beforeEach(async (to, from, next) => {
const globalStore = useGlobalStore()
try {
// Things which may fail here
next()
} catch (error) {
globalStore.setError(true)
return next()
}
})
export default router
In the root component (App.vue), I then check for the error state, and either show that or the router view based on whether or not the error state is set the true.
<template>
<Error v-if="globalStore.error" />
<RouterView v-else />
</template>
This works great, thanks Duannx.