Skip to content

Commit 172513d

Browse files
ToxiapoToxiapo
authored
add global error pages (#754)
1 parent c8a00a4 commit 172513d

5 files changed

Lines changed: 131 additions & 53 deletions

File tree

‎pages/404.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { GetStaticProps } from "next";
2+
import { Text } from "@nypl/design-system-react-components";
3+
import {
4+
BackToHomeLink,
5+
ContactUsLink,
6+
ErrorComponent,
7+
} from "../src/components/Error";
8+
9+
export default function NotFoundPage() {
10+
return (
11+
<ErrorComponent
12+
heading="We couldn't find that page"
13+
description={
14+
<Text maxWidth="730px" margin="auto">
15+
The page you were looking for doesn't exist or may have moved
16+
elsewhere. Try starting a <BackToHomeLink /> or <ContactUsLink /> if
17+
the error persists.
18+
</Text>
19+
}
20+
/>
21+
);
22+
}
23+
24+
export const getStaticProps: GetStaticProps = async () => {
25+
return { props: {} };
26+
};

‎pages/500.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Text } from "@nypl/design-system-react-components";
2+
import {
3+
BackToHomeLink,
4+
ContactUsLink,
5+
ErrorComponent,
6+
} from "../src/components/Error";
7+
8+
export default function ServerErrorPage() {
9+
return (
10+
<ErrorComponent
11+
heading="Something went wrong on our end"
12+
description={
13+
<Text maxWidth="700px" margin="auto">
14+
We are working to resolve a server issue. Your application progress
15+
may not have been saved. Try starting a <BackToHomeLink /> in a few
16+
minutes or <ContactUsLink /> if the error persists.
17+
</Text>
18+
}
19+
/>
20+
);
21+
}

‎pages/_app.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ function MyApp({ Component, pageProps }: MyAppProps) {
6161
};
6262
const initState = { ...formInitialStateCopy };
6363
const pageTitles = getPageTitles();
64+
const isErrorPage = ["/404", "/500"].includes(router.pathname);
6465

