diff --git a/packages/app/src/cli/services/dev/processes/dev-session.ts b/packages/app/src/cli/services/dev/processes/dev-session.ts index 83dd54392d7..d85ac2e09e0 100644 --- 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 index 32c38675d2a..cdd761e7fe2 100644 --- 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 = ({ const {isRawModeSupported: canUseShortcuts} = useStdin() const pollingInterval = useRef() + const devSessionPollingInterval = useRef() const localhostGraphiqlUrl = `http://localhost:${graphiqlPort}/graphiql` const defaultStatusMessage = `Preview URL: ${previewUrl}${ graphiqlUrl ? `\nGraphiQL URL: ${localhostGraphiqlUrl}` : '' @@ -83,11 +85,13 @@ const Dev: FunctionComponent = ({ }, 2000) } clearInterval(pollingInterval.current) + clearInterval(devSessionPollingInterval.current) await app.developerPlatformClient.devSessionDelete({appId: app.id, shopFqdn}) await developerPreview.disable() }) const [devPreviewEnabled, setDevPreviewEnabled] = useState(true) + const [devSessionEnabled, setDevSessionEnabled] = useState(false) const [error, setError] = useState(undefined) const errorHandledProcesses = useMemo(() => { @@ -106,6 +110,32 @@ const Dev: FunctionComponent = ({ }) }, [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 = ({ {devPreviewEnabled ? ✔ on : ✖ off} ) : null} - {graphiqlUrl ? ( + {graphiqlUrl && devSessionEnabled ? ( {figures.pointerSmall} Press g {figures.lineVertical} open GraphiQL (Admin API) in your browser ) : null} - - {figures.pointerSmall} Press p {figures.lineVertical} preview in your browser - + {devSessionEnabled ? ( + + {figures.pointerSmall} Press p {figures.lineVertical} preview in your browser + + ) : null} {figures.pointerSmall} Press q {figures.lineVertical} quit diff --git a/packages/cli-kit/src/public/node/error-handler.ts b/packages/cli-kit/src/public/node/error-handler.ts index 160467566a1..e446157c94f 100644 --- 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')