From 528ad9b8ce67f2406c8117ee4e8dc2f1964db9f0 Mon Sep 17 00:00:00 2001
From: Michael Novotny <manovotny@gmail.com>
Date: Fri, 11 Aug 2023 20:19:49 -0500
Subject: [PATCH] Adds better error messages and environment variable fault
 tolerance (#1172)

* Adds better error messages and environment variable fault tolerance

* No hidden undefined
---
 .env.example         |  6 +++---
 app/layout.tsx       | 11 +++++++----
 lib/shopify/index.ts |  6 +++++-
 lib/type-guards.ts   |  1 +
 lib/utils.ts         |  3 +++
 5 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/.env.example b/.env.example
index 75213ad42..9ff0463db 100644
--- a/.env.example
+++ b/.env.example
@@ -2,6 +2,6 @@ COMPANY_NAME="Vercel Inc."
 TWITTER_CREATOR="@vercel"
 TWITTER_SITE="https://nextjs.org/commerce"
 SITE_NAME="Next.js Commerce"
-SHOPIFY_REVALIDATION_SECRET=
-SHOPIFY_STOREFRONT_ACCESS_TOKEN=
-SHOPIFY_STORE_DOMAIN=
+SHOPIFY_REVALIDATION_SECRET=""
+SHOPIFY_STOREFRONT_ACCESS_TOKEN=""
+SHOPIFY_STORE_DOMAIN="[your-shopify-store-subdomain].myshopify.com"
diff --git a/app/layout.tsx b/app/layout.tsx
index 7256fb488..6dc05ea08 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,4 +1,5 @@
 import Navbar from 'components/layout/navbar';
+import { ensureStartsWith } from 'lib/utils';
 import { Inter } from 'next/font/google';
 import { ReactNode, Suspense } from 'react';
 import './globals.css';
@@ -7,6 +8,8 @@ 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';
+const twitterCreator = TWITTER_CREATOR ? ensureStartsWith(TWITTER_CREATOR, '@') : undefined;
+const twitterSite = TWITTER_SITE ? ensureStartsWith(TWITTER_SITE, 'https://') : undefined;
 
 export const metadata = {
   metadataBase: new URL(baseUrl),
@@ -18,12 +21,12 @@ export const metadata = {
     follow: true,
     index: true
   },
-  ...(TWITTER_CREATOR &&
-    TWITTER_SITE && {
+  ...(twitterCreator &&
+    twitterSite && {
       twitter: {
         card: 'summary_large_image',
-        creator: TWITTER_CREATOR,
-        site: TWITTER_SITE
+        creator: twitterCreator,
+        site: twitterSite
       }
     })
 };
diff --git a/lib/shopify/index.ts b/lib/shopify/index.ts
index a8804d045..0b14212d2 100644
--- a/lib/shopify/index.ts
+++ b/lib/shopify/index.ts
@@ -1,5 +1,6 @@
 import { HIDDEN_PRODUCT_TAG, SHOPIFY_GRAPHQL_API_ENDPOINT, TAGS } from 'lib/constants';
 import { isShopifyError } from 'lib/type-guards';
+import { ensureStartsWith } from 'lib/utils';
 import { revalidateTag } from 'next/cache';
 import { headers } from 'next/headers';
 import { NextRequest, NextResponse } from 'next/server';
@@ -49,7 +50,9 @@ import {
   ShopifyUpdateCartOperation
 } from './types';
 
-const domain = `https://${process.env.SHOPIFY_STORE_DOMAIN!}`;
+const domain = process.env.SHOPIFY_STORE_DOMAIN
+  ? ensureStartsWith(process.env.SHOPIFY_STORE_DOMAIN, 'https://')
+  : '';
 const endpoint = `${domain}${SHOPIFY_GRAPHQL_API_ENDPOINT}`;
 const key = process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN!;
 
@@ -97,6 +100,7 @@ export async function shopifyFetch<T>({
   } catch (e) {
     if (isShopifyError(e)) {
       throw {
+        cause: e.cause?.toString() || 'unknown',
         status: e.status || 500,
         message: e.message,
         query
diff --git a/lib/type-guards.ts b/lib/type-guards.ts
index 1b7e7af5a..6f920d1f6 100644
--- a/lib/type-guards.ts
+++ b/lib/type-guards.ts
@@ -1,6 +1,7 @@
 export interface ShopifyErrorLike {
   status: number;
   message: Error;
+  cause?: Error;
 }
 
 export const isObject = (object: unknown): object is Record<string, unknown> => {
diff --git a/lib/utils.ts b/lib/utils.ts
index 3fa32280b..02ff6fe1b 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -6,3 +6,6 @@ export const createUrl = (pathname: string, params: URLSearchParams | ReadonlyUR
 
   return `${pathname}${queryString}`;
 };
+
+export const ensureStartsWith = (stringToCheck: string, startsWith: string) =>
+  stringToCheck.startsWith(startsWith) ? stringToCheck : `${startsWith}${stringToCheck}`;