Testing frontend error handling is a pain.
You want to verify that your React/Vue app shows a nice "Retry" button when the API fails. Or you want to check if the Skeleton Loader looks good during a 10-second delay.
The traditional way: Open Chrome DevTools, toggle "Offline" mode. The problem: It kills the connection completely. You can't simulate a slow server that returns a specific HTTP 503 error code.
The other way: Use a system-wide proxy (like Charles). The problem: It breaks your Spotify, Slack, and Zoom calls while you test.
In this guide, I'll show you how to use FoxyProxy and Debuggo Chaos Proxy to inject network failures only into a specific browser tab, leaving the rest of your machine online.
Video Tutorial (1:57)
See the full setup in action:
youtube.com/watch?si=_ItP2sPSbkGy83KU&embeds_referring_euri=https%3A%2F%2Fdev.to%2F&source_ve_path=Mjg2NjQsMTY0NTA2&v=NbPPoqCv3mY&feature=youtu.be
The Stack
- FoxyProxy Standard: A browser extension (Chrome/Firefox) that routes traffic based on patterns.
- Chaos Proxy Debuggo: A cloud chaos proxy that adds delays and errors.
Step 1: Configure the Chaos Rule
Let's break the internet (selectively). In the Debuggo dashboard, I set up a rule for httpbin.org:
- Delay: 10 seconds (I really want to see that loading spinner).
- Status: 503 Service Unavailable.
- Probability: 50%.
Step 2: Set up FoxyProxy
Instead of configuring the proxy in MacOS System Settings (which affects the whole OS), we do it in the browser extension.
- Click Add New Proxy.
- Host: chaos-proxy.debuggo.app
- Port: 11997 (Your allocated port).
- Auth: Enter the username/password provided by the service.
Tip: You can set "URL Patterns" in FoxyProxy to only route traffic for your staging API (e.g., *api.staging.com*) through the chaos proxy.
Step 3: The Moment of Truth
Navigate to your target URL.
First load: You might see it load instantly. Why? Browsers are smart. They reuse existing TCP connections. Fix: Refresh the page or open a new tab to force a new connection through the proxy.
Second load:
- The browser tab spins... and spins... (The 10s delay works!).
- Finally, you see the 503 Error Page injected by the proxy.
Why do this?
This setup allows you to audit your UI's resilience:
- Infinite Scroll: Does the app crash if the "Load More" request times out?
- Form Submission: Does the "Submit" button re-enable if the server returns an error?
- Error Boundaries: Does your React Error Boundary actually catch the crash?
Chaos Engineering isn't just for backend infrastructure. Frontend developers need to verify that their UI allows users to recover gracefully from network glitches. Using a browser-scoped proxy is the least intrusive way to do it.
Try creating your first rule at chaos-proxy.debuggo.app.
