Error message bubbling up to browser console

[HonkingGoose]

Describe the bug

Error message bubbling up to browser console log.

Give the steps to reproduce

The idea here is basically that a user is making a query string by hand to get around the pre-fetched versions in the comparator interface.

Steps to reproduce:

1. User manually creates a bad query string: https://octoclairvoyant.vercel.app/comparator?repo=renovatebot%2Frenovate&from=v.1.0.0&to=latest See how v.1.0.0 is not a valid version, it should be v1.0.0 of course.
2. See page with message: Application error: a client-side exception has occurred (see the browser console for more information).
3. Go to browser developer tools, see error message: TypeError: Invalid Version: v.1.0.0

What browsers are you seeing the problem on?

Firefox

Have you thought of a possible solution?

Yes

If you have thought of a solution, please tell us about it!

I think we need to wrap the relevant code in a try/catch block, and capture this kind of bad input, and prevent it from bubbling up to the browser window console log.

Do you want to help fix the bug?

No

Is there anything else we need to know?

No response

[Belco90]

I see. We need to wrap the App component with react-error-boundary, and then 1) give the user the option to reset the comparator and 2) send the error caught to Sentry.

[HonkingGoose]

That react-error-boundary tool seems nice!