
Ask HN: How to perform external monitoring of single-page web apps? - cobbzilla
How do you perform external monitoring of your single-page web app?<p>We&#x27;ve recently published a single-page app using the ReactJS framework. Now that it&#x27;s live, we would like to add some external monitoring to ensure it is always reachable and functioning properly.<p>With a commonly used external monitoring service (Pingdom), I created a simple &quot;transaction&quot; check: login, then list some things, then verify that the list of things is not empty.<p>But there&#x27;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&#x27;t run a JavaScript engine that would update the DOM appropriately.<p>What kinds of newer&#x2F;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 <i>not do</i>.<p>I suppose we could &quot;roll our own&quot; with phantomjs or something, but if possible I&#x27;d prefer to use a third-party service and avoid some of the build&#x2F;maintenance overhead of an in-house solution.
======
tracker1
I 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)

