How to debug React/Polaris app in admin

App Bridge
,
1

I’ve been struggling with this for a while now, and really hope someone has an (up to date) answer to this.

Using the cli I’ve created a simple React app. The app is installed in my development store and after starting my testserver using npm run dev I can visit the app in my store. So far so good.

However, during development finding the causes of errors has been a nightmare. I can see errors in the browser’s console, and I can see server side issues in the terminal in VSCode, but because the app runs in an iFrame I can’t seem to attach a debugger or run the React profiler from the browser extension to easily get to the root of problems.

The docs don’t really provide any more information than just the initial setup of your app. They don’t go into actual debugging (they even still mention the whole ngrok tunneling setup which I think has been deprecated and replaced with the automated cloudflare tunnel for a while now)

So my question is: as per 2025, what is the best way to develop, and more importantly debug, an app on Shopify…?

P.S. I’m also not sure what is the best topic to use for this on these forums; there doesn’t really seem to be a topic for ‘general app development’?

2

I can see errors in the browser’s console, and I can see server side issues in the terminal in VSCode

Can you paste your error you got?

3

This question is not about a specific error, but about how to properly debug within the Shopify framework.

4

You can debug the app anyway you debug your other apps. Shopify app is like any other app. Its just running in an iframe

If you want to run react devtools the chrome extension won’t work. You can use react-devtools installed as an npm package globally to run.

  • Install this package globally npm i -g react-devtools
  • Add <script src="http://localhost:8097"></script> in your app
  • run you dev server
  • in a new terminal tab run react-devtools
5

Have tried this myself and it doesn’t work.

6

I have tried this multiple times. Always works! (if you are talking about react-devtools)

7

edit:
I didn’t realize root.tsx gets loaded into the iFrame so you do have more control over the page than I thought. Problem now is that after adding the script to root.tsx I get some SSL errors, seems the browser tries to load the javascript over https, instead of http, en though inspecting the source shows http…

log
log962×165 18.6 KB

8

@Jasper @Luke I made a video on how to do this. Does this help?

1 Like
9

Thanks for that video @geon.

That was exactly what I was doing, but as mentioned my browser wouldn’t allow fetching unsecured http content within a http website. Not sure why it worked for you (but looking at the files in your editor you’re not using the default/current Remix template that Shopify provides, so your settings might be different).

However, I did get this to work by running react-devtools over ssl:

  1. Create a key:

openssl genpkey -algorithm RSA -out react-devtools-ssl-key.pem -pkeyopt rsa_keygen_bits:2048

  1. Create csr file from the key (just hit return a bunch of times to go with all the default values, they don’t matter as we’ll only use this locally for react-devtools):

openssl req -new -key react-devtools-ssl-key.pem -out react-devtools.csr

  1. Create a certificate:

openssl x509 -req -days 365 -in react-devtools.csr -signkey react-devtools-ssl-key.pem -out react-devtools-ssl-cert.pem

  1. Now when we start react-devtools, we first specify the KEY and CERT files to use, this will make react-devtools use ssl:

KEY=react-devtools-ssl-key.pem CERT=react-devtools-ssl-cert.pem react-devtools

  1. When the react-devtools window opens you’ll notice the script to embed now is at https://, instead of http://, so place <script src="https://localhost:8097"></script> in the <head> of root.tsx

  2. When loading your admin page it will still reject the script initially: In Firefox I needed to visit https://localhost:8097 directly and click the I accept the risk button to allow using the self-signed certificate. After this it would also work on the Shopify admin pages.

10

(but looking at the files in your editor you’re not using the default/current Remix template that Shopify provides, so your settings might be different).

Actually we are. Its a workspace containing some backend code and default shopify remix template app.

Either way glad you figured it out

1 Like