fleet/changes/48129-404-page at 6ce0f70ebcf2bbf00799cc9aa3fc781297540140 - fleet - Gitea: Git with a cup of tea

Discharge7443/fleet

Files

T

NicoandCopilot Autofix powered by AI 34d1c09c3f Update 404 and 500 error pages (#48826 )

<!-- Add the related story/sub-task/bug number, like Resolves #123, or
remove if NA -->
**Related issue:** Resolves #48129, resolves #44352

The 500 error page rendered a broken background image and stray "500
background" alt text and used outdated styling, and the 404 page
predated the current design system. All error pages also dropped the
app's top navigation, so hitting an error felt like leaving Fleet. This
updates the 403/404/500 pages to the new designs and reuses the app's
nav via a shared `ErrorPageLayout`.

Notes:
- For the 404 page, followed this Figma:
https://www.figma.com/design/zSvjztoDsTZDaJ5PAFeOqD/-47395---404-page?node-id=7319-46&t=Q6vFAIETTW1ZpYY0-0
- For the 500/403 error pages, followed
https://www.figma.com/design/gxvU745LfOdkE9AuRg64wi/%F0%9F%A7%A9-Product-design-system?node-id=4786-48606&t=LlD9fl7FxUKPIZfr-0
- I compressed `404.png` locally using `pngquant`. (Original asset from
figma is almost 2MB.)

<img width="1916" height="546" alt="Screenshot 2026-07-07 at 9 38 07 AM"
src="https://github.com/user-attachments/assets/ab44d45a-87e6-4fac-a025-8435715701bb"
/>


# Checklist for submitter

- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
See [Changes
files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/guides/committing-changes.md#changes-files)
for more information.

## Testing

- [x] Added/updated automated tests

- [x] QA'd all new/changed functionality manually

#### Authenticated

<img width="1290" height="1397" alt="Screenshot 2026-07-06 at 8 41
19 PM"
src="https://github.com/user-attachments/assets/3d08c7b8-dd23-4fb4-976a-d8116700d608"
/>
<img width="1285" height="1396" alt="Screenshot 2026-07-06 at 8 41
29 PM"
src="https://github.com/user-attachments/assets/fd7529d4-6aeb-49e4-a1eb-13ea5363fb21"
/>
<img width="1295" height="1397" alt="Screenshot 2026-07-06 at 8 41
39 PM"
src="https://github.com/user-attachments/assets/e6427078-fbd6-4113-a0e3-dda5c693bdb8"
/>
<img width="1294" height="1397" alt="Screenshot 2026-07-06 at 8 41
57 PM"
src="https://github.com/user-attachments/assets/0c78de7e-8652-4372-95fd-10c62925f003"
/>

#### Unauthenticated
<img width="1296" height="1399" alt="Screenshot 2026-07-06 at 8 42
20 PM"
src="https://github.com/user-attachments/assets/78d320d1-92f0-4313-ace3-e0221e4055dc"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Error pages now render in a shared error-page layout with consistent
top navigation behavior.
  * Refreshed 403/404/500 pages with streamlined, more focused actions.
* **Bug Fixes**
  * Removed broken image elements from the 500 error page.
* **Tests**
* Added Jest/RTL tests to verify the layout’s navigation switches based
on authentication state.
* **Style**
* Updated error-page spacing, typography, and visuals to better match
the design system.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

2026-07-07 10:54:26 -03:00

2 lines

93 B

Plaintext

Raw Blame History

* Updated the 404 page with a new illustration and copy consistent with the rest of the app.