Better error handling.

app/error.tsx

@@ -2,9 +2,18 @@
 
 export default function Error({ reset }: { reset: () => void }) {
   return (
-    <div>
-      <h2>Something went wrong.</h2>
-      <button onClick={() => reset()}>Try again</button>
+    <div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12">
+      <h2 className="text-xl font-bold">Oh no!</h2>
+      <p className="my-2">
+        There was an issue with our storefront. This could be a temporary issue, please try your
+        action again.
+      </p>
+      <button
+        className="mx-auto mt-4 flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90"
+        onClick={() => reset()}
+      >
+        Try Again
+      </button>
     </div>
   );
 }

app/layout.tsx

@@ -4,10 +4,14 @@ import { ReactNode, Suspense } from 'react';
 import './globals.css';
 
 const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
+const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
+  ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+  : 'http://localhost:3000';
 
 export const metadata = {
+  metadataBase: new URL(baseUrl),
   title: {
-    default: SITE_NAME,
+    default: SITE_NAME!,
     template: `%s | ${SITE_NAME}`
   },
   robots: {

components/cart/actions.ts

@@ -3,7 +3,7 @@
 import { addToCart, createCart, getCart, removeFromCart, updateCart } from 'lib/shopify';
 import { cookies } from 'next/headers';
 
-export const addItem = async (variantId: string | undefined): Promise<Error | undefined> => {
+export const addItem = async (variantId: string | undefined): Promise<String | undefined> => {
   let cartId = cookies().get('cartId')?.value;
   let cart;
 
@@ -18,25 +18,26 @@ export const addItem = async (variantId: string | undefined): Promise<Error | un
   }
 
   if (!variantId) {
-    return new Error('Missing variantId');
+    return 'Missing product variant ID';
   }
+
   try {
     await addToCart(cartId, [{ merchandiseId: variantId, quantity: 1 }]);
   } catch (e) {
-    return new Error('Error adding item', { cause: e });
+    return 'Error adding item to cart';
   }
 };
 
-export const removeItem = async (lineId: string): Promise<Error | undefined> => {
+export const removeItem = async (lineId: string): Promise<String | undefined> => {
   const cartId = cookies().get('cartId')?.value;
 
   if (!cartId) {
-    return new Error('Missing cartId');
+    return 'Missing cart ID';
   }
   try {
     await removeFromCart(cartId, [lineId]);
   } catch (e) {
-    return new Error('Error removing item', { cause: e });
+    return 'Error removing item from cart';
   }
 };
 
@@ -48,11 +49,11 @@ export const updateItemQuantity = async ({
   lineId: string;
   variantId: string;
   quantity: number;
-}): Promise<Error | undefined> => {
+}): Promise<String | undefined> => {
   const cartId = cookies().get('cartId')?.value;
 
   if (!cartId) {
-    return new Error('Missing cartId');
+    return 'Missing cart ID';
   }
   try {
     await updateCart(cartId, [
@@ -63,6 +64,6 @@ export const updateItemQuantity = async ({
       }
     ]);
   } catch (e) {
-    return new Error('Error updating item quantity', { cause: e });
+    return 'Error updating item quantity';
   }
 };

components/cart/add-to-cart.tsx

@@ -44,8 +44,8 @@ export function AddToCart({
           const error = await addItem(selectedVariantId);
 
           if (error) {
-            alert(error);
-            return;
+            // Trigger the error boundary in the root error.js
+            throw new Error(error.toString());
           }
 
           router.refresh();

components/cart/delete-item-button.tsx

@@ -19,8 +19,8 @@ export default function DeleteItemButton({ item }: { item: CartItem }) {
           const error = await removeItem(item.id);
 
           if (error) {
-            alert(error);
-            return;
+            // Trigger the error boundary in the root error.js
+            throw new Error(error.toString());
           }
 
           router.refresh();

components/cart/edit-item-quantity-button.tsx

@@ -32,8 +32,8 @@ export default function EditItemQuantityButton({
                 });
 
           if (error) {
-            alert(error);
-            return;
+            // Trigger the error boundary in the root error.js
+            throw new Error(error.toString());
           }
 
           router.refresh();

package.json

@@ -25,7 +25,7 @@
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
     "clsx": "^2.0.0",
-    "next": "13.4.12",
+    "next": "13.4.13-canary.15",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -43,7 +43,7 @@
     "eslint-plugin-unicorn": "^48.0.0",
     "lint-staged": "^13.2.3",
     "postcss": "^8.4.27",
-    "prettier": "^3.0.0",
+    "prettier": "3.0.1",
     "prettier-plugin-tailwindcss": "^0.4.1",
     "tailwindcss": "^3.3.3",
     "typescript": "5.1.6"