Add replay command

docs-shopify.dev/commands/interfaces/app-function-run.interface.ts

@@ -7,7 +7,7 @@ export interface appfunctionrun {
   '-c, --config <value>'?: string
 
   /**
-   * Name of the wasm export to invoke.
+   * Name of the WebAssembly export to invoke.
    * @environment SHOPIFY_FLAG_EXPORT
    */
   '-e, --export <value>'?: string

docs-shopify.dev/generated/generated_docs_data.json

@@ -859,7 +859,7 @@
                 "syntaxKind": "PropertySignature",
                 "name": "-e, --export <value>",
                 "value": "string",
-                "description": "Name of the wasm export to invoke.",
+                "description": "Name of the WebAssembly export to invoke.",
                 "isOptional": true,
                 "environmentValue": "SHOPIFY_FLAG_EXPORT"
               },
@@ -882,7 +882,7 @@
                 "environmentValue": "SHOPIFY_FLAG_JSON"
               }
             ],
-            "value": "export interface appfunctionrun {\n  /**\n   * The name of the app configuration.\n   * @environment SHOPIFY_FLAG_APP_CONFIG\n   */\n  '-c, --config <value>'?: string\n\n  /**\n   * Name of the wasm export to invoke.\n   * @environment SHOPIFY_FLAG_EXPORT\n   */\n  '-e, --export <value>'?: string\n\n  /**\n   * The input JSON to pass to the function. If omitted, standard input is used.\n   * @environment SHOPIFY_FLAG_INPUT\n   */\n  '-i, --input <value>'?: string\n\n  /**\n   * Log the run result as a JSON object.\n   * @environment SHOPIFY_FLAG_JSON\n   */\n  '-j, --json'?: ''\n\n  /**\n   * Disable color output.\n   * @environment SHOPIFY_FLAG_NO_COLOR\n   */\n  '--no-color'?: ''\n\n  /**\n   * The path to your function directory.\n   * @environment SHOPIFY_FLAG_PATH\n   */\n  '--path <value>'?: string\n\n  /**\n   * Increase the verbosity of the logs.\n   * @environment SHOPIFY_FLAG_VERBOSE\n   */\n  '--verbose'?: ''\n}"
+            "value": "export interface appfunctionrun {\n  /**\n   * The name of the app configuration.\n   * @environment SHOPIFY_FLAG_APP_CONFIG\n   */\n  '-c, --config <value>'?: string\n\n  /**\n   * Name of the WebAssembly export to invoke.\n   * @environment SHOPIFY_FLAG_EXPORT\n   */\n  '-e, --export <value>'?: string\n\n  /**\n   * The input JSON to pass to the function. If omitted, standard input is used.\n   * @environment SHOPIFY_FLAG_INPUT\n   */\n  '-i, --input <value>'?: string\n\n  /**\n   * Log the run result as a JSON object.\n   * @environment SHOPIFY_FLAG_JSON\n   */\n  '-j, --json'?: ''\n\n  /**\n   * Disable color output.\n   * @environment SHOPIFY_FLAG_NO_COLOR\n   */\n  '--no-color'?: ''\n\n  /**\n   * The path to your function directory.\n   * @environment SHOPIFY_FLAG_PATH\n   */\n  '--path <value>'?: string\n\n  /**\n   * Increase the verbosity of the logs.\n   * @environment SHOPIFY_FLAG_VERBOSE\n   */\n  '--verbose'?: ''\n}"
           }
         }
       }

packages/app/src/cli/commands/app/function/replay.ts

