Extension issues on production store that are not occurring on development store

Extensions
1

Hi everyone.

I have a UI extension which is embedded into POS. This extension already has a live build in production which functions as intended, and an upcoming release branch which looked ready to go live.

The main entry point is a smart grid tile which presents the home.modal.render target. This is currently working fine in the live prod.

All testing was passed and checklists completed for the upcoming release, so I pushed to production and tested it’s functionality using a merchant’s store which I have collab access for.

Here is the where the issue I am having came up.

Tapping the smart grid tile will present the modal as intended once with all functionality. But when the user closes the modal and subsequently re-opens it, the app will stall and then crash (with the infamous "re-install or repair extention dialog).

This does not occur on the development build, which has me completely baffled.

Further adding to my confusion, I was able to get the development preview (which works on my dev store) to load on the merchant’s live store, so that there were two versions of my tile on the smart grid; one live tile deployed through cli shopify app deploy, and the other being the dev preview through shopify app dev.

The dev tile would work continuously, and the live tile would crash the second time it opened the modal.

They have identical code, the only difference is how they were deployed to the store, which leads me to believe there is something simple that I am missing.

Any assistance is immensely appreciated. I’m hoping this is something someone else has run into before because I am pulling my hair out lol. To make it worse, for me to troubleshoot why the live build does not work, I have to wait until after my users have closed up for the day, at which point i have begin blindly troubleshooting (blindly, because there is no console to monitor).

Are there any key differences between the way Shopify delivers dev previews vs live builds released with CLI shopify app deploy that could be causing this?

All of my code is available upon request.

Api version - 2024-10
Ext type - React UI extension embedded in POS
Ext targets - home.tile, home.modal

Other info that may be helpful:

  • Happens regardless of the cart state (has items, has customer, or both/neither).

  • The extension does reference the customer through useApi (fetching cart.subscribable.initial), however as mentioned above, it will crash regardless of the cart’s state.

  • Between the latest (working) prod release, and this upcoming release with the issues, there was some state added to the root of the modal component with useState. I dont know if this would be the cause though, because I dont have issues on the dev preview.

  • All extension targets, scopes, and capabilities in tomls are unchanged between my unstable release and the currently functioning production build.

  • The device I have the problems on is the same device I used during development (which works)

Thank you in advance for any help.

2

Hi just a couple questions:

  • What type of device are you using?
  • What version of the POS are you seeing this on?
  • Does force restarting POS change the interaction? This means killing the app and starting it again.
  • Do any error messages get display through the browser debugger? Guide for this is here

Victor

3

Hi Victor, sorry for the delayed response. Was a late night debugging.

I got to the root of the issue however the perplexing part is that I am still unsure on why it only happens in production.

To answer your questions:

  • Android Galaxy S10; Android 12;
  • POS 9.29.2
  • force restarting was actually the only way to replicate the issue. The modal would load once, and then the next time it was called, it would enter a loading loop until the extension crashed, which prompted a retry button. Upon pressing this retry button, the extension would begin working until the next time the smart grid environment was refreshed (i.e restarting pos or processing a transaction)
  • because the issue was only present on production, it was not possible to monitor via console (unless there is a way to do this on a live merchant store, i was under the impression only development previews were exposed to the debugging console)

The root cause of the issue was actually made during refractoring, where a useEffect statement had it’s dependency swapped for an invalid hook.

While this explains the extension crashing, it does not explain the absence of any runtime error on the dev preview, while the identical production build would have a critical failure.