Skip to content

feat: implement global error pages (404 and 500)#242

Merged
DenizAltunkapan merged 4 commits into
Vault-Web:mainfrom
adiancodes:main
Jun 16, 2026
Merged

feat: implement global error pages (404 and 500)#242
DenizAltunkapan merged 4 commits into
Vault-Web:mainfrom
adiancodes:main

Conversation

@adiancodes

Copy link
Copy Markdown
Contributor

Summary

  • Built standalone NotFoundComponent and ServerErrorComponent matching the app's theme (Dark/Light mode supported)
  • Mapped the wildcard ** route to the 404 page (replaced the silent redirect to /login)
  • Updated token.interceptor.ts to catch 5xx errors and route to /error. Explicitly excluded background endpoints like /auth/refresh and /devices/ to prevent redirect loops
  • Extracted shared CSS for the error components into the global styles.scss to keep the code DRY

Linked issue

Closes #113

How to test

  1. Navigate to any unknown URL (e.g. /blah) → should show the 404 page
  2. Kill the backend DB and trigger any API call → should show the 500 error page
  3. Verify Dark/Light mode works correctly on both error pages
  4. Verify login flow still works normally (no redirect loops on /auth/refresh)

Notes / Risk

Low risk. Changes are isolated to routing and the HTTP interceptor. Background auth/refresh endpoints are explicitly excluded from the 5xx redirect logic to prevent loops.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Implements branded global error pages in the Angular frontend and updates routing/interception so unknown routes show a 404 screen and backend 5xx responses can redirect users to a 500 error screen, aligning behavior with issue #113.

Changes:

  • Added standalone 404 (NotFoundComponent) and 500 (ServerErrorComponent) pages with shared global styling.
  • Updated routing to render the 404 page on the wildcard ** route and added explicit /error and /not-found routes.
  • Updated token.interceptor.ts to navigate to /error on server-side (5xx) failures while excluding selected background endpoints.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
frontend/src/styles.scss Adds shared global styles for the error pages (theme-variable based).
frontend/src/app/pages/server-error/server-error.component.ts Introduces the 500 error page component.
frontend/src/app/pages/server-error/server-error.component.html 500 error page markup (icon, message, “Go Home” link).
frontend/src/app/pages/not-found/not-found.component.ts Introduces the 404 error page component.
frontend/src/app/pages/not-found/not-found.component.html 404 error page markup (icon, message, “Go Home” link).
frontend/src/app/core/interceptors/token.interceptor.ts Redirects to /error on 5xx responses (with endpoint exclusions).
frontend/src/app/app.routes.ts Adds /error, /not-found, and routes ** to the 404 component.
frontend/src/app/app.component.ts Expands navbar-hiding logic to include error routes.
backend/src/main/resources/application.properties Adds a trailing newline (no functional change).
.gitattributes Adds LF normalization and binary patterns for consistent line endings across platforms.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread frontend/src/app/app.component.ts Outdated
Comment thread frontend/src/app/core/interceptors/token.interceptor.ts
- Use route data (hideNavbar) instead of URL string matching for navbar
  visibility, so wildcard (**) 404 routes correctly hide the navbar
- Fix isExcludedFromErrorPage to match '/devices' without trailing slash

@DenizAltunkapan DenizAltunkapan left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@adiancodes Thanks!

@DenizAltunkapan DenizAltunkapan merged commit a5bad31 into Vault-Web:main Jun 16, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Global Error Pages (404 & 500)

3 participants