Repository navigation
Conversation
Because: - An unknown path under /settings showed the empty Settings layout, not a 404 page. This commit: - Adds a catch-all Settings route that replaces the page with /404, which content-server renders as its 404 page. - Adds a unit test and a functional test for an unknown /settings route. Closes FXA-13040
vbudhram
approved these changes
Oct 21, 2026
| // Content-server serves this app for every /settings/* path, so leave it for the 404 page. | ||
| const NotFoundRedirect = () => { | ||
| useEffect(() => { | ||
| hardNavigate('/404', {}, false, true); |
Contributor
There was a problem hiding this comment.
Does not hurt for now, we will remove hardNavigate everywhere once Backbone decomission is done
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
Prevent duplicate redirects under React StrictMode.
1 open issue
What changed in this PR
Adds a catch-all Settings route that redirects unknown paths to the content-server 404 page.
Changes:
- Added
NotFoundRedirectand wildcard routing. - Added unit and functional tests.
- A moderate issue remains: guard the redirect effect against duplicate StrictMode navigation.
| File | Description |
|---|---|
packages/fxa-settings/src/components/Settings/index.tsx |
Adds the catch-all 404 redirect. |
packages/fxa-settings/src/components/Settings/index.test.tsx |
Tests unknown-route handling. |
packages/functional-tests/tests/settings/misc.spec.ts |
Verifies the rendered 404 page. |
Review effort: Lite
Comment on lines
+61
to
+66
| const NotFoundRedirect = () => { | ||
| useEffect(() => { | ||
| hardNavigate('/404', {}, false, true); | ||
| }, []); | ||
| return <LoadingSpinner fullScreen />; | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Because
/settings/no-such-routeshowed only the empty settings layout, with no 404 page.<Routes>had no catch-all route.This pull request
path="*"route inSettings/index.tsxthat rendersNotFoundRedirect.NotFoundRedirectcallshardNavigate('/404', {}, false, true). The call replaces the history entry, so the back button does not loop.Settings/index.test.tsxand a functional test insettings/misc.spec.ts./settings/passkeys/addnow shows the 404 page instead of an empty layout.Issue that this pull request solves
Closes: FXA-13040
Checklist
Put an
xin the boxes that applyHow to review (Optional)
packages/fxa-settings/src/components/Settings/index.tsxScreenshots (Optional)
Please attach the screenshots of the changes made in case of change in user interface.
Other information (Optional)
fxa-settings has no not-found component. Content-server serves the settings app for every
/settings/*path. So the app leaves for/404, which content-server does not serve. Content-server then renders its existing 404 page. The result matches unknown paths outside/settings.One reviewer decision: is a full-page redirect to
/404acceptable, or do you want a not-found component inside fxa-settings?Local checks:
leaves the app for the 404 page on an unknown route: PASS. With/fxa-verify --revert, it FAILs without the fix.unknown settings route shows the 404 pageon the local stack: PASS.curlonlocalhost:3030/404: HTTP 404 with thefxa-404-headerpage.tscfor fxa-settings: PASS. ESLint and Prettier onmisc.spec.ts: PASS.CI runs the full suites.
settings-misc-severity-2-s-9d9fc-gs-route-shows-the-404-page-local.webm