Skip to content

Commit df2c3b3

Browse files
aarolaarol
committed
feat: show fallback ui on error
1 parent bb914da commit df2c3b3

4 files changed

Lines changed: 121 additions & 56 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
## Run locally
2626

2727
1. Install firebase-tools
28-
28+
2929
`pnpm add -g firebase-tools`
3030

3131
2. Run the client & functions locally
@@ -34,3 +34,4 @@
3434

3535
### Deploy
3636

37+
`firebase deploy --only hosting,functions`

‎client/src/App.tsx‎

Lines changed: 56 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { Instructions } from "./components/Instructions";
1212
import { Output } from "./components/Output";
1313
import { firstLetterUppercase } from "./util";
1414
import type { AxisRegistry, FontFamily, Metadata } from "../../functions/src/metadata";
15+
import { ErrorBoundary } from "./components/ErrorBoundary";
1516

1617
type AlertMessage = {
1718
title: string,
@@ -110,59 +111,61 @@ function App() {
110111
}} defaultColorScheme="auto">
111112
<AppShell padding={"xl"}>
112113
<Container size="sm">
113-
<FontTitle />
114-
<Text ta="center" pb="md">Self host variable fonts from
115-
<Anchor href="https://fonts.google.com/?vfonly=true" target="_blank"> Google Fonts</Anchor>
116-
</Text>
117-
118-
<Autocomplete
119-
data={fontData?.familyMetadataList.map(f => f.family) ?? []}
120-
label="Select your variable font"
121-
size="md"
122-
placeholder="Roboto Flex"
123-
onChange={onSelectFont}
124-
/>
125-
126-
<Space h="md" />
127-
128-
{alert !== null && (
129-
<Alert title={alert.title} my="md" color="red">
130-
{alert.content}
131-
<Text size="sm" pt="md">
132-
<span>If this issue persists, please file an issue on </span>
133-
<Anchor href="https://github.com/aarol/variable-font-helper/issues/new">Github</Anchor>
134-
</Text>
135-
</Alert>
136-
)}
137-
138-
{font !== undefined ? (
139-
<>
140-
<Text size="xl">{font.family}</Text>
141-
<Text>By {listFormatter.format(font.designers)}</Text>
142-
143-
<Button component="a" target="_blank" href={`https://fonts.google.com/specimen/${firstLetterUppercase(font.family)}/tester`} my="sm" variant="outline" leftSection={<IconExternalLink size={14} />}>
144-
Type tester
145-
</Button>
146-
147-
<Instructions />
148-
149-
<Configure
150-
key={font.family} // to refresh config on font family change
151-
axes={fontAxes}
152-
font={font}
153-
showGenerate={stylesheets.length === 0}
154-
onGenerate={onGenerate}
155-
onChange={resetOutput} />
156-
157-
<Collapse in={stylesheets.length > 0}>
158-
<Output styles={stylesheets}
159-
fontName={font.family.replaceAll(' ', '_')}
160-
/>
161-
</Collapse>
162-
</>
163-
) : <Accordions />
164-
}
165-
<Footer />
114+
<ErrorBoundary>
115+
116+
<FontTitle />
117+
<Text ta="center" pb="md">Self host variable fonts from <Anchor href="https://fonts.google.com/?vfonly=true" target="_blank">Google Fonts</Anchor>
118+
</Text>
119+
120+
<Autocomplete
121+
data={fontData?.familyMetadataList.map(f => f.family) ?? []}
122+
label="Select your variable font"
123+
size="md"
124+
placeholder="Roboto Flex"
125+
onChange={onSelectFont}
126+
/>
127+
128+
<Space h="md" />
129+
130+
{alert !== null && (
131+
<Alert title={alert.title} my="md" color="red">
132+
{alert.content}
133+
<Text size="sm" pt="md">
134+
<span>If this issue persists, please file an issue on </span>
135+
<Anchor href="https://github.com/aarol/variable-font-helper/issues/new">Github</Anchor>
136+
</Text>
137+
</Alert>
138+
)}
139+
140+
{font !== undefined ? (
141+
<>
142+
<Text size="xl">{font.family}</Text>
143+
<Text>By {listFormatter.format(font.designers)}</Text>
144+
145+
<Button component="a" target="_blank" href={`https://fonts.google.com/specimen/${firstLetterUppercase(font.family)}/tester`} my="sm" variant="outline" leftSection={<IconExternalLink size={14} />}>
146+
Type tester
147+
</Button>
148+
149+
<Instructions />
150+
151+
<Configure
152+
key={font.family} // to refresh config on font family change
153+
axes={fontAxes}
154+
font={font}
155+
showGenerate={stylesheets.length === 0}
156+
onGenerate={onGenerate}
157+
onChange={resetOutput} />
158+
159+
<Collapse in={stylesheets.length > 0}>
160+
<Output styles={stylesheets}
161+
fontName={font.family.replaceAll(' ', '_')}
162+
/>
163+
</Collapse>
164+
</>
165+
) : <Accordions />
166+
}
167+
<Footer />
168+
</ErrorBoundary>
166169
</Container>
167170
</AppShell>
168171
</MantineProvider>

‎client/src/components/ErrorBoundary.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React from "react";
2+
import { Container, Title, Text, Button, Stack, Alert } from "@mantine/core";
3+
import { IconAlertTriangle, IconBrandGithub } from "@tabler/icons-react";
4+
5+
export class ErrorBoundary extends React.Component<{ children: React.ReactNode }> {
6+
7+
state = {
8+
error: "",
9+
};
10+
11+
constructor(props: any) {
12+
super(props);
13+
}
14+
15+
static getDerivedStateFromError(error: any) {
16+
console.log("there");
17+
return { error: error.message };
18+
}
19+
20+
render() {
21+
if (this.state.error) {
22+
return (
23+
<Container size="sm" pt="xl">
24+
<Stack gap="md" align="center">
25+
<Alert
26+
icon={<IconAlertTriangle size="1rem" />}
27+
title="Something went wrong"
28+
color="red"
29+
variant="light"
30+
>
31+
<Text size="sm" mb="md">
32+
An unexpected error occurred while rendering this component:
33+
</Text>
34+
<Text size="xs" c="dimmed" ff="monospace">
35+
{this.state.error}
36+
</Text>
37+
</Alert>
38+
39+
<Stack gap="xs" align="center">
40+
<Text size="sm" ta="center" c="dimmed">
41+
If this issue persists, please file a GitHub issue.
42+
</Text>
43+
<Button
44+
component="a"
45+
href="https://github.com/aarol/variable-font-helper/issues"
46+
target="_blank"
47+
rel="noopener noreferrer"
48+
leftSection={<IconBrandGithub size="1rem" />}
49+
variant="light"
50+
>
51+
Report Issue on GitHub
52+
</Button>
53+
</Stack>
54+
</Stack>
55+
</Container>
56+
)
57+
}
58+
59+
return this.props.children;
60+
}
61+
}

‎client/src/components/Footer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const Footer = () => (
77
href="https://github.com/aarol/variable-font-helper"
88
styles={{ root: { justifyContent: 'end', display: 'flex', fontFamily: 'Inter, sans-serif' } }}>
99
<IconBrandGithub size={28} />
10-
Github
10+
Star on Github
1111
</Anchor>
1212
</Container>
13-
)
13+
)

0 commit comments

Comments
 (0)