Don't show dev shorcuts until dev session is ready

Shopify · Jan 15, 2025 · 406ef75 · 406ef75
1 parent 18ea842
commit 406ef75
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 6 deletions.
diff --git a/packages/app/src/cli/services/dev/processes/dev-session.ts b/packages/app/src/cli/services/dev/processes/dev-session.ts
@@ -59,6 +59,12 @@ let bundleControllers: AbortController[] = []
 // Since the watcher can emit events before the dev session is ready, we need to keep track of the status
 let isDevSessionReady = false
 
+export function devSessionStatus() {
+  return {
+    isDevSessionReady,
+  }
+}
+
 export async function setupDevSessionProcess({
   app,
   apiKey,

diff --git a/packages/app/src/cli/services/dev/ui/components/Dev.tsx b/packages/app/src/cli/services/dev/ui/components/Dev.tsx
@@ -1,6 +1,7 @@
 import metadata from '../../../../metadata.js'
 import {DeveloperPlatformClient} from '../../../../utilities/developer-platform-client.js'
 import {ExtensionInstance} from '../../../../models/extensions/extension-instance.js'
+import {devSessionStatus} from '../../processes/dev-session.js'
 import {OutputProcess} from '@shopify/cli-kit/node/output'
 import {ConcurrentOutput} from '@shopify/cli-kit/node/ui/components'
 import {useAbortSignal} from '@shopify/cli-kit/node/ui/hooks'
@@ -64,6 +65,7 @@ const Dev: FunctionComponent<DevProps> = ({
 
   const {isRawModeSupported: canUseShortcuts} = useStdin()
   const pollingInterval = useRef<NodeJS.Timeout>()
+  const devSessionPollingInterval = useRef<NodeJS.Timeout>()
   const localhostGraphiqlUrl = `http://localhost:${graphiqlPort}/graphiql`
   const defaultStatusMessage = `Preview URL: ${previewUrl}${
     graphiqlUrl ? `\nGraphiQL URL: ${localhostGraphiqlUrl}` : ''
@@ -83,11 +85,13 @@ const Dev: FunctionComponent<DevProps> = ({
       }, 2000)
     }
     clearInterval(pollingInterval.current)
+    clearInterval(devSessionPollingInterval.current)
     await app.developerPlatformClient.devSessionDelete({appId: app.id, shopFqdn})
     await developerPreview.disable()
   })
 
   const [devPreviewEnabled, setDevPreviewEnabled] = useState<boolean>(true)
+  const [devSessionEnabled, setDevSessionEnabled] = useState<boolean>(false)
   const [error, setError] = useState<string | undefined>(undefined)
 
   const errorHandledProcesses = useMemo(() => {
@@ -106,6 +110,32 @@ const Dev: FunctionComponent<DevProps> = ({
     })
   }, [processes, abortController])
 
+  /*
+   * Poll Dev Session status
+   *
+   * Polling mechanism to check if the dev session is ready.
+   * When the session is ready, the polling stops and the shortcuts are shown.
+   * Reason is that shortcuts won't work properly until the session is ready and the app is installed.
+   *
+   * This only applies for App Management dev-sessions.
+   */
+  useEffect(() => {
+    const pollDevSession = async () => {
+      const {isDevSessionReady} = devSessionStatus()
+      setDevSessionEnabled(isDevSessionReady)
+      if (isDevSessionReady) clearInterval(devSessionPollingInterval.current)
+    }
+
+    if (app.developerPlatformClient.supportsDevSessions) {
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      devSessionPollingInterval.current = setInterval(pollDevSession, 200)
+    } else {
+      setDevSessionEnabled(true)
+    }
+
+    return () => clearInterval(devSessionPollingInterval.current)
+  }, [])
+
   useEffect(() => {
     const pollDevPreviewMode = async () => {
       try {
@@ -244,15 +274,17 @@ const Dev: FunctionComponent<DevProps> = ({
                   {devPreviewEnabled ? <Text color="green">✔ on</Text> : <Text color="red">✖ off</Text>}
                 </Text>
               ) : null}
-              {graphiqlUrl ? (
+              {graphiqlUrl && devSessionEnabled ? (
                 <Text>
                   {figures.pointerSmall} Press <Text bold>g</Text> {figures.lineVertical} open GraphiQL (Admin API) in
                   your browser
                 </Text>
               ) : null}
-              <Text>
-                {figures.pointerSmall} Press <Text bold>p</Text> {figures.lineVertical} preview in your browser
-              </Text>
+              {devSessionEnabled ? (
+                <Text>
+                  {figures.pointerSmall} Press <Text bold>p</Text> {figures.lineVertical} preview in your browser
+                </Text>
+              ) : null}
               <Text>
                 {figures.pointerSmall} Press <Text bold>q</Text> {figures.lineVertical} quit
               </Text>

diff --git a/packages/cli-kit/src/public/node/error-handler.ts b/packages/cli-kit/src/public/node/error-handler.ts
@@ -77,7 +77,7 @@ export async function sendErrorToBugsnag(
   if (error instanceof Error) {
     report = true
     reportableError = new Error(error.message)
-    stacktrace = error.stack
+    stacktrace = error.stack?.substring(0, 10000)
 
     /**
      * Some errors that reach this point have an empty string. For example:
@@ -89,7 +89,7 @@ export async function sendErrorToBugsnag(
   } else if (typeof error === 'string' && error.trim().length !== 0) {
     report = true
     reportableError = new Error(error)
-    stacktrace = reportableError.stack
+    stacktrace = reportableError.stack?.substring(0, 10000)
   } else {
     report = false
     reportableError = new Error('Unknown error')