I am developing a custom table visualization. I am using a custom hook called useBlinkingCells, and for some reason, when I create a new table, I get the error “Cannot read properties of undefined (reading ‘pushEvent’)” (screenshot of the error below). I found that the error occurs specifically in this custom hook; when I remove it, the error disappears. What is the problem and how can I solve it?
Thank you in advance for your help! Here is the link to the repository with the code: GitHub - MaxymZakharkiv/Test1.
I didn’t follow through all the logic in your code but it is most likely you have a race condition e.g… trying to subscribe or unsubscribe to specific events before the objects are ready, or trying to access objects before they are ready.
as I side note. Don’t use direct general dom operations in your code. This will most likely cause side effects in your plugin and in Grafana itself and there are some (optional) security options in Grafana that will prevent your plugin from accessing elements outside of your panel rendering scope.
I commented the code with the dom operation, but the error did not disappear, I also investigated that the error appears if you first select a custom visualization, and then data from the datasource, if on the contrary the error disappears
I mentioned the dom operations as a problem for the plugin in general not the cause of your error.
investigated that the error appears if you first select a custom visualization, and then data from the datasource
This indicates a race condition or a lack of validation, where your panel code is assuming data is always present when is not. You should make sure to always validate the objects that come to your panel contain the data you need before looping objects or using their values.
you should take a look first at what a race condition is and what defensive programming (in terms of input validation and defensive checks).
For an example, imagine your panel is simply accessing the first series coming as props so you do a code like this:
function SimplePanel({ data: Props }) {
const frame = data.series[0];
// do something with frame
}
the problem with this code is that you are assuming: data is not undefiend and it is an object, data.series is not undefined, it is an array and it is populated with at least one item.
In javascript you can use things like optional chaining to better handle these cases:
function SimplePanel({ data: Props }) {
const frame = data?.series?.[0];
if (frame !== undefined){
// do something with frame
}
}
This second snippet is safer because you won’t be trying to access elements that don’t exist.
This is of course a very simple example, you can be for example, trying to access objects from @grafana/runtime before they are ready (though Grafana greatly prevent you from doing this), or trying to use APIs that can’t be used yet or in that specific moment.
What I recommend you to debug your hook if you don’t know where to start, is to start commenting pieces of your code (of course keeping it in working order) and see what part of the code you comment finally eliminates the error, like you did with removing the hook usage, but inside your hook.
once you identify which lines of code are causing the error, try to see if you are missing validations like this where you are trying to access objects or APIs that are not ready to use.
