Add the runtime error tracking mechanism for frontend

[akolson]

Overview

This task implements the runtime error tracking mechanism for the frontend.

Description and outcomes

• Track all unexpected runtime errors that may occur in the frontend.
• The errors should be traced by using three mechanisms:
  • Vue Error Handler
  • Window: error event
  • Window: Window: unhandledrejection event
• The configuration should be added in kolibri/core/assets/src/core-app/index.js.
• Create a function report() inside kolibri/core/assets/src/utils that is called from the error handlers. The report() function posts the error to the api/errorreports/report endpoint. For example:

  curl -X POST http://localhost:8000/api/errorreports/report   
     -H "Content-Type: application/json"   
     -d '{
          "error_message": "An example error occurred",
          "traceback": "Traceback (most recent call last): ..."
      }' 

Acceptance Criteria

• All possible runtime exceptions in the frontend are caught.
• report() is called whenever the error is reported and makes a post request to api/errorreports/report.
• Appropriate tests are written to verify correctness of implementation.

Assumptions and Dependencies

• Implementing Vue Error Handler, Window: error event, and Window: Window: unhandledrejection event should catch all frontend errors to a satisfactory degree.

Scope

• Implementing report() to make post request.
• Tracking frontend unhandled errors and calling report().

Accessibility Requirements

NA

Resources

• Vue Error Handler
• Window: error event
• Window: unhandledrejection event
• Example: Handling errors in Vue.js

[akolson]

@thesujai 🙂

[thesujai]

All set to go!

[akolson]

Closed by https://github.com/learningequality/kolibri/pull/12291