6566
return (
6667
<>
@@ -138,13 +139,17 @@ function MyApp({ Component, pageProps }: MyAppProps) {
138139
<FormProvider {...formMethods}>
139140
<FormDataContextProvider initState={initState}>
140141
<ErrorBoundary reset={router.asPath}>
141-
<ApplicationContainer>
142-
<Component
143-
{...pageProps}
144-
pageTitles={pageTitles}
145-
policyType={router.query.policyType}
146-
/>
147-
</ApplicationContainer>
142+
{isErrorPage ? (
143+
<Component {...pageProps} />
144+
) : (
145+
<ApplicationContainer>
146+
<Component
147+
{...pageProps}
148+
pageTitles={pageTitles}
149+
policyType={router.query.policyType}
150+
/>
151+
</ApplicationContainer>
152+
)}
148153
</ErrorBoundary>
149154
</FormDataContextProvider>
150155
</FormProvider>

‎src/components/Error/index.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from "react";
2+
import {
3+
Box,
4+
Heading,
5+
Template,
6+
TemplateBreakout,
7+
TemplateContent,
8+
TemplateHeader,
9+
TemplateMain,
10+
Link as DSLink,
11+
} from "@nypl/design-system-react-components";
12+
import Link from "next/link";
13+
import Breadcrumbs from "../Breadcrumb";
14+
import { useRouter } from "next/router";
15+
import { BrokenBook as BrokenBookIcon } from "../Icons/BrokenBook";
16+
17+
export const ContactUsLink = () => {
18+
return (
19+
<DSLink href="https://www.nypl.org/get-help/contact-us">contact us</DSLink>
20+
);
21+
};
22+
23+
export const BackToHomeLink = ({
24+
text = "new application",
25+
}: {
26+
text?: string;
27+
}) => {
28+
const router = useRouter();
29+
const lang = router.isReady ? router.query.lang : undefined;
30+
const href = lang && lang !== "en" ? `/new?lang=${lang}` : "/new";
31+
return <Link href={href}>{text}</Link>;
32+
};
33+
34+
export const ErrorComponent = ({
35+
heading,
36+
description,
37+
}: {
38+
heading: string;
39+
description: React.ReactNode;
40+
}) => {
41+
return (
42+
<Template variant="narrow" gap="0!">
43+
<TemplateHeader id="mainHeader" m="0!" dir="ltr">
44+
<TemplateBreakout>
45+
<Breadcrumbs />
46+
</TemplateBreakout>
47+
</TemplateHeader>
48+
<TemplateMain id="mainContent">
49+
<TemplateContent my="xxl" textAlign="center">
50+
<Box mb="xl">
51+
<BrokenBookIcon />
52+
</Box>
53+
<Box textAlign="center">
54+
<Heading level="h2" size="heading3" mb="m">
55+
{heading}
56+
</Heading>
57+
{description}
58+
</Box>
59+
</TemplateContent>
60+
</TemplateMain>
61+
</Template>
62+
);
63+
};

‎src/components/ErrorBoundary/index.tsx‎

Lines changed: 9 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,7 @@
1-
import {
2-
Heading,
3-
Text,
4-
Box,
5-
Template,
6-
TemplateMain,
7-
TemplateContent,
8-
TemplateHeader,
9-
TemplateBreakout,
10-
Link as DSLink,
11-
} from "@nypl/design-system-react-components";
12-
import Link from "next/link";
1+
import { Text } from "@nypl/design-system-react-components";
132
import React from "react";
14-
import Breadcrumbs from "../Breadcrumb";
15-
import { BrokenBook as BrokenBookIcon } from "../Icons/BrokenBook";
163
import { NRError } from "../../logger/newrelic";
4+
import { BackToHomeLink, ContactUsLink, ErrorComponent } from "../Error";
175

186
interface ErrorBoundaryProps {
197
children: React.ReactNode;
@@ -58,46 +46,21 @@ class ErrorBoundary extends React.Component<
5846
render() {
5947
if (this.state.hasError) {
6048
return (
61-
<ErrorComponent>
62-
<Box mb="xl">
63-
<BrokenBookIcon />
64-
</Box>
65-
<Box textAlign="center">
66-
<Heading level="h2" size="heading3" mb="m">
67-
There was an unexpected error
68-
</Heading>
49+
<ErrorComponent
50+
heading="There was an unexpected error"
51+
description={
6952
<Text maxWidth="730px" margin="auto">
7053
We couldn't process your request at this time. Your application
7154
progress may not have been saved. Try starting a{" "}
72-
<Link href="/new">new application</Link> in a few minutes or{" "}
73-
<DSLink href="https://www.nypl.org/get-help/contact-us">
74-
contact us
75-
</DSLink>{" "}
76-
if the error persists.
55+
<BackToHomeLink /> in a few minutes or <ContactUsLink /> if the
56+
error persists.
7757
</Text>
78-
</Box>
79-
</ErrorComponent>
58+
}
59+
/>
8060
);
8161
}
8262
return this.props.children;
8363
}
8464
}
8565

86-
export const ErrorComponent = ({ children }: { children: React.ReactNode }) => {
87-
return (
88-
<Template variant="narrow" gap="0!">
89-
<TemplateHeader id="mainHeader" m="0!" dir="ltr">
90-
<TemplateBreakout>
91-
<Breadcrumbs />
92-
</TemplateBreakout>
93-
</TemplateHeader>
94-
<TemplateMain id="mainContent">
95-
<TemplateContent my="xxl" textAlign="center">
96-
{children}
97-
</TemplateContent>
98-
</TemplateMain>
99-
</Template>
100-
);
101-
};
102-
10366
export default ErrorBoundary;

0 commit comments

Comments
 (0)