Adds better error messages and environment variable fault tolerance (#1172)

* Adds better error messages and environment variable fault tolerance

* No hidden undefined

.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"

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
       }
     })
 };

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

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> => {

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}`;