@@ -0,0 +1,83 @@
+import {functionFlags, inFunctionContext} from '../../../services/function/common.js'
+import {replay} from '../../../services/function/replay.js'
+import {appFlags} from '../../../flags.js'
+import {showApiKeyDeprecationWarning} from '../../../prompts/deprecation-warnings.js'
+import {environmentVariableNames} from '../../../constants.js'
+import Command from '@shopify/cli-kit/node/base-command'
+import {globalFlags} from '@shopify/cli-kit/node/cli'
+import {Flags} from '@oclif/core'
+import {getEnvironmentVariables} from '@shopify/cli-kit/node/environment'
+import {isTruthy} from '@shopify/cli-kit/node/context/utilities'
+
+export default class FunctionReplay extends Command {
+  static hidden = true
+  static summary = 'Replays a function run from an app log.'
+
+  static descriptionWithMarkdown = `Runs the function from your current directory for [testing purposes](https://shopify.dev/docs/apps/functions/testing-and-debugging). To learn how you can monitor and debug functions when errors occur, refer to [Shopify Functions error handling](https://shopify.dev/docs/api/functions/errors).`
+
+  static description = this.descriptionWithoutMarkdown()
+
+  static flags = {
+    ...globalFlags,
+    ...appFlags,
+    ...functionFlags,
+    'api-key': Flags.string({
+      hidden: true,
+      description: "Application's API key",
+      env: 'SHOPIFY_FLAG_API_KEY',
+      exclusive: ['config'],
+    }),
+    'client-id': Flags.string({
+      hidden: false,
+      description: "Application's Client ID",
+      env: 'SHOPIFY_FLAG_CLIENT_ID',
+      exclusive: ['config'],
+    }),
+    export: Flags.string({
+      char: 'e',
+      hidden: false,
+      description: 'Name of the WebAssembly export to invoke.',
+      default: '_start',
+      env: 'SHOPIFY_FLAG_EXPORT',
+    }),
+    json: Flags.boolean({
+      char: 'j',
+      hidden: false,
+      description: 'Output the function run result as a JSON object.',
+      env: 'SHOPIFY_FLAG_JSON',
+    }),
+  }
+
+  public async run() {
+    const env = getEnvironmentVariables()
+    const logPollingEnabled = isTruthy(env[environmentVariableNames.enableAppLogPolling])
+
+    if (!logPollingEnabled) {
+      throw new Error(
+        'This command is not released yet. You can experiment with it by setting SHOPIFY_CLI_ENABLE_APP_LOG_POLLING=1 in your env.',
+      )
+    }
+
+    const {flags} = await this.parse(FunctionReplay)
+    if (flags['api-key']) {
+      await showApiKeyDeprecationWarning()
+    }
+    const apiKey = flags['client-id'] || flags['api-key']
+
+    await inFunctionContext({
+      path: flags.path,
+      userProvidedConfigName: flags.config,
+      callback: async (app, ourFunction) => {
+        await replay({
+          app,
+          extension: ourFunction,
+          apiKey,
+          stdout: flags.stdout,
+          path: flags.path,
+          json: flags.json,
+          export: flags.export,
+        })
+      },
+    })
+  }
+}

packages/app/src/cli/commands/app/function/run.ts

