GSoC: Distributed error reporting

kolibri/core/analytics/tasks.py

@@ -7,6 +7,7 @@
 
 from kolibri.core.analytics.utils import DEFAULT_SERVER_URL
 from kolibri.core.analytics.utils import ping_once
+from kolibri.core.errorreports.tasks import ping_error_reports
 from kolibri.core.tasks.decorators import register_task
 from kolibri.core.tasks.exceptions import JobRunning
 from kolibri.core.tasks.main import job_storage
@@ -24,7 +25,9 @@
 @register_task(job_id=DEFAULT_PING_JOB_ID)
 def _ping(started, server, checkrate):
     try:
-        ping_once(started, server=server)
+        pingback_id = ping_once(started, server=server)
+        if pingback_id:
+            ping_error_reports.enqueue(args=(server, pingback_id))
     except ConnectionError:
         logger.warning(
             "Ping failed (could not connect). Trying again in {} minutes.".format(

kolibri/core/analytics/utils.py

@@ -471,3 +471,4 @@ def ping_once(started, server=DEFAULT_SERVER_URL):
     if "id" in data:
         stat_data = perform_statistics(server, data["id"])
         create_and_update_notifications(stat_data, nutrition_endpoints.STATISTICS)
+        return data["id"]

kolibri/core/api_urls.py

@@ -13,4 +13,5 @@
     re_path(r"^discovery/", include("kolibri.core.discovery.api_urls")),
     re_path(r"^notifications/", include("kolibri.core.analytics.api_urls")),
     re_path(r"^public/", include("kolibri.core.public.api_urls")),
+    re_path(r"^errorreports/", include("kolibri.core.errorreports.api_urls")),
 ]

kolibri/core/assets/src/api-resources/__tests__/errorReport.test.js

@@ -0,0 +1,95 @@
+import urls from 'kolibri.urls';
+import Resource from '../errorReport';
+import {
+  VueErrorReport,
+  JavascriptErrorReport,
+  UnhandledRejectionErrorReport,
+} from '../../utils/errorReportUtils';
+
+/* eslint-env jest */
+jest.mock('kolibri.urls', () => ({
+  'kolibri:core:report': jest.fn(),
+}));
+
+describe('Error Report', () => {
+  beforeEach(() => {
+    urls['kolibri:core:report'].mockReturnValue('/api/core/report');
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should call api/core/report with VueErrorReport data', () => {
+    const vueError = new Error('Vue error');
+    vueError.stack = 'My stack trace';
+    const vm = { $options: { name: 'TestComponent' } };
+    const errorReport = new VueErrorReport(vueError, vm);
+
+    const expectedData = {
+      error_message: 'Vue error',
+      traceback: 'My stack trace',
+      context: {
+        ...errorReport.getContext(),
+        component: 'TestComponent',
+      },
+    };
+
+    Resource.client = jest.fn();
+    Resource.report(errorReport);
+
+    expect(Resource.client).toHaveBeenCalledWith({
+      url: '/api/core/report',
+      method: 'post',
+      data: expectedData,
+    });
+  });
+
+  it('should call api/core/report with JavascriptErrorReport data', () => {
+    const jsErrorEvent = {
+      error: new Error('Javascript error'),
+    };
+    jsErrorEvent.error.stack = 'My stack trace';
+
+    const errorReport = new JavascriptErrorReport(jsErrorEvent);
+
+    const expectedData = {
+      error_message: 'Javascript error',
+      traceback: 'My stack trace',
+      context: errorReport.getContext(),
+    };
+
+    Resource.client = jest.fn();
+    Resource.report(errorReport);
+
+    expect(Resource.client).toHaveBeenCalledWith({
+      url: '/api/core/report',
+      method: 'post',
+      data: expectedData,
+    });
+  });
+
+  it('should call api/core/report with UnhandledRejectionErrorReport data', () => {
+    const rejectionEvent = {
+      reason: new Error('Unhandled rejection'),
+    };
+    rejectionEvent.reason.stack = 'My stack trace';
+
+    const errorReport = new UnhandledRejectionErrorReport(rejectionEvent);
+
+    const expectedData = {
+      error_message: 'Unhandled rejection',
+      traceback: 'My stack trace',
+      context: errorReport.getContext(),
+    };
+
+    Resource.client = jest.fn();
+    Resource.report(errorReport);
+
+    expect(Resource.client).toHaveBeenCalledWith({
+      url: '/api/core/report',
+      method: 'post',
+      data: expectedData,
+    });
+  });
+});

kolibri/core/assets/src/api-resources/errorReport.js

@@ -0,0 +1,15 @@
+import { Resource } from 'kolibri.lib.apiResource';
+import urls from 'kolibri.urls';
+
+export default new Resource({
+  name: 'errorreports',
+  report(error) {
+    const url = urls['kolibri:core:report']();
+    const data = error.getErrorReport();
+    return this.client({
+      url,
+      method: 'post',
+      data: data,
+    });
+  },
+});

kolibri/core/assets/src/api-resources/index.js

@@ -24,6 +24,7 @@ export { default as UserSyncStatusResource } from './userSyncStatus';
 export { default as ContentRequestResource } from './contentRequest';
 export { default as ContentNodeProgressResource } from './contentNodeProgress';
 export { default as DevicePermissionsResource } from './devicePermissions';
+export { default as ErrorReportResource } from './errorReport';
 export { default as RemoteChannelResource } from './remoteChannel';
 export { default as LessonResource } from './lesson';
 export { default as AttemptLogResource } from './attemptLog';

kolibri/core/assets/src/core-app/index.js

@@ -16,8 +16,14 @@ import heartbeat from 'kolibri.heartbeat';
 import ContentRenderer from '../views/ContentRenderer';
 import initializeTheme from '../styles/initializeTheme';
 import { i18nSetup } from '../utils/i18n';
-import setupPluginMediator from './pluginMediator';
+import { ErrorReportResource } from '../api-resources';
+import {
+  VueErrorReport,
+  JavascriptErrorReport,
+  UnhandledRejectionErrorReport,
+} from '../utils/errorReportUtils';
 import apiSpec from './apiSpec';
+import setupPluginMediator from './pluginMediator';
 
 // Do this before any async imports to ensure that public paths
 // are set correctly
@@ -71,6 +77,26 @@ heartbeat.startPolling();
 
 i18nSetup().then(coreApp.ready);
 
+// these shall be responsibe for catching runtime errors
+Vue.config.errorHandler = function (err, vm) {
+  logging.error(`Unexpected Error: ${err}`);
+  const error = new VueErrorReport(err, vm);
+  ErrorReportResource.report(error);
+};
+
+window.addEventListener('error', e => {
+  logging.error(`Unexpected Error: ${e.error}`);
+  const error = new JavascriptErrorReport(e);
+  ErrorReportResource.report(error);
+});
+
+window.addEventListener('unhandledrejection', event => {
+  event.preventDefault();
+  logging.error(`Unhandled Rejection: ${event.reason}`);
+  const error = new UnhandledRejectionErrorReport(event);
+  ErrorReportResource.report(error);
+});
+
 // This is exported by webpack as the kolibriCoreAppGlobal object, due to the 'output.library' flag
 // which exports the coreApp at the bottom of this file as a named global variable:
 // https://webpack.github.io/docs/configuration.html#output-library

kolibri/core/assets/src/utils/browserInfo.js

@@ -64,6 +64,13 @@ export const os = {
   patch: osVersion[2],
 };
 
+// Device info
+export const device = {
+  type: info.device.type || 'desktop',
+  model: info.device.model,
+  vendor: info.device.vendor,
+};
+
 // Check for presence of the touch event in DOM or multi-touch capabilities
 export const isTouchDevice =
   'ontouchstart' in window ||

kolibri/core/assets/src/utils/errorReportUtils.js

@@ -0,0 +1,66 @@
+import { browser, os, device, isTouchDevice } from './browserInfo';
+
+class ErrorReport {
+  constructor(e) {
+    this.e = e;
+    this.context = this.getContext();
+  }
+
+  getErrorReport() {
+    throw new Error('getErrorReport() method must be implemented.');
+  }
+
+  getContext() {
+    return {
+      browser: browser,
+      os: os,
+      device: {
+        ...device,
+        is_touch_device: isTouchDevice,
+        screen: {
+          width: window.screen.width,
+          height: window.screen.height,
+          available_width: window.screen.availWidth,
+          available_height: window.screen.availHeight,
+        },
+      },
+    };
+  }
+}
+
+export class VueErrorReport extends ErrorReport {
+  constructor(e, vm) {
+    super(e);
+    this.vm = vm;
+  }
+  getErrorReport() {
+    return {
+      error_message: this.e.message,
+      traceback: this.e.stack,
+      context: {
+        ...this.context,
+        component: this.vm.$options.name || this.vm.$options._componentTag || 'Unknown Component',
+      },
+    };
+  }
+}
+
+export class JavascriptErrorReport extends ErrorReport {
+  getErrorReport() {
+    return {
+      error_message: this.e.error.message,
+      traceback: this.e.error.stack,
+      context: this.context,
+    };
+  }
+}
+
+export class UnhandledRejectionErrorReport extends ErrorReport {
+  getErrorReport() {
+    return {
+      error_message: this.e.reason.message,
+      traceback: this.e.reason.stack,
+      context: this.context,
+    };
+  }
+}

kolibri/core/errorreports/api.py

@@ -0,0 +1,39 @@
+import logging
+
+from django.core.exceptions import ValidationError
+from rest_framework import status
+from rest_framework.decorators import api_view
+from rest_framework.response import Response
+
+from .constants import FRONTEND
+from .models import ErrorReports
+from .serializers import ErrorReportSerializer
+
+
+logger = logging.getLogger(__name__)
+
+
+@api_view(["POST"])
+def report(request):
+    serializer = ErrorReportSerializer(data=request.data)
+    if serializer.is_valid():
+        data = serializer.validated_data
+        try:
+            error = ErrorReports.insert_or_update_error(
+                FRONTEND,
+                data["error_message"],
+                data["traceback"],
+                context=data["context"],
+            )
+            return Response(
+                {"error_id": error.id if error else None}, status=status.HTTP_200_OK
+            )
+
+        except (AttributeError, ValidationError) as e:
+            logger.error("Error while saving error report: {}".format(e))
+            return Response(
+                {"error": "An error occurred while saving errors."},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+    else:
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

kolibri/core/errorreports/api_urls.py

@@ -0,0 +1,5 @@
+from django.urls import re_path
+
+from .api import report
+
+urlpatterns = [re_path(r"^report", report, name="report")]

kolibri/core/errorreports/apps.py

@@ -0,0 +1,7 @@
+from django.apps import AppConfig
+
+
+class KolibriErrorConfig(AppConfig):
+    name = "kolibri.core.errorreports"
+    label = "errorreports"
+    verbose_name = "Kolibri ErrorReports"

kolibri/core/errorreports/constants.py

@@ -0,0 +1,7 @@
+FRONTEND = "frontend"
+BACKEND = "backend"
+
+POSSIBLE_ERRORS = [
+    (FRONTEND, "Frontend"),
+    (BACKEND, "Backend"),
+]