Merge pull request #1040 from jhuopensource/feature/error-handling

Error fallback and report

analytics/admin.py

@@ -11,5 +11,13 @@
 # GNU General Public License for more details.
 
 from django.contrib import admin
+from .models import UIErrorLog
 
 # Register your models here.
+
+
+@admin.register(UIErrorLog)
+class UIErrorLogAdmin(admin.ModelAdmin):
+    """Enables admins to create, view, and edit news updates at /admin"""
+
+    list_display = ("name", "message", "user", "time_occurred")

analytics/migrations/0022_uierrorlog_squashed_0024_alter_uierrorlog_options.py

@@ -0,0 +1,55 @@
+# Generated by Django 3.2.20 on 2023-10-07 01:34
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    replaces = [
+        ("analytics", "0022_uierrorlog"),
+        ("analytics", "0023_alter_uierrorlog_user"),
+        ("analytics", "0024_alter_uierrorlog_options"),
+    ]
+
+    dependencies = [
+        ("analytics", "0021_auto_20230203_1230"),
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ("student", "0046_delete_registrationtoken"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="UIErrorLog",
+            fields=[
+                (
+                    "id",
+                    models.AutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                ("time_occurred", models.DateTimeField(auto_now_add=True)),
+                ("message", models.CharField(max_length=1000)),
+                ("name", models.CharField(max_length=100)),
+                ("stack", models.TextField()),
+                ("componentStack", models.TextField()),
+                (
+                    "user",
+                    models.ForeignKey(
+                        blank=True,
+                        null=True,
+                        on_delete=django.db.models.deletion.CASCADE,
+                        to=settings.AUTH_USER_MODEL,
+                    ),
+                ),
+            ],
+            options={
+                "ordering": ["-time_occurred"],
+                "abstract": False,
+            },
+        ),
+    ]

analytics/models.py

@@ -12,6 +12,7 @@
 
 from timetable.models import *
 from student.models import Student
+from django.contrib.auth.models import User
 
 
 class SharedTimetable(Timetable):
@@ -112,3 +113,32 @@ class CalendarExport(models.Model):
     time_created = models.DateTimeField(auto_now_add=True)
     school = models.CharField(max_length=50)
     is_google_calendar = models.BooleanField(blank=True, default=False)
+
+
+class ErrorLog(models.Model):
+    """
+    Logs errors that occur on the site.
+    """
+
+    time_occurred = models.DateTimeField(auto_now_add=True)
+    message = models.CharField(max_length=1000)
+    name = models.CharField(max_length=100)
+    stack = models.TextField()
+    user = models.ForeignKey(
+        User, blank=True, null=True, on_delete=models.deletion.CASCADE
+    )
+
+    class Meta:
+        abstract = True
+        ordering = ["-time_occurred"]
+
+    def __str__(self) -> str:
+        return f"{self.name}: {self.message}"
+
+
+class UIErrorLog(ErrorLog):
+    """
+    UI errors that occur in the React components
+    """
+
+    componentStack = models.TextField()

analytics/serializers.py

@@ -0,0 +1,21 @@
+from rest_framework import serializers
+from .models import UIErrorLog
+
+
+class CurrentUserDefault(object):
+    def set_context(self, serializer_field):
+        self.user = serializer_field.context["request"].user
+
+    def __call__(self):
+        return self.user if self.user.is_authenticated else None
+
+    def __repr__(self):
+        return "%s()" % self.__class__.__name__
+
+
+class UIErrorLogSerializer(serializers.ModelSerializer):
+    user = serializers.HiddenField(default=CurrentUserDefault())
+
+    class Meta:
+        model = UIErrorLog
+        fields = "__all__"

analytics/tests.py

@@ -10,7 +10,10 @@
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 
+from django.contrib.auth.models import User
+from rest_framework.test import APITestCase
 from helpers.test.test_cases import UrlTestCase
+from .models import UIErrorLog
 
 
 class UrlsTest(UrlTestCase):
@@ -24,3 +27,43 @@ def test_urls_call_correct_views(self):
             "/robots.txt", "analytics.views.view_analytics_dashboard"
         )
         self.assertUrlResolvesToView("/user/log_ical/", "student.views.log_ical_export")
