How to catch routing errors when creating props for a component

Question

I'm trying to catch errors that might occur when parsing route parameters to pass to a component. For instance, component A requires a URL object and the router creates the object from the route parameter before passing it to the component, e.g.

{
  path: "/test/:parameter",
  name: "test",
  component: Test,
  props: (route) => ({
    url: new URL(route.params.parameter),
  }),
},

Vue Router offers the onError function for catching certain kinds of errors and other places have suggested using Vue Router's beforeEach. Unfortunately neither seems to be useful if an error is thrown while generating a route component's props.

The v3 docs of onError suggest that this use case isn't covered:

• The error is thrown synchronously inside a route guard function;
• The error is caught and asynchronously handled by calling next(err) inside a route guard function;
• An error occurred when trying to resolve an async component that is required to render a route.

But it's not exactly clear and it doesn't seem very useful if this use case isn't covered. So how would you do it?

MCVE

I've created a minimal example to demonstrate the behaviour. There are three links:

1. "Valid" - should work fine
2. "Invalid" - throws an exception when creating the props
3. "Does not exist" - should throw an error because the route doesn't exist

"Invalid" definitely throws an uncaught error (shown in the view), but neither 2. nor 3. write a log message into the console as expected.

Answer 1

Create transformRoutes function where you:

1. parseProps in beforeEach, if errored, create an error prop
2. return the parsed props on actual props' call
3. if the props contains an error, return some error component

(of course it should be extended to handle all possible route configurations)

main.ts:

import { transformRoutes } from "./transform-routes";
const router = createRouter({
  history: createWebHistory(),
  routes: transformRoutes([ routes here ])
});

transform-routes.js:

import Error from './views/Error.vue';

export function transformRoutes(routes) {
    routes.forEach(route => {

        let _props, _component, props = {};

        [_props, route.props] = [route.props, () => {
            const out = props;
            props = {};
            return out;
        }];

        [_component, route.component] = [route.component, async () => {
            if (props.error) {
                return Error;
            }
            return _component;
        }];

        route.beforeEnter = (...args) => {
            try {
                props = _props(...args);
            } catch (e) {
                props = { error: e.message };
            }
        }
    });
    routes.children && transformRoutes(routes.children);
    return routes;
}

Error.vue:

<script setup>
defineProps({
  error: String,
});
</script>
<template>
  <div class="error">
    {{ error }}
    <div><button @click="$router.go(-1)">Go back</button></div>
  </div>
</template>
<style scoped>
.error {
  background: #fee;
  padding: 32px;
  border: 1px solid red;
  margin: 32px;
}
</style>