Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uncaught error when invalid link is clicked #1239

Merged

Conversation

NereusWB922
Copy link
Contributor

@NereusWB922 NereusWB922 commented Jan 23, 2024

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:

  1. 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.
  2. 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:

error-toaster-invalid-link.mp4
redirect-to-login-page.mp4

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
Copy link

codecov-commenter commented Jan 23, 2024

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 ⚠️

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

Additional details and impacted files
@@            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     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@cheehongw
Copy link
Contributor

LGTM! Tested and working

The approach for handling invalid links is very neat

@NereusWB922 NereusWB922 merged commit d4b5422 into CATcher-org:master Feb 2, 2024
4 of 5 checks passed
@NereusWB922 NereusWB922 deleted the 1171-invalid-routes-error-toaster branch February 2, 2024 17:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

"Uncaught (in promise): Error: Cannot match any routes" when YouTube link is clicked
3 participants