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


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.


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.

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.