4 ms·
Ask HN: How to perform external monitoring of single-page web apps?
How do you perform external monitoring of your single-page web app?
We've recently published a single-page app using the ReactJS framework. Now that it's live, we would like to add some external monitoring to ensure it is always reachable and functioning properly.
With a commonly used external monitoring service (Pingdom), I created a simple "transaction" check: login, then list some things, then verify that the list of things is not empty.
But there's a problem: the login does not generate a page refresh, but instead simply manipulates the DOM to redraw parts of the screen. Pingdom is confused by this; the login action succeeds but the list action fails, because Pingdom doesn't run a JavaScript engine that would update the DOM appropriately.
What kinds of newer/alternative services are out there for external monitoring of a single-page webapp? It seems the existing solutions require full-page reloads at certain points, which is something most single-page apps are designed explicitly to not do.
I suppose we could "roll our own" with phantomjs or something, but if possible I'd prefer to use a third-party service and avoid some of the build/maintenance overhead of an in-house solution.
- tracker1 10y agoI would suggest having it check 2 URLs, the first for the base content/html to make certain it renders from the server[0], and the second being a health/ping of your UI's API resource[1] In the end, an SPA is a combination of its' components, which means you need to test those API component resources. I find that there are three things that should come at the very start of any application... 1) error state/handling, 2) authentication+roles and 3) feature flagging. Regarding error state/handling are procedures and definitions of how to pass/return/handle error conditions, retries etc. There's a reason node-style callbacks put error first, it makes that the default, first thing to check. APIs and logging should also account for this... You should also update your state based on certain error conditions in terms of health check. Validate input and return proper 4xx responses, errors as 5xx should be resolved or triaged, and reflected in your health-check. User authentication and roles can be slightly deferred if you have a well defined interface for control of how to access/use said roles... The third part being how to define and determine what features are flagged/enabled for what users and in what environments. If you do the above, and have proper conditional handling, you should be able to cover the rest as suggested. [0] https://www.foo.com/ https://www.foo.com/ [1] https://api.foo.com/health-check https://api.foo.com/health-check