Better error handling.

app/error.tsx

@@ -2,9 +2,10 @@
 
 export default function Error({ reset }: { reset: () => void }) {
   return (
-    <div>
-      <h2>Something went wrong.</h2>
-      <button onClick={() => reset()}>Try again</button>
+    <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 max-w-xl mx-auto my-4">
+      <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="w-full mt-4 flex mx-auto 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

@@ -26,43 +26,43 @@ export function AddToCart({
   );
   const selectedVariantId = variant?.id || defaultVariantId;
   const title = !availableForSale
-    ? 'Out of stock'
-    : !selectedVariantId
-    ? 'Please select options'
-    : undefined;
-
+  ? 'Out of stock'
+  : !selectedVariantId
+  ? 'Please select options'
+  : undefined;
+  
   return (
-    <button
-      aria-label="Add item to cart"
-      disabled={isPending || !availableForSale || !selectedVariantId}
-      title={title}
-      onClick={() => {
-        // Safeguard in case someone messes with `disabled` in devtools.
-        if (!availableForSale || !selectedVariantId) return;
+      <button
+        aria-label="Add item to cart"
+        disabled={isPending || !availableForSale || !selectedVariantId}
+        title={title}
+        onClick={() => {
+          // Safeguard in case someone messes with `disabled` in devtools.
+          if (!availableForSale || !selectedVariantId) return;
 
-        startTransition(async () => {
-          const error = await addItem(selectedVariantId);
+          startTransition(async () => {
+            const error = await addItem(selectedVariantId);
 
-          if (error) {
-            alert(error);
-            return;
-          }
+            if (error) {
+              // Trigger the error boundary in the root error.js
+              throw new Error(error.toString());
+            }
 
-          router.refresh();
-        });
-      }}
-      className={clsx(
-        'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
-        {
-          'cursor-not-allowed opacity-60 hover:opacity-60': !availableForSale || !selectedVariantId,
-          'cursor-not-allowed': isPending
-        }
-      )}
-    >
-      <div className="absolute left-0 ml-4">
-        {!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
-      </div>
-      <span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
-    </button>
+            router.refresh();
+          });
+        }}
+        className={clsx(
+          'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
+          {
+            'cursor-not-allowed opacity-60 hover:opacity-60': !availableForSale || !selectedVariantId,
+            'cursor-not-allowed': isPending
+          }
+        )}
+      >
+        <div className="absolute left-0 ml-4">
+          {!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
+        </div>
+        <span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
+      </button>
   );
 }

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"
   },