Zabbix web steps for Angular single page app

slartibartfast asked:

I need to monitor a single page app built using AngularJS, which internally uses ui-view to dynamically construct the content depending on the application state.

In the most basic state, the application displays the welcome page – but significantly – only after AngularJS has bootstrapped and set the appropriate view. Until that happens the DOM has no relevant content, only placeholders for the elements that will eventually get replaced by ui-view.

The response returned by the Zabbix GET request contains only the placeholders and not the content I need to check for, so even though the app is working as expected, Zabbix does not see the content.

I assume Zabbix isn’t processing the Javascript and building the representation of the DOM. I’ve set the UA string to that of an actual browser, just in case this would somehow force it to process the JS, but to no avail.

Is this possible using Zabbix?

My answer:

No, and it’s not possible with any other monitoring system I’m aware of either. They simply download a URL and check it for specific headers or content. They do not support JavaScript.

This is one of the many down sides of building a single page app purely in JavaScript with something like AngularJS. It’s also the same reason why your page doesn’t rank very well or show the results you want in Google.

There are various ways of dealing with this in your application, all of which involve rendering the content server-side. You’ll want to pick such a method and implement it. (Of course this doesn’t take care of the users who disable JavaScript, an ever-growing number post-Snowden, and the only thing you can do there is throw out everything you’ve written and try again.)

View the full question and answer on Server Fault.

Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.