Config: Configure Sentry for frontend

[drikusroor]

This PR configures Sentry for the frontend (React) part of the application. This means that errors that occur in the browser will be send to Sentry automatically. Currently, I've configured it so that only 10% of the errors ocurring will be posted to Sentry to prevent us going over the limit. We can play with this percentage through time.

Browser errors that happen in both ACC and PROD will be sent to Sentry. In Sentry we can filter them based on their origin domain and many other factors.

I would like to share the credentials with you so you can also see the Sentry dashboard on Sentry.io, is there an official way to do it?

How to test this?

• Configure the Sentry DSN key obtained from @drikusroor in your .env file with the key REACT_APP_SENTRY_DSN
• Add the following route on top of your routes in frontend/src/components/App/App.js:

<Route path="/throw-error">
  <button
    onClick={() => {
      throw new Error("Test error");
    }}
  >
    Throw error
  </button>
</Route>

• (Re-)start your frontend Docker container.
• Check the console in your devtools, it should not show a warning like Sentry DSN not found (...).
• Navigate to http://localhost:3000/throw-error
• Click the Throw error button. You might want to do it more than once as the sample rate has been set to send only 10% of errors to Sentry.
• Check the network tab in your console and confirm if any POST requests have been made to xxx.ingest.sentry.io/api/...
• Log in to sentry.io and see if your error has appeared.

[BeritJanssen]

Nice! I think the Python log would be even more interesting to have - but that will definitely need some more consideration re: filtering messages going to Sentry.