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

Grafana Plugin Development
1

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

2

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.

3

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.

4

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.

5

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