openedx / frontend-app-learning

Front-end for the Open edX course experience, implemented using React and Paragon.
GNU Affero General Public License v3.0
46 stars 207 forks source link

feat: add page not found route #1514

Closed KristinAoki closed 1 week ago

KristinAoki commented 2 weeks ago

Description

This PR replace the blank screen for invalid URLs with a header, footer, and page not found message. The page not found page also sends a logging error and tracking event so that redirects to invalid urls can be monitored and tracked.

Before

Screenshot 2024-11-07 at 4 29 08 PM

After

Screenshot 2024-11-07 at 4 19 52 PM

Supporting Information

JIRA Ticket: AU-1049 🔒

Due to MFEs' current client-side routing implementation, users just saw a blank page with a footer (ie, a “client-side 404”) instead of a true 404 page. The routing failures yielded a 200 OK page and are not reported to the server in any way, so no alerts are triggered. For contrast, 404s in Legacy LMS pages are logged and also share a more coherent story with users.

image

Testing

  1. Navigate to a course
  2. Change the URL to an invalid path
  3. Confirm that the PageNotFound component is displayed
  4. Click the homepage URL
  5. Confirm that it navigates back to the learner dashboard
codecov[bot] commented 2 weeks ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 89.25%. Comparing base (6534347) to head (bd95d78). Report is 4 commits behind head on master.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## master #1514 +/- ## ========================================== + Coverage 89.23% 89.25% +0.01% ========================================== Files 317 318 +1 Lines 5557 5563 +6 Branches 1375 1341 -34 ========================================== + Hits 4959 4965 +6 - Misses 582 583 +1 + Partials 16 15 -1 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.