feat: add error boundary

.env.example

@@ -1,3 +1,5 @@
 VITE_API_BASE_URL=/mock
 VITE_YEAR=2024
 VITE_UMAMI_WEBSITE_ID=
+VITE_FEEDBACK_FORM_URL=
+VITE_FEEDBACK_FORM_URL_PREFILL_ERROR_MESSAGE=

package.json

@@ -27,6 +27,7 @@
 		"mutative": "^1.0.8",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
+		"react-error-boundary": "^4.0.13",
 		"react-i18next": "^15.0.2",
 		"simple-zustand-devtools": "^1.1.0",
 		"sonner": "^1.5.0",

src/components/Error.tsx

@@ -0,0 +1,35 @@
+import { Code, Link } from '@nextui-org/react';
+import type { FallbackProps } from 'react-error-boundary';
+
+import { useMount } from '../utils/mount';
+
+export const Error = ({ error }: FallbackProps) => {
+	const errorMessage = String(error);
+	const prefilledFeedbackForm = `${import.meta.env.VITE_FEEDBACK_FORM_URL_PREFILL_ERROR_MESSAGE}+${errorMessage}%0ACause:+`;
+
+	useMount(() => {
+		// Clear local data to reset the app
+		localStorage.clear();
+	});
+
+	return (
+		<div className="mx-2 flex h-dvh flex-col items-center justify-center gap-2">
+			<h1 className="text-4xl">Oops.. Something went wrong!</h1>
+			<p>
+				We're sorry, but we need to clear all saved data for this website
+				(including any locally stored courses and times).
+			</p>
+			<Code size="lg" className="max-w-full overflow-x-auto p-2">
+				<span className="font-bold">Error Message:</span> <br />
+				{errorMessage}
+			</Code>
+			<p>
+				Before refreshing the page, would you like to{' '}
+				<Link isExternal href={prefilledFeedbackForm}>
+					send us feedback
+				</Link>{' '}
+				along with the error message to help improve our app?
+			</p>
+		</div>
+	);
+};

src/components/Header.tsx

@@ -54,7 +54,7 @@ export const Header = () => {
 						<Button
 							{...HEADER_BUTTON_PROPS}
 							as={Link}
-							href="https://forms.gle/4HFumRNK8jtEhxJz6"
+							href={import.meta.env.VITE_FEEDBACK_FORM_URL}
 						>
 							🗣
 						</Button>

src/main.tsx

@@ -4,10 +4,12 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { ErrorBoundary } from 'react-error-boundary';
 import { mountStoreDevtool } from 'simple-zustand-devtools';
 import { Toaster } from 'sonner';
 
 import { App } from './App';
+import { Error } from './components/Error';
 import { useEnrolledCourses } from './data/enrolled-courses';
 import './i18n';
 import './index.css';
@@ -35,12 +37,17 @@ if (import.meta.env.DEV) {
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
 	<React.StrictMode>
-		<QueryClientProvider client={queryClient}>
-			<ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
-			<NextUIProvider>
-				<Toaster richColors position="top-center" />
-				<App />
-			</NextUIProvider>
-		</QueryClientProvider>
+		<ErrorBoundary FallbackComponent={Error}>
+			<QueryClientProvider client={queryClient}>
+				<ReactQueryDevtools
+					initialIsOpen={false}
+					buttonPosition="bottom-left"
+				/>
+				<NextUIProvider>
+					<Toaster richColors position="top-center" />
+					<App />
+				</NextUIProvider>
+			</QueryClientProvider>
+		</ErrorBoundary>
 	</React.StrictMode>,
 );

src/vite-env.d.ts

@@ -3,6 +3,8 @@
 interface ImportMetaEnv {
 	readonly VITE_API_BASE_URL: string;
 	readonly VITE_YEAR: string;
+	readonly VITE_FEEDBACK_FORM_URL: string;
+	readonly VITE_FEEDBACK_FORM_URL_PREFILL_ERROR_MESSAGE: string;
 }
 
 interface ImportMeta {