A Feature Health Monitor for Web Apps
Fault Sense monitors the health of features in a web application by using real-time assertions to validate expectations of user behavior. When key metrics are down, you can quickly and accurately determine if a feature is broken for a subset of users.
No dependancies. No build. Add the following script tag to use Fault Sense.
<script
defer
id="fs-agent"
src="https://unpkg.com/faultsense@latest/dist/faultsense-agent.min.js"
data-release-label="demo-release-0.0.0"
data-collector-url="console"
data-debug="true"
/>Instrumentation that feels like magic
With a few simple HTML attributes, you can start validating critical workflows in your application.
Asserting State Updates
- The Incremement button shows how you can assert a portion of the UI is in an exact state, using a dynamic text-match.
- The decrement button shows how you can use a regular expression as a simple validation for UI state.
<div id="counter">Count: {count}</div>
<Button onClick={...}
fs-feature="Counter"
fs-assert="IncremenetCounter"
fs-trigger="click"
fs-assert-updated="#counter"
fs-assert-text-matches={`Count: ${count + 1}`}
>
Increment
</Button>
<Button onClick={...}
fs-feature="Counter"
fs-assert="DecremementCounter"
fs-trigger="click"
fs-assert-updated="#counter"
fs-assert-text-matches="Count: -?[0-9]+"
>
Decrement
</Button>Try it:
Count: 0
Asserting Network Responses
You can execute multiple assertions in parallel off a single trigger.
This example demonstates a UI state assertion in combination with a network assertion on the response status of the API call.
Finally, we are adding an assertion modifier to extend the timeout period for the assertion to resolve.
<Button onClick={loadPosts}
fs-feature="NetworkRequests"
fs-assert="api-load-posts"
fs-trigger="click"
fs-assert-updated="#results"
fs-assert-response-status="304"
fs-assert-timeout="2600"
>
Load Posts
</Button>Try it:
Click the button to load posts from JSONPlaceholder API