Setup root error boundary to gracefully handle all unhandled errors

README.md

@@ -62,15 +62,26 @@ yarn lint
 yarn test
 ```
 
+### Clean
+
+Removes the `.next` and `node_modules` folders and runs `yarn install` to clean up the local workspace
+
+```bash
+yarn clean
+```
+
 ### Take Screenshots
+
 If you are making changes that impact the UI, ensure to test the change on different view ports. Run the following to auto capture screenshots when tests run. Note that this only runs when you run this command locally.
 
 #### Take screenshots of home page
+
 ```bash
 yarn capture-screenshots
 ```
 
 #### Take screenshots of a specific page
+
 ```bash
 PAGE_PATH=/commodities yarn capture-screenshots
 ```
@@ -116,4 +127,5 @@ yarn dev
 - Docker
 
 ### 🌐 Useful Tools
-- [ColorKit](https://colorkit.co/color-palette-generator/272f33-4e5d66-9BB9CB-cddce5-e6eef2/) - Color Palette Generator
+
+- [ColorKit](https://colorkit.co/color-palette-generator/272f33-4e5d66-9BB9CB-cddce5-e6eef2/) - Color Palette Generator

app/error.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { Button, Center, Flex, Heading, Text } from '@chakra-ui/react';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  return (
+    <Center width="100%">
+      <Flex
+        flexDirection="column"
+        alignItems="center"
+        gap="24px"
+        maxWidth="1500px"
+      >
+        <Heading
+          as="h1"
+          size={{ base: 'md', md: 'lg', lg: 'lg' }}
+          marginX={{ base: 'auto', md: '0', lg: '0' }}
+        >
+          Something went wrong!
+        </Heading>
+        <Text as="samp">{error.message}</Text>
+        <Button type="button" variant="outline" onClick={() => reset()}>
+          Try again
+        </Button>
+      </Flex>
+    </Center>
+  );
+}

app/not-found.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import NextLink from 'next/link';
-import { Link, Center, Flex, Heading } from '@chakra-ui/react';
-import GetColor from '@/app/_hooks/colorSelector';
+import { Button, Center, Flex, Heading } from '@chakra-ui/react';
 
 export default function NotFound() {
   return (
@@ -21,9 +20,9 @@ export default function NotFound() {
           404 - Page Not Found
         </Heading>
         <NextLink href="/" passHref>
-          <Link color={GetColor('textSelected')} href="#">
+          <Button type="button" variant="outline">
             Go back Home
-          </Link>
+          </Button>
         </NextLink>
       </Flex>
     </Center>

app/playground/client-error/page.client.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+const PageClient = () => {
+  throw new Error('This is a simulated client rendering error.');
+};
+
+export default PageClient;

app/playground/client-error/page.tsx

@@ -0,0 +1,8 @@
+import PageClient from './page.client';
+
+// Avoid statically building this page during build.
+export const dynamic = 'force-dynamic';
+
+export default async function Page() {
+  return <PageClient />;
+}

app/playground/page.tsx

@@ -6,7 +6,7 @@ import {
 } from './_api';
 import { ICommodity, IPost } from '../_types';
 
-// Force dynamic fetching during runtime for playground
+// Avoid statically building this page during build.
 export const dynamic = 'force-dynamic';
 
 export const metadata: Metadata = {
@@ -23,12 +23,14 @@ export default async function Page() {
     posts = await getPostsForCategoryFromMockApi();
   } catch (error) {
     console.error('Failed to fetch posts data:', error);
+    throw error;
   }
 
   try {
     commodity = await getCommodityByNameFromStagingApi('Wine');
   } catch (error) {
     console.error('Failed to fetch commodity data:', error);
+    throw error;
   }
 
   return <PageClient posts={posts} commodity={commodity} />;

app/playground/server-error/page.tsx

@@ -0,0 +1,6 @@
+// Avoid statically building this page during build.
+export const dynamic = 'force-dynamic';
+
+export default async function Page() {
+  throw new Error('This is a simulated server rendering error.');
+}

tests/playwright/playground/error-boundary.test.tsx

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test';
+
+test('server rendering errors should get caught and gracefully render error', async ({
+  page,
+}) => {
+  await page.goto('/playground/server-error');
+  await expect(page.locator('h1')).toContainText('Something went wrong!');
+  // Error messages for server rendering get replaced for security during builds
+  await expect(page.locator('samp')).toContainText(
+    'An error occurred in the Server Components render.',
+  );
+});
+
+test('client rendering errors should get caught and gracefully render error', async ({
+  page,
+}) => {
+  await page.goto('/playground/client-error');
+  await expect(page.locator('h1')).toContainText('Something went wrong!');
+  await expect(page.locator('samp')).toContainText(
+    'This is a simulated client rendering error',
+  );
+});