Epic: error handling in frontend

[marlonbaeten]

Proposed strategy:

• We introduce a ErrorBoundary to catch and handle unexpected errors
• Apart from local errors/warnings (like form validation) we want - to escalate to / keep track of - a global error state for expected errors: these come in two flavors:
  • Recoverable error (modal)
  • Unrecoverable error (page)
• An error page or modal are rendered accordingly

We keep this error state global because they represent a state in out global state machine - which in our case is mainly dictated by the router. We want to prevent multiple error states at once.

[marlonbaeten]

Discussed with @lkleuver

We introduce an AppStateProvider that holds global state, like the error state but also the currently selected locale.

Recoverable errors are rendered as a modal and do not trigger navigation, unrecoverable errors show a full page message and have their own path.

The "MVP" implementation for unrecoverable errors show a stack trace and full error message. An improvement for this in production is to encode the error information and show a QR code to the user, that allows them to communicate the exact error.

[marlonbaeten]

Not that currently we did not introduce any global state apart from fatal errors that are caught and rendered by the ErrorBoundary (using react-router).