General fixes (#1128)

* Remove log related to .shopify in .gitignore * Update list prompt and cleanup * Throw error in HR when storeDomain is falsy * Trim stack trace for every known error, not only GraphQL * Show server.ts in stack trace and ensure something is shown * Fix tests * Update HR error messages * Improve virtual-route information when store is linked * Use mock.shop in hello-world * Changesets
Shopify · Jul 21, 2023 · 4bee03d · 4bee03d
1 parent 945fdc5
commit 4bee03d
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 78 deletions.
diff --git a/.changeset/five-bees-itch.md b/.changeset/five-bees-itch.md
@@ -0,0 +1,6 @@
+---
+'@shopify/hydrogen-react': patch
+'@shopify/hydrogen': patch
+---
+
+Throw error when `storeDomain` is not passed to `createStorefrontClient`.
diff --git a/packages/cli/src/commands/hydrogen/list.ts b/packages/cli/src/commands/hydrogen/list.ts
@@ -6,15 +6,17 @@ import {
   outputInfo,
   outputNewline,
 } from '@shopify/cli-kit/node/output';
+import {renderInfo} from '@shopify/cli-kit/node/ui';
 import {commonFlags} from '../../lib/flags.js';
 import {parseGid} from '../../lib/gid.js';
 import {
   type Deployment,
   type HydrogenStorefront,
   getStorefrontsWithDeployment,
 } from '../../lib/graphql/admin/list-storefronts.js';
-import {logMissingStorefronts} from '../../lib/missing-storefronts.js';
+import {newHydrogenStorefrontUrl} from '../../lib/admin-urls.js';
 import {login} from '../../lib/auth.js';
+import {getCliCommand} from '../../lib/shell.js';
 
 export default class List extends Command {
   static description =
@@ -75,7 +77,16 @@ export async function runList({path: root = process.cwd()}: Flags) {
       },
     );
   } else {
-    logMissingStorefronts(session);
+    renderInfo({
+      headline: 'Hydrogen storefronts',
+      body: 'There are no Hydrogen storefronts on your Shop.',
+      nextSteps: [
+        `Ensure you are logged in to the correct shop (currently: ${session.storeFqdn})`,
+        `Create a new Hydrogen storefront: Run \`${await getCliCommand(
+          root,
+        )} link\` or visit ${newHydrogenStorefrontUrl(session)}`,
+      ],
+    });
   }
 }
 

