Some days ago I was working on an issue for my job where a page on React couldn't "catch" an error when someone tried to navigate using a bad URL that had the percentage sign (%) that can't be decoded.
The React project uses react-router-dom to handle navigation by showing different views when accessing different URL's (it even has a 404 route when it has no matching routes), and the struture looks very similar to React Router's 404 example, here's the link where you can try for yourself adding /% to the URL from the sandbox's browser and understand in a better way the problem.
In my local-development scenario the page only shows the stack trace in the following image (also check the console output).
I understand that it if someone provides a bad URL that can't be decoded this error will throw and therefore the page will not run. I've been looking for a while and haven't found nothing related to how to catch it on React (I'm not sure if that's really possible).
Any suggestions are welcome!
