Skip to content

DOP-6282: Introduces the new 404 page w/ original req URL in the body #1575

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.

Sign up for GitHub

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

Merged
merged 7 commits into from
Oct 23, 2025
Merged

DOP-6282: Introduces the new 404 page w/ original req URL in the body #1575

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a2bb18e
DOP-6282 makes changes based on the latest design change and includes…
caesarbell Oct 20, 2025
82c596c
DOP-6282 a custom hook for grabbing the targeted cookie that is set f…
caesarbell Oct 20, 2025
2a65884
DOP-6282 changes cookie name to be more descriptive
caesarbell Oct 20, 2025
a878ed6
DOP-6282 handles decoding the url and uses body to auto include dark …
caesarbell Oct 22, 2025
93240a0
DOP-6282 increase line-height to 64px
caesarbell Oct 22, 2025
8c5df6a
DOP-6282 adds custom style to account for the whitepsace of the 404.p…
caesarbell Oct 22, 2025
f98d661
Merge branch 'main' into DOP-6282
caesarbell Oct 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions src/hooks/use-original-req-url.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { useEffect, useState } from 'react';
import { isBrowser } from '../utils/is-browser';

const parseCookies = () => window.document.cookie.split(';');

const getTargetedCookie = (cookies: string[]) => cookies.find((cookie) => cookie.trim().startsWith('originalRequest='));

export const useOriginalReqURL = () => {
const [originReqURL, setOriginalReqURL] = useState<string | null>(null);

useEffect(() => {
if (isBrowser) {
const cookies = parseCookies();
// the target is set in B2K
const targetCookie = getTargetedCookie(cookies);
const cookie = targetCookie?.split('=')[1];
if (cookie) {
setOriginalReqURL(cookie);
}
}
}, []);

return { originReqURL };
};
40 changes: 26 additions & 14 deletions src/templates/NotFound.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@ import Button from '@leafygreen-ui/button';
import { palette } from '@leafygreen-ui/palette';
import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
import { Body } from '@leafygreen-ui/typography';
import { useOriginalReqURL } from '../hooks/use-original-req-url';
import { theme } from '../theme/docsTheme';
import { baseUrl } from '../utils/base-url';
import Link from '../components/Link';
import { BaseTemplateProps } from '.';

const ErrorBox = styled.div`
max-width: 455px;
flex: 1 0.5 auto;
word-break: break-word;

@media ${theme.screenSize.upToSmall} {
padding: 0px ${theme.size.default};
Expand All @@ -35,7 +36,8 @@ const getSupportLinkDynamicStyle = (darkMode: boolean) => css`
`;

const ImageContainer = styled.div`
max-width: 455px;
margin-left: -27px; /* to account for the whitespace of the image */
max-width: 226px;
display: flex;
justify-content: flex-start;
flex: 0.5 1 auto;
Expand All @@ -58,10 +60,10 @@ const NotFoundImage = () => {

const errorTitleStyling = css`
font-family: 'MongoDB Value Serif';
font-size: 32px;
line-height: 40px;
margin-block-start: 1em;
margin-block-end: 1em;
line-height: 64px;
font-size: 48px;
margin-block-start: 0em; /* to account for the whitespace of the image */
margin-block-end: 22px;

@media ${theme.screenSize.upToSmall} {
font-size: ${theme.fontSize.h2};
Expand All @@ -79,10 +81,22 @@ const LinkContainer = styled.div`

const ErrorBoxContainer = () => {
const { darkMode } = useDarkMode();
const { originReqURL } = useOriginalReqURL();
const decodedURL = originReqURL ? decodeURIComponent(originReqURL) : null;

return (
<ErrorBox>
<Body className={cx(errorTitleStyling)}>Sorry, we can't find that page.</Body>
<Body>The page might have been moved or deleted.</Body>
<Body as="h1" className={cx(errorTitleStyling)}>
Sorry, we can't find that page.
</Body>
{decodedURL ? (
<Body>
The page with the URL &quot;<Link to={decodedURL}>{decodedURL}</Link>&quot; does not exist. It might have been
moved or deleted.
</Body>
) : (
<Body>The page might have been moved or deleted.</Body>
)}
<LinkContainer>
<Button
href={baseUrl()}
Expand All @@ -108,10 +122,9 @@ const ErrorBoxContainer = () => {
};

export const NotFoundContainer = styled.div`
align-items: center;
align-items: flex-start;
display: flex;
flex-flow: no-wrap;
justify-content: space-between;
flex-direction: column;
margin-bottom: ${theme.size.xxlarge};

@media ${theme.screenSize.upToSmall} {
Expand All @@ -120,7 +133,6 @@ export const NotFoundContainer = styled.div`

@media ${theme.screenSize.upToMedium} {
grid-column: 2/-2;
flex-flow: column-reverse;
}

@media ${theme.screenSize.upToLarge} {
Expand All @@ -131,7 +143,7 @@ export const NotFoundContainer = styled.div`
grid-column: 4/-4;
}
@media ${theme.screenSize.xLargeAndUp} {
grid-column: 6/-5;
grid-column: 6/-3;
justify-content: start;
}
`;
Expand Down Expand Up @@ -163,8 +175,8 @@ const NotFound = (props: BaseTemplateProps) => {
return (
<Wrapper>
<NotFoundContainer>
<ErrorBoxContainer />
<NotFoundImage />
<ErrorBoxContainer />
</NotFoundContainer>
</Wrapper>
);
Expand Down