Error preserve url

src/assets/scss/_global-components.scss

@@ -937,11 +937,11 @@ input[disabled].toggle-switch:checked + label:after { background-color: lighten(
 #http-error {
   text-align: center;
   line-height: normal;
-  .code { font-size: 12.5rem; font-weight: 100; }
+  .error-code { font-size: 12.5rem; font-weight: 100; }
   .message { font-size: 1.875rem; color: $color-primary; }
   a { width: fit-content; margin: 0 auto; }
   @include break-mobile-sm {
-    .code { font-size: 8rem; }
+    .error-code { font-size: 8rem; }
     .message { font-size: 1.5rem; }
   }
 }

src/composables/stores/breadcrumbs.js

@@ -35,8 +35,8 @@ export default {
     const update = async () => {
       let path = $route.path
       let routeParams = cloneDeep($route.params)
-      // Handle 403 breadcrumb
-      if ($route.name === '403' || $route.name ===  '503') return
+      // Handle api error breadcrumb
+      if ($route.name === 'NotFound' || $route.name ===  'Forbidden' || $route.name === 'ServiceUnavailable') return
       // Strip query str params since stateParams includes query and route params together
       delete routeParams.limit
       delete routeParams.page

src/router/index.js

@@ -412,7 +412,7 @@ err => {
       case 403:
         if (router.currentRoute._value.meta.ignoreAxiosInterceptor) break
         if (err.response.statusText === 'Forbidden' || err.response.data.error === 'Forbidden') {
-          router.push({ name: 'Forbidden'})
+          router.push({ name: 'Forbidden', params: { pathMatch: window.location.pathname.split('/').slice(1) }})
         }
         break
       case 404:
@@ -427,7 +427,7 @@ err => {
         break
     }
   }
-  else router.push({ name: 'ServiceUnavailable'}) // API is down, 503
+  else router.push({ name: 'ServiceUnavailable', params: { pathMatch: window.location.pathname.split('/').slice(1) }}) // API is down, 503
   return Promise.reject(err)
 })
 

src/views/layout/NotFound.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="main" id="http-error">
-    <div class="code">404</div>
+    <div class="error-code">404</div>
     <div class="message">Sorry, the page you're looking for doesn't seem to exist.</div>
     If you think this page should exist please contact an administrator.
     <br /><br />

src/views/layout/ServiceUnavailable.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="main" id="http-error">
-    <div class="code">503</div>
+    <div class="error-code">503</div>
     <div class="message">The server is currently down for maintenance or over capacity.</div>
     Keep hitting this button or come back later. If the problem persists contact an administrator.
     <br /><br />