Implement a client-side logging

[frankeros]

Parent Issue
#3271

Description
In order to handle JS exceptions from components, we need to implement client-side logging using React error boundaries with a service to send the errors to the backend to store them.

Tasks:

• Define log level strategy (logging and UI representation).
• Create a backend service to store (evaluate alternatives) all frontend logs from a new endpoint. #3312
• Create an error boundary component as a HOC. Create an error boundary component as a HOC. #3313
• Create a new logging service with different log levels and send logs to the new endpoint.
• Create a new error handler to be responsible for the error orchestration (business rules for errors). Create new error handler to be responsible for the error orchestration #3316

Acceptance criteria

• Not all errors should be sent to the backend, only logs categorized with a certain level or higher.
• The errors displayed in the UI must be clear to the user and not prevent the use of the app.
• The component must display only NO business errors, the business errors must be handled by the corresponding component.
• The error orchestrator must be responsible for manage what to do with the errors according to the error level and interfaces.

Alternatives
Check the libs loglevel and loglevel-plugin-remote.
Here an example with error boundary and loglevel.

[frankeros]

Define log level strategy (logging and UI representation).

Levels:
--- 2 tier ---

• Verbose
• Debug
• Info
• Warning
  --- 1 tier ---
• Error
  • UI: A React component crash but, the app continues working (propose Toast and console.log)
  • Bussines: It's an expected and handled error but is necessary to display or log for the user. Display and log should be optional.
  • Critical: The app doesn't work