How to catch routing errors when creating props for a component

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.