+        self.assertUrlResolvesToView(
+            "/ui-error-logs/", "analytics.views.UIErrorLogCreateView"
+        )
+
+
+class UIErrorLogCreateViewTest(APITestCase):
+    def setUp(self):
+        self.request_data = {
+            "name": "test name",
+            "message": "test message",
+            "stack": "test stack",
+            "componentStack": "test componentStack",
+        }
+        self.user = User.objects.create_user(
+            username="user", email="[email protected]", password="password"
+        )
+
+    def test_add_new_log(self):
+        response = self.client.post("/ui-error-logs/", self.request_data, format="json")
+        self.assertEqual(response.status_code, 201)
+
+        self.assertEqual(1, len(UIErrorLog.objects.all()))
+        created = UIErrorLog.objects.all()[0]
+        self.assert_attributes(created, None)
+
+    def test_add_new_log_logged_in(self):
+        self.client.force_login(self.user)
+        response = self.client.post("/ui-error-logs/", self.request_data, format="json")
+        self.assertEqual(response.status_code, 201)
+
+        self.assertEqual(1, len(UIErrorLog.objects.all()))
+        created = UIErrorLog.objects.all()[0]
+        self.assert_attributes(created, self.user)
+
+    def assert_attributes(self, created, user):
+        self.assertEqual(created.name, self.request_data["name"])
+        self.assertEqual(created.message, self.request_data["message"])
+        self.assertEqual(created.stack, self.request_data["stack"])
+        self.assertEqual(created.componentStack, self.request_data["componentStack"])
+        self.assertEqual(created.user, user)

analytics/urls.py

@@ -20,4 +20,5 @@
     re_path(r"^analytics/*$", analytics.views.view_analytics_dashboard),
     re_path(r"^robots.txt*$", analytics.views.view_analytics_dashboard),
     re_path(r"^user/log_ical/*$", student.views.log_ical_export),
+    re_path(r"^ui-error-logs/*$", analytics.views.UIErrorLogCreateView.as_view()),
 ]

analytics/views.py

@@ -23,12 +23,14 @@
 from django.views.decorators.csrf import csrf_exempt
 from django.http import Http404
 from django.db.models import Count
-
+from rest_framework import generics
+from rest_framework.response import Response
 from student.models import Student
 
 from student.utils import get_student
 from student.models import *
 from analytics.models import *
+from analytics.serializers import UIErrorLogSerializer
 from timetable.models import Semester
 from parsing.schools.active import ACTIVE_SCHOOLS
 
@@ -240,3 +242,8 @@ def number_students_by_school():
         )
         result[school] = students.count()
     return result
+
+
+class UIErrorLogCreateView(generics.CreateAPIView):
+    serializer_class = UIErrorLogSerializer
+    queryset = UIErrorLog.objects.all()

package.json

@@ -73,6 +73,7 @@
     "react-dnd": "^14.0.4",
     "react-dnd-html5-backend": "^14.0.2",
     "react-dom": "^16.14.0",
+    "react-error-boundary": "^3.1.4",
     "react-hot-loader": "^1.3.1",
     "react-infinite-scroll-component": "^6.1.0",
     "react-input-autosize": "^1.2.0",

static/css/timetable/main.scss

@@ -45,3 +45,4 @@
 @import "partials/news_modal.scss";
 @import "partials/user_acquisition_modal";
 @import "partials/user_settings_modal";
+@import "partials/fallback";

static/css/timetable/partials/fallback.scss

@@ -0,0 +1,25 @@
+.fallback-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+
+  h2,
+  p {
+    color: #000;
+  }
+
+  img {
+    width: 100%;
+    max-width: 350px;
+  }
+}
+
+@media (max-width: 768px) {
+  .fallback-container {
+    img {
+      max-width: 200px;
+    }
+  }
+}

static/js/redux/constants/endpoints.jsx

@@ -55,3 +55,4 @@ export function getCourseShareLink(code, semester) {
 }
 
 export const getNewsEndpoint = () => "/notifications/news";
+export const getUIErrorLogEndpoint = () => "/ui-error-logs/";

static/js/redux/init.jsx

@@ -19,7 +19,7 @@ import { render } from "react-dom";
 import { Provider } from "react-redux";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { DndProvider } from "react-dnd";
-import Semesterly from "./ui/Semesterly";
+import SemesterlyWithErrorBoundary from "./ui/Semesterly";
 import {
   fetchMostClassmatesCount,
   handleAgreement,
@@ -126,7 +126,7 @@ store.dispatch(setup());
 render(
   <Provider store={store}>
     <DndProvider backend={HTML5Backend}>
-      <Semesterly />
+      <SemesterlyWithErrorBoundary />
     </DndProvider>
   </Provider>,
   document.getElementsByClassName("page")[0]