How to debug a react plugin? (vars shows as undefined)

Hello,

I contribute (and use) this druid plugin. I have been trying to using Firefox and Chrome debugger to check/watch values but it always show me “undefined” for all the variables in the code. I tried adding a log here but that didn’t show up in the console either.

I do have the React extension installed and that didn’t help.

I wondering if there’s a new way to debug react based plugins or am I missing something? Any would would be greatly appreciated.

Thanks
-Raaka

Are you debugging on a production build of Grafana? I tried to do some React profiling a while and found that I needed to run the dev build of Grafana for it to work.

Thanks for you response!

Hmm, I think yes. I did try to do a dev build but the build itself failed. One interesting things was that in Chrome if I hover over the vars, I can see the values but still can’t watch them.

For me the following resolved the issue I was having with building a dev build. My entire dev stack is containerized so maybe some issue due to that but the following resolved it for me:

  • Build using yarn dev
  • Sign the plugin (at times the env var to ignore signing doesn’t work)
  • Reload plugin (grafana)
  • You can watch and see other vars in code

Sometime I had to docker-compose up && down too. Once you are in dev mode, you can just yarn dev --watch and you won’t have to do any of the above steps.

I also added GF_DEFAULT_APP_MODE=development to grafana config but that doesn’t do what I wanted it to do i.e. to be able to watch vars in Grafana internal.