Handling "No states match" with a wildcard state

[Teknologica]

I've been looking at how to handle the "No states match" error. A basic case for this would be to implement a 404 page. For example trying to browse to a state which isn't defined like my.domain.com/bad-state just prints the console message below.

  console.warn('No states match URL: ' + location.pathname);

I haven't been able to find a feature in the source code to support a wildcard. I've also tried using the path regex to fix this:

router.add({
    name: 'wildcard',
    path: '/*',
    parent: 'main',
    enter: (ctx) => {
        console.log('matching the wildcard')
    }
});

This allows me to use stateManager.go with existing states without triggering the wildcard path but if instead we search the history _matchLocation the path /* matches anything including existing states.

I can patch it temporarily in a fork by adding wildcardState: '404' to the StateManager spec in the constructor then inside _matchLocation if the state is not found

if (!found) {
  /* eslint-disable no-console */
  console.warn('No states match URL: ' + location.pathname);
  /* eslint-enable no-console */
  this._updateHistory(true);
  if (this.wildcardState) {
      this.go({
          name: this.wildcardState,
          params: {path: location.pathname},
          replace: true
      });
  }
}

I guess the question is if this feature can be added or if it exists already how can I use it?

[Teknologica]

This was my temporary fix https://github.com/Teknologica/voie/commit/929befc826fa86a93fb7253454d4ec191329a8db

[garhbod]

+1 to add a wildcard or not found State or even a callback function in the options or implement some error handling