Handle harvester loading in a route guard to better handle the unauthenticated method.

shell/config/router/navigation-guards/attempt-first-login.js

@@ -5,7 +5,7 @@ import { tryInitialSetup } from '@shell/utils/auth';
 import { routeRequiresAuthentication } from '@shell/utils/router';
 
 export function install(router, context) {
-  router.beforeEach((to, from, next) => attemptFirstLogin(to, from, next, context));
+  router.beforeEach(async(to, from, next) => await attemptFirstLogin(to, from, next, context));
 }
 
 export async function attemptFirstLogin(to, from, next, { store }) {

shell/config/router/navigation-guards/authentication.js

@@ -2,7 +2,7 @@ import { routeRequiresAuthentication } from '@shell/utils/router';
 import { isLoggedIn, notLoggedIn, noAuth, findMe } from '@shell/utils/auth';
 
 export function install(router, context) {
-  router.beforeEach((to, from, next) => authenticate(to, from, next, context));
+  router.beforeEach(async(to, from, next) => await authenticate(to, from, next, context));
 }
 
 export async function authenticate(to, from, next, { store }) {

shell/config/router/navigation-guards/i18n.js

@@ -1,5 +1,5 @@
 export function install(router, context) {
-  router.beforeEach((to, from, next) => loadI18n(to, from, next, context));
+  router.beforeEach(async(to, from, next) => await loadI18n(to, from, next, context));
 }
 
 export async function loadI18n(to, from, next, { store }) {

shell/config/router/navigation-guards/index.js

@@ -1,6 +1,7 @@
 import { install as installLoadInitialSettings } from '@shell/config/router/navigation-guards/load-initial-settings';
 import { install as installAttemptFirstLogin } from '@shell/config/router/navigation-guards/attempt-first-login';
 import { install as installAuthentication } from '@shell/config/router/navigation-guards/authentication';
+import { install as installRuntimeExtensionRoute } from '@shell/config/router/navigation-guards/runtime-extension-route';
 import { install as installI18N } from '@shell/config/router/navigation-guards/i18n';
 
 /**
@@ -10,7 +11,7 @@ export function installNavigationGuards(router, context) {
   // NOTE: the order of the installation matters.
   // Be intentional when adding, removing or modifying the guards that are installed.
 
-  const navigationGuardInstallers = [installLoadInitialSettings, installAttemptFirstLogin, installAuthentication, installI18N];
+  const navigationGuardInstallers = [installLoadInitialSettings, installAttemptFirstLogin, installAuthentication, installRuntimeExtensionRoute, installI18N];
 
   navigationGuardInstallers.forEach((installer) => installer(router, context));
 }

shell/config/router/navigation-guards/load-initial-settings.js

@@ -1,7 +1,7 @@
 import { fetchInitialSettings } from '@shell/utils/settings';
 
 export function install(router, context) {
-  router.beforeEach((to, from, next) => loadInitialSettings(to, from, next, context));
+  router.beforeEach(async(to, from, next) => await loadInitialSettings(to, from, next, context));
 }
 
 export async function loadInitialSettings(to, from, next, { store }) {

shell/config/router/navigation-guards/runtime-extension-route.js

@@ -0,0 +1,31 @@
+import dynamicPluginLoader from '@shell/pkg/dynamic-plugin-loader';
+import { routeRequiresAuthentication } from '@shell/utils/router';
+
+export function install(router, context) {
+  router.beforeEach((to, from, next) => runtimeExtensionRoute(to, from, next, context));
+}
+
+export async function runtimeExtensionRoute(to, from, next, { store }) {
+  if (!routeRequiresAuthentication(to) || to.name !== '404') {
+    return next();
+  }
+
+  try {
+    // Handle the loading of dynamic plugins (Harvester) because we only want to attempt to load those plugins and routes if we first couldn't find a page.
+    // We should probably get rid of this concept entirely and just load plugins at the start.
+    await store.dispatch('loadManagement');
+    const newLocation = await dynamicPluginLoader.check({ route: { path: window.location.pathname }, store });
+
+    // If we have a new location, double check that it's actually valid
+    const resolvedRoute = newLocation ? store.app.router.resolve(newLocation) : null;
+
+    if (resolvedRoute?.route.matched.length) {
+      // Note - don't use `redirect` or `store.app.route` (breaks feature by failing to run middleware in default layout)
+      return next(newLocation);
+    }
+  } catch (e) {
+    console.error('Failed to load harvester', e); // eslint-disable-line no-console
+  }
+
+  next();
+}

shell/config/router/routes.js

@@ -484,4 +484,12 @@ export default [
         component: () => interopDefault(import('@shell/pages/c/_cluster/_product/_resource/_namespace/_id.vue')),
         name:      'c-cluster-product-resource-namespace-id'
       }]
-  }];
+  },
+  {
+    path:      '*',
+    name:      '404',
+    component: () => interopDefault(import('@shell/pages/404.vue')),
+    meta:      { requiresAuthentication: true },
+  },
+
+];

shell/initialize/entry-helpers.js

@@ -3,7 +3,6 @@ import { updatePageTitle } from '@shell/utils/title';
 import { getVendor } from '@shell/config/private-label';
 import middleware from '@shell/config/middleware.js';
 import { withQuery } from 'ufo';
-import dynamicPluginLoader from '@shell/pkg/dynamic-plugin-loader';
 
 // Global variable used on mount, updated on route change and used in the render function
 let app;
@@ -199,26 +198,6 @@ async function render(to, from, next) {
   const matches = [];
   const Components = getMatchedComponents(to, matches);
 
-  // If no Components matched, generate 404
-  if (!Components.length) {
-    // Handle the loading of dynamic plugins (Harvester) because we only want to attempt to load those plugins and routes if we first couldn't find a page.
-    // We should probably get rid of this concept entirely and just load plugins at the start.
-    await app.context.store.dispatch('loadManagement');
-    const newLocation = await dynamicPluginLoader.check({ route: { path: window.location.pathname }, store: app.context.store });
-
-    // If we have a new location, double check that it's actually valid
-    const resolvedRoute = newLocation?.path ? app.context.store.app.router.resolve({ path: newLocation.path.replace(/^\/{0,1}dashboard/, '') }) : null;
-
-    if (resolvedRoute?.route.matched.length) {
-      // Note - don't use `redirect` or `store.app.route` (breaks feature by failing to run middleware in default layout)
-      return next(resolvedRoute.resolved.path);
-    }
-
-    errorRedirect(this, new Error('404: This page could not be found'));
-
-    return next();
-  }
-
   try {
     // Call middleware
     await callMiddleware.call(this, Components, app.context);

shell/pages/404.vue

@@ -0,0 +1,15 @@
+<script>
+import Brand from '@shell/mixins/brand';
+
+export default {
+  mixins: [Brand],
+  beforeMount() {
+    this.$store.commit('setError', { error: new Error('404: This page could not be found') });
+    this.$router.replace('/fail-whale');
+  }
+};
+</script>
+
+<template>
+  <div class="dashboard-root" />
+</template>