Uncaught error when invalid link is clicked

NereusWB922 commented 8 months ago

Summary:

Fixes #1171

Issue Summary:

Users encounter an uncaught error when attempting to navigate to invalid links within the application. This issue manifests in two scenarios:

Users clicking on Markdown links may face errors when the link contains an incomplete URL. Incomplete URLs append to the base URL, resulting in invalid links and triggering uncaught errors.
Users enter an incorrect URL directly into the browser will encounter uncaught errors.

Solutions

Markdown Link Click Issue:

Considering that internal links are unlikely to be used for bug reporting and are more likely to be invalid
If the link is internal, display an error snackbar.
e.g. For markdown link [link](images/123), the target link will be https://github.com/CATcher-org/images/123 which is an internal link

Enter invalid link in browser:

Use Angular Router to redirect users to the login page.

Changes Made:

Created a directive to listen click events and identify internal links. It will open an error snackbar for internal links and prevent link navigation.
Applied the directive to markdown tag in html
Added a wildcard route to redirect invalid routes to the login page

Result:

https://github.com/CATcher-org/CATcher/assets/107099783/00718b5a-41c3-4c5d-8ddf-bd8cfee12cb2

https://github.com/CATcher-org/CATcher/assets/107099783/28e48f97-6db2-45c3-bbeb-a33cb9e2da04

Proposed Commit Message:

Fix uncaught errors when attempting to access an invalid route

There is an uncaught error when the users click on an invalid internal link in Markdown or enter an invalid link in browser.

Internal links are unlikely to be used for bug reporting and are more likely to be invalid.

Let's show an error toaster and stop the navigation when clicking on an internal link in Markdown. Also, redirect the users to the login page if the users enter invalid link in browser.

codecov-commenter commented 8 months ago

Codecov Report

Attention: 16 lines in your changes are missing coverage. Please review.

Comparison is base (fe7be44) 53.89% compared to head (86bcfc0) 53.65%.

Files	Patch %	Lines
...core/directives/internal-link-disable.directive.ts	15.78%	10 Missing and 6 partials :warning:

:exclamation: Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## master #1239 +/- ## ========================================== - Coverage 53.89% 53.65% -0.24% ========================================== Files 102 103 +1 Lines 2889 2911 +22 Branches 535 542 +7 ========================================== + Hits 1557 1562 +5 - Misses 989 999 +10 - Partials 343 350 +7 ```

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

cheehongw commented 8 months ago

LGTM! Tested and working

The approach for handling invalid links is very neat

CATcher-org / CATcher