From 6f24cf7ebfd287bf9967adf6e3de293fdf0d1ac5 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Fri, 4 Aug 2023 18:30:20 -0500 Subject: [PATCH] Better error handling. --- app/error.tsx | 7 +- app/layout.tsx | 6 +- components/cart/actions.ts | 19 ++--- components/cart/add-to-cart.tsx | 68 +++++++++--------- components/cart/delete-item-button.tsx | 4 +- components/cart/edit-item-quantity-button.tsx | 4 +- package.json | 2 +- pnpm-lock.yaml | 71 +++++++++---------- 8 files changed, 92 insertions(+), 89 deletions(-) diff --git a/app/error.tsx b/app/error.tsx index 3e2b40b1a..c4735fbcb 100644 --- a/app/error.tsx +++ b/app/error.tsx @@ -2,9 +2,10 @@ export default function Error({ reset }: { reset: () => void }) { return ( -
-

Something went wrong.

- +
+

Oh no!

+

There was an issue with our storefront. This could be a temporary issue, please try your action again.

+
); } diff --git a/app/layout.tsx b/app/layout.tsx index 2674f79fc..7256fb488 100644 --- a/app/layout.tsx +++ b/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: { diff --git a/components/cart/actions.ts b/components/cart/actions.ts index 8188458e2..c623668b7 100644 --- a/components/cart/actions.ts +++ b/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 => { +export const addItem = async (variantId: string | undefined): Promise => { let cartId = cookies().get('cartId')?.value; let cart; @@ -18,25 +18,26 @@ export const addItem = async (variantId: string | undefined): Promise => { +export const removeItem = async (lineId: string): Promise => { 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 => { +}): Promise => { 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' } }; diff --git a/components/cart/add-to-cart.tsx b/components/cart/add-to-cart.tsx index 92e2d50b0..eedbe1fee 100644 --- a/components/cart/add-to-cart.tsx +++ b/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 ( - + )} + > +
+ {!isPending ? : } +
+ {availableForSale ? 'Add To Cart' : 'Out Of Stock'} + ); } diff --git a/components/cart/delete-item-button.tsx b/components/cart/delete-item-button.tsx index f279f178d..605adcf51 100644 --- a/components/cart/delete-item-button.tsx +++ b/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(); diff --git a/components/cart/edit-item-quantity-button.tsx b/components/cart/edit-item-quantity-button.tsx index 8b1553f73..e846196ca 100644 --- a/components/cart/edit-item-quantity-button.tsx +++ b/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(); diff --git a/package.json b/package.json index 21d2dba9a..cd27bc6a9 100644 --- a/package.json +++ b/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" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 27e9c4375..9d74accad 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,8 +11,8 @@ dependencies: specifier: ^2.0.0 version: 2.0.0 next: - specifier: 13.4.12 - version: 13.4.12(react-dom@18.2.0)(react@18.2.0) + specifier: 13.4.13-canary.15 + version: 13.4.13-canary.15(react-dom@18.2.0)(react@18.2.0) react: specifier: 18.2.0 version: 18.2.0 @@ -224,8 +224,8 @@ packages: '@jridgewell/sourcemap-codec': 1.4.14 dev: true - /@next/env@13.4.12: - resolution: {integrity: sha512-RmHanbV21saP/6OEPBJ7yJMuys68cIf8OBBWd7+uj40LdpmswVAwe1uzeuFyUsd6SfeITWT3XnQfn6wULeKwDQ==} + /@next/env@13.4.13-canary.15: + resolution: {integrity: sha512-AljMmO5a2uB0ZTDcBVhcfkE7WtdQDfnPg2zz/e6jKjVMRFPSvxaoRoSGUwONIhk9CAPbX9px7bZYom2wbhrTkw==} dev: false /@next/eslint-plugin-next@13.4.12: @@ -234,8 +234,8 @@ packages: glob: 7.1.7 dev: true - /@next/swc-darwin-arm64@13.4.12: - resolution: {integrity: sha512-deUrbCXTMZ6ZhbOoloqecnUeNpUOupi8SE2tx4jPfNS9uyUR9zK4iXBvH65opVcA/9F5I/p8vDXSYbUlbmBjZg==} + /@next/swc-darwin-arm64@13.4.13-canary.15: + resolution: {integrity: sha512-ymE/tPjf5DXIqWxEefkqGX094ZDpKw/0sKb7xmzF0m8Kolac1eqA6ZnCsb1TKXYVQyrGUx/Z0xmxCK4cm2dEdw==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] @@ -243,8 +243,8 @@ packages: dev: false optional: true - /@next/swc-darwin-x64@13.4.12: - resolution: {integrity: sha512-WRvH7RxgRHlC1yb5oG0ZLx8F7uci9AivM5/HGGv9ZyG2Als8Ij64GC3d+mQ5sJhWjusyU6T6V1WKTUoTmOB0zQ==} + /@next/swc-darwin-x64@13.4.13-canary.15: + resolution: {integrity: sha512-B9fCPRjE1t5r1bmivq5fqHvU8mLNX7hkS2zj9arVrZEC7HdOugbSOpmQb5+yr5ZmNKMItQbPDJIATY+ZAiUtww==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] @@ -252,8 +252,8 @@ packages: dev: false optional: true - /@next/swc-linux-arm64-gnu@13.4.12: - resolution: {integrity: sha512-YEKracAWuxp54tKiAvvq73PUs9lok57cc8meYRibTWe/VdPB2vLgkTVWFcw31YDuRXdEhdX0fWS6Q+ESBhnEig==} + /@next/swc-linux-arm64-gnu@13.4.13-canary.15: + resolution: {integrity: sha512-K30IPFxZPtZLs1gqir95oNdCNgmu0awbC7MMLqOu9+wmW+LYjA6M3ltRe2Duy9nZ7JQob1oRl/s7MMbtCuzVAA==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -261,8 +261,8 @@ packages: dev: false optional: true - /@next/swc-linux-arm64-musl@13.4.12: - resolution: {integrity: sha512-LhJR7/RAjdHJ2Isl2pgc/JaoxNk0KtBgkVpiDJPVExVWA1c6gzY57+3zWuxuyWzTG+fhLZo2Y80pLXgIJv7g3g==} + /@next/swc-linux-arm64-musl@13.4.13-canary.15: + resolution: {integrity: sha512-ClJvWIhvCLXM3iSMet9bqKxyxifN7DGo8+wiV8gwIU+OMWHGNgGtmZ3xXae3R91w8DOLrsREyBN4uGLlgpwRXg==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -270,8 +270,8 @@ packages: dev: false optional: true - /@next/swc-linux-x64-gnu@13.4.12: - resolution: {integrity: sha512-1DWLL/B9nBNiQRng+1aqs3OaZcxC16Nf+mOnpcrZZSdyKHek3WQh6j/fkbukObgNGwmCoVevLUa/p3UFTTqgqg==} + /@next/swc-linux-x64-gnu@13.4.13-canary.15: + resolution: {integrity: sha512-/B0xaPcdx2HWDC9Bxks3dLIUyu9Falmd7ENRanYizfdihgM+kV2zIQe/5h5zaESKMEltLt2ELPOPCaFU5gOnYA==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -279,8 +279,8 @@ packages: dev: false optional: true - /@next/swc-linux-x64-musl@13.4.12: - resolution: {integrity: sha512-kEAJmgYFhp0VL+eRWmUkVxLVunn7oL9Mdue/FS8yzRBVj7Z0AnIrHpTIeIUl1bbdQq1VaoOztnKicAjfkLTRCQ==} + /@next/swc-linux-x64-musl@13.4.13-canary.15: + resolution: {integrity: sha512-YZZlKne+5iwsPe9yN8QP5sfyDN7ybpWTuYukfv6sKL68STuAVqqp4QX2g7a3Fw+LMJiDwyCFJaUDgO9KSLEqDw==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -288,8 +288,8 @@ packages: dev: false optional: true - /@next/swc-win32-arm64-msvc@13.4.12: - resolution: {integrity: sha512-GMLuL/loR6yIIRTnPRY6UGbLL9MBdw2anxkOnANxvLvsml4F0HNIgvnU3Ej4BjbqMTNjD4hcPFdlEow4XHPdZA==} + /@next/swc-win32-arm64-msvc@13.4.13-canary.15: + resolution: {integrity: sha512-nOi9w+E+ajqJuQhcB260AMJERJPYS1K5pL+5Rymyt9VWCZEJZiHTRuaf8y/H7sObZcQKwRVa7C/EWyZjj658XA==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] @@ -297,8 +297,8 @@ packages: dev: false optional: true - /@next/swc-win32-ia32-msvc@13.4.12: - resolution: {integrity: sha512-PhgNqN2Vnkm7XaMdRmmX0ZSwZXQAtamBVSa9A/V1dfKQCV1rjIZeiy/dbBnVYGdj63ANfsOR/30XpxP71W0eww==} + /@next/swc-win32-ia32-msvc@13.4.13-canary.15: + resolution: {integrity: sha512-EqV5Bt7TmdFWa00KkoEeb5K4uRFrV1BAiwqylsk+d+2U1N2UIad/dTOyTzobjDcZ9uii1EaCVMiTuMfcsGIahw==} engines: {node: '>= 10'} cpu: [ia32] os: [win32] @@ -306,8 +306,8 @@ packages: dev: false optional: true - /@next/swc-win32-x64-msvc@13.4.12: - resolution: {integrity: sha512-Z+56e/Ljt0bUs+T+jPjhFyxYBcdY2RIq9ELFU+qAMQMteHo7ymbV7CKmlcX59RI9C4YzN8PgMgLyAoi916b5HA==} + /@next/swc-win32-x64-msvc@13.4.13-canary.15: + resolution: {integrity: sha512-hZcZ0vS1eevRTr1JUyDfTYXF36DBEowNZWyzNW8ZrlGMZyQloE9yf/jHoLtutxr2jV6GoHWGGqVSw4exOyjjKw==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -2241,25 +2241,22 @@ packages: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} dev: true - /next@13.4.12(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-eHfnru9x6NRmTMcjQp6Nz0J4XH9OubmzOa7CkWL+AUrUxpibub3vWwttjduu9No16dug1kq04hiUUpo7J3m3Xw==} + /next@13.4.13-canary.15(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-dSOzenhqdjH6fNbSKYZ4PkqmKLOviFSVUd75Csz+zZPoTWmAKR+9waUAttOyRnUgYd/qutt8KXGH+DiU0nmhVA==} engines: {node: '>=16.8.0'} hasBin: true peerDependencies: '@opentelemetry/api': ^1.1.0 - fibers: '>= 3.1.0' react: ^18.2.0 react-dom: ^18.2.0 sass: ^1.3.0 peerDependenciesMeta: '@opentelemetry/api': optional: true - fibers: - optional: true sass: optional: true dependencies: - '@next/env': 13.4.12 + '@next/env': 13.4.13-canary.15 '@swc/helpers': 0.5.1 busboy: 1.6.0 caniuse-lite: 1.0.30001517 @@ -2270,15 +2267,15 @@ packages: watchpack: 2.4.0 zod: 3.21.4 optionalDependencies: - '@next/swc-darwin-arm64': 13.4.12 - '@next/swc-darwin-x64': 13.4.12 - '@next/swc-linux-arm64-gnu': 13.4.12 - '@next/swc-linux-arm64-musl': 13.4.12 - '@next/swc-linux-x64-gnu': 13.4.12 - '@next/swc-linux-x64-musl': 13.4.12 - '@next/swc-win32-arm64-msvc': 13.4.12 - '@next/swc-win32-ia32-msvc': 13.4.12 - '@next/swc-win32-x64-msvc': 13.4.12 + '@next/swc-darwin-arm64': 13.4.13-canary.15 + '@next/swc-darwin-x64': 13.4.13-canary.15 + '@next/swc-linux-arm64-gnu': 13.4.13-canary.15 + '@next/swc-linux-arm64-musl': 13.4.13-canary.15 + '@next/swc-linux-x64-gnu': 13.4.13-canary.15 + '@next/swc-linux-x64-musl': 13.4.13-canary.15 + '@next/swc-win32-arm64-msvc': 13.4.13-canary.15 + '@next/swc-win32-ia32-msvc': 13.4.13-canary.15 + '@next/swc-win32-x64-msvc': 13.4.13-canary.15 transitivePeerDependencies: - '@babel/core' - babel-plugin-macros