Frontend Testing

Frontend Chaos Testing

Test your web application's resilience to network issues and API failures.

Metrics Collector

The FailSafe metrics collector is a lightweight JavaScript library that captures performance data from your web application during chaos experiments.

Installation

Add the collector script to your HTML:

<script src="https://failsafe.io/collector.js"></script>
<script>
  FailSafe.init({
    apiKey: 'fs_your_key',
    endpoint: 'http://localhost:8000',
    sampleRate: 1.0,  // 100% sampling
    debug: false
  });
</script>

Configuration Options

apiKey

Your FailSafe API key for authentication.

endpoint

FailSafe server URL. Default: http://localhost:8000

sampleRate

Percentage of sessions to collect (0.0 - 1.0). Default: 1.0

debug

Enable console logging for debugging. Default: false

Collected Metrics

The collector automatically captures:

Page load times and navigation timing
Core Web Vitals (LCP, CLS, INP)
XHR/Fetch request timing and errors
JavaScript errors and unhandled rejections
Resource loading performance

Web Vitals Explained

Core Web Vitals are Google's metrics for measuring user experience. FailSafe monitors these during experiments to understand how faults affect perceived performance.

LCP - Largest Contentful Paint

Measures how long it takes for the largest content element to become visible. This is typically a hero image, video, or large text block.

Good

< 2.5s

Needs Improvement

2.5s - 4s

Poor

> 4s

CLS - Cumulative Layout Shift

Visual Stability

Measures visual stability by tracking unexpected layout shifts. High CLS means elements are moving around, causing poor user experience.

Good

< 0.1

Needs Improvement

0.1 - 0.25

Poor

> 0.25

INP - Interaction to Next Paint

Interactivity

Measures responsiveness by tracking the time from user interaction (click, tap, keypress) to the next visual update. Replaced FID in March 2024.

Good

< 200ms

Needs Improvement

200ms - 500ms

Poor

> 500ms