[ShopifyVM] 'app logs' Show input query variables in output for FunctionRunLog

[mssalemi]

Part of: https://github.com/Shopify/script-service/issues/6233

We're enhancing the debugging experience for developers by providing visibility into the input query variables used during a function run.

WHY are these changes introduced?

This PR will add an input query variables section that will conditionally show based on if input query variables are used. Input query variables will be used when the values are specified in the toml.

WHAT is this pull request doing?

Add input query variables section to the app logs command:

I also added some visual improvements to make the output and input sections more clear for partners to view. And updated the ouput and input sections to match.

Changes: with improved styling

With coloring (also will need to update other sections - alternate idea)

and when no metafield is found:

How to test your changes?

From local cli, to your spin instance:

SHOPIFY_CLI_ENABLE_APP_LOG_POLLING=1  NODE_TLS_REJECT_UNAUTHORIZED=0 SPIN=1 SPIN_INSTANCE=68fh pnpm run shopify app logs --path=./efficient-capital-app

** replace spin id and app path

Post-release steps

• part of a CLI release
• potentially add change log indicating that the input query variables are now present in logs and has visual improvements
• use of colouring in text, I kept everything white in current commit, but use red text when metafield is not found.
• NOTE: might be worth splitting up logic for displaying FunctionRunLog and NetworkAccessResponseFromCacheLog, NetworkAccessRequestExecutedLog into separate files.

Measuring impact

How do we know this change was effective? Please choose one:

• [x] n/a - this doesn't need measurement, e.g. a linting rule or a bug-fix
• [x] Existing analytics will cater for this addition
• [ ] PR includes analytics changes to measure impact

Checklist

• [x] I've considered possible cross-platform impacts (Mac, Linux, Windows)
• [ ] I've considered possible documentation changes

[github-actions[bot]]

Thanks for your contribution!

Depending on what you are working on, you may want to request a review from a Shopify team:

• Themes: @shopify/advanced-edits
• UI extensions: @shopify/ui-extensions-cli
  • Checkout UI extensions: @shopify/checkout-ui-extensions-api-stewardship
• Hydrogen: @shopify/hydrogen
• Other: @shopify/app-inner-loop

[github-actions[bot]]

Coverage report

St.:grey_question:	Category	Percentage	Covered / Total
🟡	Statements	72.54% (+0.02% 🔼)	8413/11597
🟡	Branches	69.08% (+0.05% 🔼)	4129/5977
🟡	Functions	71.96% (-0.02% 🔻)	2199/3056
🟡	Lines	72.82% (+0.02% 🔼)	7957/10927

Show files with reduced coverage 🔻

St.:grey_question:	File	Statements	Branches	Functions	Lines
🟢	... / utils.ts	87.25% (-0.11% 🔻)	74.51% (+2.17% 🔼)	82.35% (-5.15% 🔻)	86.87% (-0.09% 🔻)
🟢	... / ConcurrentOutput.tsx	98.39% (-1.61% 🔻)	90.91% (-4.55% 🔻)	100%	98.33% (-1.67% 🔻)

Test suite run success

1925 tests passing in 873 suites.

Report generated by 🧪jest coverage report action from 7c39c9cfa4df6ca0470f8fe60ff75abf507cfb35

[github-actions[bot]]

We detected some changes at either packages/*/src or packages/cli-kit/assets/cli-ruby/** and there are no updates in the .changeset. If the changes are user-facing, run "pnpm changeset add" to track your changes and include them in the next release CHANGELOG.

[mssalemi]

Quick video if anyone wants to take a look at changes. Will rebase PR before merging.

[nickwesselman]

Thanks for the video @mssalemi! Things look good in app logs, how do they look in the JSON log file that you might open when using app dev?

[mssalemi]

Thanks for the video @mssalemi! Things look good in app logs, how do they look in the JSON log file that you might open when using app dev?

The variables get added to the payload in the logs:

  "payload": {
.....
    "inputQueryVariablesMetafieldValue": "{\"value\":\"42\"}",
    "inputQueryVariablesMetafieldNamespace": "meow",
    "inputQueryVariablesMetafieldKey": "key"
  }

perhaps we want to decode the the value 👀

[nickwesselman]

The variables get added to the payload in the logs:

  "payload": {
.....
    "inputQueryVariablesMetafieldValue": "{\"value\":\"42\"}",
    "inputQueryVariablesMetafieldNamespace": "meow",
    "inputQueryVariablesMetafieldKey": "key"
  }

Can we attempt to parse the value and output it as an object if successful?

[mssalemi]

Can we attempt to parse the value and output it as an object if successful?

Updated this so we the value is object instead of string, partners should be able to more easily read them.

[github-actions[bot]]

We detected some changes at packages/*/src and there are no updates in the .changeset. If the changes are user-facing, run "pnpm changeset add" to track your changes and include them in the next release CHANGELOG.

[mssalemi]

Apologies, setup up my new laptop and accidentally pushed from my personal account when rebasing this. Will fix this.