Hi,
We occasionally see this error in our production logs coming from flexmonster _redrawToolbar call. We don't know exactly under which conditions this happens and we don't have a way to reproduce it. Does anyone have any ideas what might be happening ? Is this is a known issue ?
P.S. We are using angular flexmonster component and we don't do anything special with it, other than hiding some of the toolbar items like this.
const tabs = toolbar.getTabs();
toolbar.getTabs = () => {
// delete the tabs that we don't want
delete tabs[0]; // connect
delete tabs[1]; // open
delete tabs[2]; // save
// delete tabs[3]; // Preconfigured
delete tabs[4]; // divider
delete tabs[5]; // grid
delete tabs[6]; // charts
delete tabs[7]; // divider
// delete tabs[8]; // format
delete tabs[9]; // options
// delete tabs[10]; // fields
// delete tabs[11]; // divider
// delete tabs[12]; // fullscreen
return tabs;
};
Thanks
Hello!
Thank you for writing to us.
We haven't managed to reproduce the described issue on our side too.
Could you please provide us with a stack trace? It can greatly help us move on with the investigation and find the exception.
Looking forward to your response.
Regards,
Solomiia.
Hi
Yes, we can't repro either but somehow our customers seem to be running into this in production from time to time. And we actually got a few more today and also a new one about 'reading b4'. Here's the stack we got:
TypeError: Cannot read properties of null (reading 'length')
at c (webpack:///node_modules/flexmonster/flexmonster.full.js:2803:86)
at a.toolbarWrapper.appendChild(a.listWrapper);a.toolbar=document.createElement("ul");a.toolbar.setAttribute("role","menubar");a.toolbar.setAttribute("aria-orientation","horizontal");a.addClass(a.toolbarWrapper,"fm-toolbar-ui");a.toolbar.id="fm-toolbar";if (webpack:///node_modules/flexmonster/flexmonster.full.js:2801:480)
at _redrawToolbar (webpack:///node_modules/flexmonster/flexmonster.full.js:2807:350)
at invokeTask (webpack:///node_modules/zone.js/fesm2015/zone.js:406:30)
at onInvokeTask (webpack:///node_modules/@angular/core/fesm2020/core.mjs:25840:32)
at invokeTask (webpack:///node_modules/zone.js/fesm2015/zone.js:405:59)
at task._transitionTo (webpack:///node_modules/zone.js/fesm2015/zone.js:178:46)
at invokeTask (webpack:///node_modules/zone.js/fesm2015/zone.js:487:33)
at callback (webpack:///node_modules/zone.js/fesm2015/zone.js:1600:13)
at tasks.slice (webpack:///node_modules/zone.js/fesm2015/zone.js:1637:20)
TypeError: Cannot read properties of null (reading 'length')
at c (webpack:///node_modules/flexmonster/flexmonster.full.js:2803:86)
at a.toolbarWrapper.appendChild(a.listWrapper);a.toolbar=document.createElement("ul");a.toolbar.setAttribute("role","menubar");a.toolbar.setAttribute("aria-orientation","horizontal");a.addClass(a.toolbarWrapper,"fm-toolbar-ui");a.toolbar.id="fm-toolbar";if (webpack:///node_modules/flexmonster/flexmonster.full.js:2801:480)
at _redrawToolbar (webpack:///node_modules/flexmonster/flexmonster.full.js:2807:350)
at invokeTask (webpack:///node_modules/zone.js/fesm2015/zone.js:406:30)
at onInvokeTask (webpack:///node_modules/@angular/core/fesm2020/core.mjs:25840:32)
at invokeTask (webpack:///node_modules/zone.js/fesm2015/zone.js:405:59)
at task._transitionTo (webpack:///node_modules/zone.js/fesm2015/zone.js:178:46)
at invokeTask (webpack:///node_modules/zone.js/fesm2015/zone.js:487:33)
at callback (webpack:///node_modules/zone.js/fesm2015/zone.js:1600:13)
at tasks.slice (webpack:///node_modules/zone.js/fesm2015/zone.js:1637:20)
TypeError: Cannot read properties of null (reading 'b4')
at 1+"px";a.style.height=f.offsetHeight+"px";f.scrollLeft=f.scrollWidth;f.scrollTop=f.scrollHeight}Uta (webpack:///node_modules/flexmonster/flexmonster.full.js:99:133)
at 1+"px";a.style.height=f.offsetHeight+"px";f.scrollLeft=f.scrollWidth;f.scrollTop=f.scrollHeight}Uta (webpack:///node_modules/flexmonster/flexmonster.full.js:99:481)
at timer (webpack:///node_modules/zone.js/fesm2015/zone.js:2561:40)
at invokeTask (webpack:///node_modules/zone.js/fesm2015/zone.js:406:30)
at onInvokeTask (webpack:///node_modules/@angular/core/fesm2020/core.mjs:25840:32)
at invokeTask (webpack:///node_modules/zone.js/fesm2015/zone.js:405:59)
at task._transitionTo (webpack:///node_modules/zone.js/fesm2015/zone.js:178:46)
at invokeTask (webpack:///node_modules/zone.js/fesm2015/zone.js:487:33)
at invoke (webpack:///node_modules/zone.js/fesm2015/zone.js:476:47)
at function (webpack:///node_modules/zone.js/fesm2015/zone.js:2541:31)
Hello!
Thank you for providing us with the stack trace.
We recommend you update the component. Here is our guide for assistance: https://www.flexmonster.com/doc/updating-to-the-latest-version/.
If your major version is lower than 2.9, please, look through the migration guides: https://www.flexmonster.com/doc/migration-guide-from-2-8-to-2-9/.
Looking forward to your response.
Regards,
Solomiia.
Hello!
Hope you are having a great week.
Our team was wondering if you had a chance to update the component and check if the problem still exists.
Looking forward to your response.
Regards,
Solomiia
Hi.
Thanks for following up. We haven't pushed the latest version yet. We'll try to do so in our next release. It will take some time to know if the latest release fixes it or not though, since the problem occurs only sporadically (even as it stands now, we only get it once or twice per month)
Hello again!
Thank you for the explanation.
Your confirmation is valuable to our team, so we'll be waiting for the following updates on the case.
Please, feel free to ask if any further questions arise.
Best regards,
Solomiia
Hello,
I was able to consistently repro this issue and it exists even in the latest version. To duplicate this you'd need a SPA application in angular with a way to quickly leave a report via navigation to a different angular page (component):
At this point the error should appear. Further - from now on you won't be able to fullscreen a report without it blowing up with the same error.
Any ideas ?
P.S. In our component that contains flexmonster we make sure to dispose of it like so:
if (this.pivot) {
this.pivot.flexmonster.dispose();
}
But its as if flexmonster somehow holds on to resize events after going fullscreen even after being destroyed
Hello!
Thank you for the detailed description of how to reproduce the issue. It was very helpful.
We have managed to reproduce the described behavior on our side. Our development team will look closer at the case and provide you with a solution by the ETA on June 27th. We will notify you about the updates.
Feel free to contact us in case of any other questions.
Regards,
Solomiia
Hello!
Hope you are doing well.
We are glad to announce that the issue with redrawing the Toolbar was fixed.
This fix is provided in the 2.9.28 version of Flexmonster: https://www.flexmonster.com/release-notes/version-2-9-28/.
You are welcome to update the component. Check out our updating tutorial for guidance: https://www.flexmonster.com/doc/updating-to-the-latest-version/.
Please let us know if the fix works for you.
Best regards,
Solomiia
Hello!
Hope you are having a great week.
Our team is wondering if you had a chance to test the fix. Could you please let us know if it works for you?
Looking forward to hearing from you.
Regards,
Solomiia
Hello!
Hope you are doing well.
Just checking in to ask if the fix works well for you.
Looking forward to your feedback.
Regards,
Solomiia.
Hi. I think it is fixed now. It's been about a month that we released the new version and haven't seen those issues so far
Hello!
Thank you for getting back to us.
We are glad to hear that our fix worked well.
You are welcome to contact us in case of any other questions.
Kind regards,
Solomiia