UX Chaos Monkey

🎭 UX Chaos Monkey & Edge-Case Stress Testing

Thesis

A UI that only works with clean, predictable data is not production-ready. Real users will paste Russian Wikipedia articles into search fields, have 120-character names, and lose their internet connection at the worst possible moment.

The Chaos Monkey doesn't look for bugs — it engineers controlled catastrophes to prove the interface survives them. If it breaks in this controlled test, it will break in production.

When to Activate

Activate automatically when the user mentions:

• "stress test", "chaos test", "what happens when the data is weird"
• "text overflow", "layout breaks", "card breaks with long text"
• "extreme values", "edge case", "what if the name is very long"
• "network failure", "offline during", "what if it disconnects"
• "data injection", "fuzz test", "boundary test"

3-Protocol Execution System

Execute all 3 protocols in sequence. Never skip a protocol. Report all findings at the end as a unified Chaos Report.

─── PROTOCOL 1: TEXT EXPLOSION TEST

Objective: Prove that no text content — regardless of length or language — causes horizontal overflow, layout rupture, or obscured interactive elements.

1.1 — Identify Injection Targets

Scan the UI and flag every component that renders user-supplied or dynamic text:

1.2 — Text Bomb Library

Inject each of the following strings into every HIGH-risk target:

BOMB-A: German Compound Noun (45 chars)

Rechnungsabgrenzungsposten
Kraftfahrzeughaftpflichtversicherung
Donaudampfschifffahrtsgesellschaftskapitän

BOMB-B: Russian Inflected Word (20–24 chars)

достопримечательности
железнодорожный
непосредственно

BOMB-C: Finnish Agglutinative (58 chars)

lentokonesuihkuturbiinimoottoriapumekaanikkoaliupseeri

BOMB-D: Zero-Width / No-Break String (40 repeated chars — no natural word-break)

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
อาหารไทยอร่อยมากๆเลยนะครับ

BOMB-E: 300% Oversize Label

Submit Order Confirmation and Send Invoice to Primary Billing Contact and CC Secondary Approver

1.3 — Pass / Fail Criteria

For each injection, verify ALL of the following:

• Zero horizontal scroll introduced at any viewport width ≥ 320px
• text-overflow: ellipsis fires before overflow occurs
• Button/CTA remains clickable — not covered by overflowed sibling text
• Table cell does not push neighboring columns off-screen
• Line-clamp engages at correct max-line threshold
• word-break: break-word present on containers that cannot use ellipsis

1.4 — Auto-Fix Rules (Deterministic)

1. Single-line targets: overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
2. Multi-line targets: overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
3. Prose containers: word-break: break-word; overflow-wrap: anywhere;
4. Parent with no max-width: add max-width: 100%

─── PROTOCOL 2: DATA EXTREMES INJECTION

Objective: Prove that every numeric, monetary, date, name, and identifier field renders correctly at the absolute boundaries of valid input.

2.1 — Financial / Numeric Values

2.2 — User Identity / Name Fields

2.3 — Date / Time Edge Cases

2.4 — List / Table Extremes

• 0 items: Empty state with CTA shown
• 1 item: Singular label ("1 result" not "1 results")
• 10,000 items: Virtualization active — no page freeze
• 10,000 items filtered to 0: Filtered empty state (not first-use empty state)

─── PROTOCOL 3: FLAKY NETWORK STATE

Objective: Prove every network-dependent operation has defined, non-destructive behavior when the connection is degraded or lost.

3.1 — Network Failure Matrix

3.2 — Streaming-Specific Tests

1. Cut at first token: Spinner appears before stream starts
2. Cut mid-word: Broken character avoided; cursor/fade shown
3. Cut at 847 chars: "Continue" or "Retry" offered — not frozen spinner
4. No response for 10s: "Taking longer than expected... [Cancel] [Retry]"
5. Empty stream response: Empty state renders — not a blank message bubble

3.3 — Offline Queue Verification

• Queued count shown: "2 actions pending sync"
• FIFO execution on reconnect
• Duplicate-safe on rapid toggling
• Rollback-safe: failed queue item reverts UI and shows error

Chaos Report Format

## 🎭 Chaos Report — [Page / Component]
**Date:** [ISO]   **Skill:** ux-chaos-monkey v1.0.0

### Protocol 1: Text Explosion
| Target | Bomb | Result | Auto-Fixed? |
|---|---|---|---|
| Button "Submit" | BOMB-A | ❌ Overflow 320px | ✅ overflow:hidden |
| Table: User Name | BOMB-E | ✅ Pass | — |

### Protocol 2: Data Extremes
| Field | Value | Result | Action |
|---|---|---|---|
| Price | $999,999,999.99 | ❌ Card overflow | ✅ text-overflow added |
| Username | 120-char | ✅ Ellipsis correct | — |

### Protocol 3: Flaky Network
| Scenario | Result | Action |
|---|---|---|
| Offline mid-form | ✅ Data queued | — |
| 30s timeout | ❌ White screen | 🔴 Escalate |

### Summary
- ✅ PASS: [n]   🔧 AUTO-FIXED: [n]   🔴 ESCALATE: [n]

Completion Criteria

• All HIGH-risk text targets tested with all 5 BOMB categories
• All financial fields tested with full numeric edge-case set
• All date fields tested with boundary and invalid date inputs
• All 9 network failure scenarios covered
• Chaos Report generated with all findings documented
• Auto-fixable issues resolved and re-tested
• Escalations packaged with full context

Output

chaos-report-[date].md — unified 3-protocol test matrix with findings, fixes applied, and escalation packages.

Anti-patterns

• Testing only happy-path data (clean names, round numbers, fast connections)
• Treating null rendering as acceptable because "it rarely happens"
• Fixing overflow with overflow: hidden alone without checking content accessibility
• Stopping after the first failure — always run all scenarios before reporting
• Not re-testing after auto-fixes (fix may introduce new overflow elsewhere)