diff --git a/packages/cli/src/lib/log.test.ts b/packages/cli/src/lib/log.test.ts
@@ -6,7 +6,7 @@ import {resetAllLogs, enhanceH2Logs} from './log.js';
 describe('log replacer', () => {
   describe('enhanceH2Logs', () => {
     const graphiqlUrl = 'http://localhost:3000/graphiql';
-    const appDirectory = fileURLToPath(import.meta.url);
+    const rootDirectory = fileURLToPath(import.meta.url);
     const outputMock = mockAndCaptureOutput();
 
     beforeEach(() => {
@@ -21,7 +21,7 @@ describe('log replacer', () => {
 
     describe('enhances h2:info pattern', () => {
       it('renders in an info banner', () => {
-        enhanceH2Logs({graphiqlUrl, appDirectory});
+        enhanceH2Logs({graphiqlUrl, rootDirectory});
 
         console.warn('[h2:info:storefront.query] Tip');
 
@@ -35,7 +35,7 @@ describe('log replacer', () => {
 
     describe('enhances h2:warn pattern', () => {
       it('renders in a warning banner', () => {
-        enhanceH2Logs({graphiqlUrl, appDirectory});
+        enhanceH2Logs({graphiqlUrl, rootDirectory});
 
         console.warn('[h2:warn:storefront.query] Wrong query 1');
 
@@ -47,7 +47,7 @@ describe('log replacer', () => {
       });
 
       it('shows links from the last line as a list', () => {
-        enhanceH2Logs({graphiqlUrl, appDirectory});
+        enhanceH2Logs({graphiqlUrl, rootDirectory});
 
         console.warn(
           '[h2:warn:storefront.query] Wrong query.\nhttps://docs.com/something',
@@ -62,7 +62,7 @@ describe('log replacer', () => {
 
     describe('enhances h2:error pattern', () => {
       it('renders in an error banner', () => {
-        enhanceH2Logs({graphiqlUrl, appDirectory});
+        enhanceH2Logs({graphiqlUrl, rootDirectory});
 
         console.error(new Error('[h2:error:storefront.query] Wrong query 2'));
 
@@ -75,7 +75,7 @@ describe('log replacer', () => {
       });
 
       it('shows a GraphiQL link when the error is related to a GraphQL query', () => {
-        enhanceH2Logs({graphiqlUrl, appDirectory});
+        enhanceH2Logs({graphiqlUrl, rootDirectory});
 
         console.error(
           new Error('[h2:error:storefront.query] Wrong query 3', {
@@ -95,7 +95,7 @@ describe('log replacer', () => {
       });
 
       it('trims stack traces when the error is related to a GraphQL query', () => {
-        enhanceH2Logs({graphiqlUrl, appDirectory});
+        enhanceH2Logs({graphiqlUrl, rootDirectory});
 
         console.error(
           new Error('[h2:error:storefront.query] Wrong query 4', {
@@ -105,7 +105,7 @@ describe('log replacer', () => {
 
         const error = outputMock.error();
         const stack = error.split('stack trace:')[1] ?? '';
-        const shortenedAppDir = appDirectory.split('/cli/').pop()!;
+        const shortenedAppDir = rootDirectory.split('/cli/').pop()!;
         expect(stack).toMatch(shortenedAppDir);
         expect(stack).not.toMatch('node_modules');
       });

diff --git a/packages/cli/src/lib/log.ts b/packages/cli/src/lib/log.ts
@@ -175,7 +175,7 @@ export function muteAuthLogs({
  */
 export function enhanceH2Logs(options: {
   graphiqlUrl: string;
-  appDirectory: string;
+  rootDirectory: string;
 }) {
   injectLogReplacer('warn');
   injectLogReplacer('error');
@@ -228,18 +228,21 @@ export function enhanceH2Logs(options: {
               queryName ? ` \`${colors.whiteBright(queryName)}\`` : ''
             }, try it in ${outputToken.link(colors.bold('GraphiQL'), link)}.`
               .value;
+        }
 
-          // Sanitize stack trace to only show app code
-          const stackLines = stack?.split('\n') ?? [];
-          const isAppLine = (line: string) =>
-            line.includes(options.appDirectory);
-          const firstAppLineIndex = stackLines.findIndex(isAppLine);
-          const lastAppLineIndex =
-            stackLines.length -
-            [...stackLines]
-              .reverse() // findLastIndex requires Node 18
-              .findIndex(isAppLine);
-
+        // Sanitize stack trace to only show app code
+        const stackLines = stack?.split('\n') ?? [];
+        const isAppLine = (line: string) =>
+          line.includes(options.rootDirectory) &&
+          !line.includes('node_modules');
+        const firstAppLineIndex = stackLines.findIndex(isAppLine);
+        const lastAppLineIndex =
+          stackLines.length -
+          [...stackLines]
+            .reverse() // findLastIndex requires Node 18
+            .findIndex(isAppLine);
+
+        if (firstAppLineIndex > 0 && lastAppLineIndex > firstAppLineIndex) {
           stack =
             [
               stackLines[0], // Error message

diff --git a/packages/cli/src/lib/missing-storefronts.ts b/packages/cli/src/lib/missing-storefronts.ts
diff --git a/packages/cli/src/lib/shopify-config.ts b/packages/cli/src/lib/shopify-config.ts
@@ -1,7 +1,6 @@
 import {resolvePath, dirname} from '@shopify/cli-kit/node/path';
 import {readFile, mkdir, fileExists, writeFile} from '@shopify/cli-kit/node/fs';
 import {AbortError} from '@shopify/cli-kit/node/error';
-import {outputInfo} from '@shopify/cli-kit/node/output';
 
 export const SHOPIFY_DIR = '.shopify';
 export const SHOPIFY_DIR_PROJECT = 'project.json';
@@ -146,7 +145,6 @@ export async function ensureShopifyGitIgnore(root: string): Promise<boolean> {
 
     gitIgnoreContents += `${SHOPIFY_DIR}\r\n`;
 
-    outputInfo('Adding .shopify to .gitignore...\n');
     await writeFile(gitIgnoreFilePath, gitIgnoreContents);
 
     return true;

diff --git a/packages/cli/src/lib/user-errors.ts b/packages/cli/src/lib/user-errors.ts
diff --git a/packages/cli/src/virtual-routes/routes/index.tsx b/packages/cli/src/virtual-routes/routes/index.tsx
@@ -71,12 +71,26 @@ export default function Index() {
         {configDone ? <HydrogenLogoBaseColor /> : <HydrogenLogoBaseBW />}
         <h1>Hello, {shopName}</h1>
         <p>Welcome to your new custom storefront</p>
-        {configDone ? null : (
-          <section className="Banner">
-            <div>
-              <IconBanner />
-              <h2>Configure storefront token</h2>
-            </div>
+
+        <section className="Banner">
+          <div>
+            <IconBanner />
+            <h2>
+              {configDone
+                ? 'Create your first route'
+                : 'Configure storefront token'}
+            </h2>
+          </div>
+          {configDone ? (
+            <p>
+              You&rsquo;re seeing this because you don&rsquo;t have a home route
+              in your project yet. <br />
+              Run <code>h2 generate route home</code> to create your home route.
+              Learn more about
+              {` `}
+              <CreateRoutesLink />
+            </p>
+          ) : (
             <p>
               You&rsquo;re seeing this because you have not yet configured your
               storefront token. <br />
@@ -95,23 +109,28 @@ export default function Index() {
               </a>
               {` `}
               and{` `}
-              <a
-                target="_blank"
-                rel="norefferer noopener"
-                href="https://shopify.dev/docs/custom-storefronts/hydrogen/building/begin-development#step-4-create-a-route"
-              >
-                creating routes
-              </a>
-              .
+              <CreateRoutesLink />.
             </p>
-          </section>
-        )}
+          )}
+        </section>
         <ResourcesLinks />
       </Layout>
     </>
   );
 }
 
+function CreateRoutesLink() {
+  return (
+    <a
+      target="_blank"
+      rel="norefferer noopener"
+      href="https://shopify.dev/docs/custom-storefronts/hydrogen/building/begin-development#step-4-create-a-route"
+    >
+      creating routes
+    </a>
+  );
+}
+
 function ErrorPage() {
   return (
     <>

diff --git a/packages/hydrogen-react/src/storefront-client.ts b/packages/hydrogen-react/src/storefront-client.ts
@@ -33,6 +33,13 @@ export function createStorefrontClient(
     contentType,
   } = props;
 
+  if (!storeDomain) {
+    throw new Error(
+      H2_PREFIX_ERROR +
+        `\`storeDomain\` is required when creating a new Storefront client.\nReceived "${storeDomain}".`,
+    );
+  }
+
   if (storefrontApiVersion !== SFAPI_VERSION) {
     warnOnce(
       `The Storefront API version that you're using is different than the version this build of Hydrogen React is targeting.` +
@@ -84,7 +91,7 @@ export function createStorefrontClient(
       ) {
         throw new Error(
           H2_PREFIX_ERROR +
-            'You did not pass in a `privateStorefrontToken` while using `getPrivateTokenHeaders()`',
+            'You did not pass in a `privateStorefrontToken` while using `createStorefrontClient()` or `getPrivateTokenHeaders()`',
         );
       }
 
@@ -120,7 +127,7 @@ export function createStorefrontClient(
       ) {
         throw new Error(
           H2_PREFIX_ERROR +
-            'You did not pass in a `publicStorefrontToken` while using `getPublicTokenHeaders()`',
+            'You did not pass in a `publicStorefrontToken` while using `createStorefrontClient()` or `getPublicTokenHeaders()`',
         );
       }
 

diff --git a/templates/hello-world/.env b/templates/hello-world/.env
@@ -1,5 +1,4 @@
-# The variables added in this file are only available locally in MiniOxygen
+# These variables are only available locally in MiniOxygen
 
 SESSION_SECRET="foobar"
-PUBLIC_STOREFRONT_API_TOKEN="3b580e70970c4528da70c98e097c2fa0"
-PUBLIC_STORE_DOMAIN="hydrogen-preview.myshopify.com"
+PUBLIC_STORE_DOMAIN="mock.shop"