@@ -24,7 +24,7 @@ export default class FunctionRun extends Command {
     export: Flags.string({
       char: 'e',
       hidden: false,
-      description: 'Name of the wasm export to invoke.',
+      description: 'Name of the WebAssembly export to invoke.',
       default: '_start',
       env: 'SHOPIFY_FLAG_EXPORT',
     }),

packages/app/src/cli/index.ts

@@ -7,6 +7,7 @@ import DraftExtensionsPush from './commands/app/draft-extensions/push.js'
 import EnvPull from './commands/app/env/pull.js'
 import EnvShow from './commands/app/env/show.js'
 import FunctionBuild from './commands/app/function/build.js'
+import FunctionReplay from './commands/app/function/replay.js'
 import FunctionRun from './commands/app/function/run.js'
 import FetchSchema from './commands/app/function/schema.js'
 import FunctionTypegen from './commands/app/function/typegen.js'
@@ -38,6 +39,7 @@ export const commands = {
   'app:env:show': EnvShow,
   'app:generate:schema': GenerateSchema,
   'app:function:build': FunctionBuild,
+  'app:function:replay': FunctionReplay,
   'app:function:run': FunctionRun,
   'app:function:schema': FetchSchema,
   'app:function:typegen': FunctionTypegen,

packages/app/src/cli/prompts/function/replay.test.ts

@@ -0,0 +1,76 @@
+import {selectFunctionRunPrompt} from './replay.js'
+import {FunctionRunData} from '../../services/function/replay.js'
+import {describe, expect, vi, test} from 'vitest'
+import {renderAutocompletePrompt} from '@shopify/cli-kit/node/ui'
+
+vi.mock('@shopify/cli-kit/node/ui')
+
+const RUN1: FunctionRunData = {
+  shop_id: 69665030382,
+  api_client_id: 124042444801,
+  payload: {
+    input: '{}',
+    input_bytes: 136,
+    output: '{}',
+    output_bytes: 195,
+    function_id: '34236fa9-42f5-4bb6-adaf-956e12fff0b0',
+    logs: '',
+    fuel_consumed: 458206,
+  },
+  event_type: 'function_run',
+  cursor: '2024-05-31T15:29:47.291530Z',
+  status: 'success',
+  log_timestamp: '2024-05-31T15:29:46.741270Z',
+  identifier: 'abcdef',
+}
+
+const RUN2: FunctionRunData = {
+  shop_id: 69665030382,
+  api_client_id: 124042444801,
+  payload: {
+    input: '{}',
+    input_bytes: 136,
+    output: '{}',
+    output_bytes: 195,
+    function_id: '34236fa9-42f5-4bb6-adaf-956e12fff0b0',
+    logs: '',
+    fuel_consumed: 458206,
+  },
+  event_type: 'function_run',
+  cursor: '2024-05-31T15:29:47.291530Z',
+  status: 'success',
+  log_timestamp: '2024-05-31T15:29:46.741270Z',
+  identifier: 'abc123',
+}
+
+describe('selectFunctionRun', () => {
+  test('returns run if user selects one', async () => {
+    // Given
+    const runs = [RUN1, RUN2]
+    vi.mocked(renderAutocompletePrompt).mockResolvedValue(RUN2)
+
+    // When
+    const got = await selectFunctionRunPrompt(runs)
+
+    // Then
+    expect(got).toEqual(RUN2)
+    expect(renderAutocompletePrompt).toHaveBeenCalledWith({
+      message: 'Which function run would you like to replay locally?',
+      choices: [
+        {label: `${RUN1.log_timestamp} (${RUN1.status}) - ${RUN1.identifier}`, value: RUN1},
+        {label: `${RUN2.log_timestamp} (${RUN2.status}) - ${RUN2.identifier}`, value: RUN2},
+      ],
+    })
+  })
+
+  test('returns undefined if no runs', async () => {
+    // Given
+    const runs: FunctionRunData[] = []
+
+    // When
+    const got = await selectFunctionRunPrompt(runs)
+
+    // Then
+    expect(got).toEqual(undefined)
+  })
+})

packages/app/src/cli/prompts/function/replay.ts

@@ -0,0 +1,20 @@
+import {FunctionRunData} from '../../services/function/replay.js'
+import {renderAutocompletePrompt} from '@shopify/cli-kit/node/ui'
+
+export async function selectFunctionRunPrompt(functionRuns: FunctionRunData[]): Promise<FunctionRunData | undefined> {
+  if (functionRuns.length === 0) return undefined
+  const toAnswer = (functionRun: FunctionRunData) => {
+    return {
+      label: `${functionRun.log_timestamp} (${functionRun.status}) - ${functionRun.identifier}`,
+      value: functionRun,
+    }
+  }
+
+  const functionRunsList = functionRuns.map(toAnswer)
+
+  const selectedRun = await renderAutocompletePrompt({
+    message: 'Which function run would you like to replay locally?',
+    choices: functionRunsList,
+  })
+  return selectedRun
+}

packages/app/src/cli/services/app-logs/write-app-logs.test.ts

@@ -29,14 +29,14 @@ describe('writeAppLogsToFile', () => {
     const logData = expectedLogDataFromAppEvent(APP_LOG)
 
     // determine the fileName and path
-    const fileName = `app_logs_${APP_LOG.log_timestamp}.json`
+    const fileName = '20240522_150641_827Z'
     const path = joinPath(API_KEY, fileName)
 
     // When
     await writeAppLogsToFile({appLog: APP_LOG, apiKey: API_KEY, stdout})
 
     // Then
-    expect(writeLog).toHaveBeenCalledWith(path, logData)
+    expect(writeLog).toHaveBeenCalledWith(expect.stringContaining(path), logData)
     expect(stdout.write).toHaveBeenCalledWith(expect.stringContaining('Log: '))
   })
 

packages/app/src/cli/services/app-logs/write-app-logs.ts

@@ -1,7 +1,7 @@
 import {AppEventData} from './poll-app-logs.js'
 import {joinPath} from '@shopify/cli-kit/node/path'
 import {writeLog, getLogsDir} from '@shopify/cli-kit/node/logs'
-
+import {randomUUID} from '@shopify/cli-kit/node/crypto'
 import {Writable} from 'stream'
 
 export const writeAppLogsToFile = async ({
@@ -13,9 +13,12 @@ export const writeAppLogsToFile = async ({
   apiKey: string
   stdout: Writable
 }) => {
-  const fileName = `app_logs_${appLog.log_timestamp}.json`
+  const identifier = randomUUID().substring(0, 6)
+
+  const formattedTimestamp = formatTimestampToFilename(appLog.log_timestamp)
+  const fileName = `${formattedTimestamp}_${identifier}.json`
   const path = joinPath(apiKey, fileName)
-  const fullOutputPath = joinPath(getLogsDir, path)
+  const fullOutputPath = joinPath(getLogsDir(), path)
 
   try {
     const toSaveData = {
@@ -32,3 +35,15 @@ export const writeAppLogsToFile = async ({
     throw error
   }
 }
+
+function formatTimestampToFilename(logTimestamp: string): string {
+  const date = new Date(logTimestamp)
+  const year = date.getUTCFullYear()
+  const month = (date.getUTCMonth() + 1).toString().padStart(2, '0')
+  const day = date.getUTCDate().toString().padStart(2, '0')
+  const hours = date.getUTCHours().toString().padStart(2, '0')
+  const minutes = date.getUTCMinutes().toString().padStart(2, '0')
+  const seconds = date.getUTCSeconds().toString().padStart(2, '0')
+  const milliseconds = date.getUTCMilliseconds().toString().padStart(3, '0')
+  return `${year}${month}${day}_${hours}${minutes}${seconds}_${milliseconds}Z`
+}