Having a weird issue with some dashboards where there’s a 50/50 chance data doesn’t load on the page. Refreshing can fix it but it’s just been an annoyance to my users. I’m really stumped on what could be causing it but when it doesn’t load, I get some console errors that values in DashboardBlock.input.ctx are missing, which must be what’s stopping the widgets from loading.
The main experience page is using a workflow to add the context variables to the dashboard page, could it be an issue with that? Let me know if I can give someone access to take a look, thanks.
Hey @tedbyron,
I’ll DM you my email address to invite to your org so I can take a look.
I do believe the empty blocks are related to the console errors. Your code is accessing DashboardBlock.input.ctx from the catch-all change event. Depending on what event caused the change event, it appears as though sometimes ctx is available and sometimes it is not.
The simplest solution is to check for the existence of DashboardBlock.input.ctx before using it. There should be another event fired when those values become available and your code will be called again.
Another engineer looked at the code at caught that you are also calling the problematic function on the DOMContentLoaded event. This may also be the cause of the issue. When that event fires, the platform may not have initialized the DashboardBlock object yet.
The same solution still applies (wrap the usage of the ctx object with checks before usage).
I tried that with something like
const i = setInterval(() => {
if (DashboardBlock.input.ctx) {
getData()
clearInterval(i)
}
}, 100)
but it didn’t work, the DashboardBlock.input.ctx never gets set sometimes.
That’s definitely interesting. We’ll see if we can reproduce the issue.
So now the issue appears to be related to the other console error:
Unexpected end of JSON input
This error is being thrown by the platform’s code that handles all the DashboardBlock stuff. It looks like your data table library is posting messages that bubble up to our code, which misinterprets them as internal events. This causes an exception which halts JavaScript execution.
I don’t see an immediate workaround at this time (it doesn’t look like you can disable events in your data table). Looks like we’ll have to fix our code to expect and ignore events that we don’t care about.
This was a great find. Thanks for helping track this down.
Thanks! I noticed that error as well in the console but wasn’t sure where it was actually occurring because of the iframe stuff
It looks like you’ve patched the ctx usage. I can no longer reproduce the dashboard blocks coming up blank. The “JSON” error shouldn’t prevent other events from firing. We’ll certainly fix that bug, but are you still seeing the issue?
I’m getting the issue on chromium-based browsers now but not firefox, I’ve been trying to find some solution from the frontend
Hmm, OK. I’m using Chrome and have been refreshing your dashboard. Haven’t seen a blank one in a while. It was very easy to hit yesterday.
Ah maybe chrome works, I was testing in Edge and my coworker got the issue as well in Brave
When the issue is seen, are there errors in the console?
key is from the dashboard context variable, but it also has that data tables error
Ok, thanks. We wouldn’t expect the “JSON” error to prevent dashboard blocks from loading. That “key” error can since that exception will stop your code. I saw you patched at least one block to check for the existence of the context variable before using it. It looks like there are others. I would recommend patching those others.
We are still investigating on our end. On the surface, there doesn’t appear to be a scenario in our code where input.ctx should be blank at any time. Your issue certainly proves that wrong, but we haven’t identified it yet.
Any update on this? Thanks for your help
We have reproduced that input.ctx can sometimes be an empty object on the first event. In our testing, another event has always immediately fired with a populated value.
Your block is getting stuck because you are setting a flag that prevents overlapping requests on those events. Since your code throws an exception when input.ctx is empty, the flag never resets and all future events are blocked by that flag. The flag to prevent overlapping requests is a good idea. You just need error handling around usage of input. If it’s invalid, the flag needs to be reset so the next attempt can go through.
We have filed a ticket to investigate why input.ctx is sometimes empty for the first event. Regardless, I certainly still recommend surrounding all usage of input data with validity checks.
Thanks, I’ll make sure to add those checks in all the blocks
It seems to have worked for one project but not another project which is basically a clone of the first, I gave you access to the other project as well. Could you take a look and let me know what you think? Getting the same console error on both dashboards so I’m not sure why the other one is not working.
