9 There’s a monkey in my browser!

 

This chapter covers

  • Applying chaos engineering to frontend code
  • Overriding browser JavaScript requests to inject failure, with no source code changes

The time has come for us to visit the weird and wonderful world of JavaScript (JS). Regardless of what stage of the love-hate relationship you two are at right now, there is no escaping JavaScript in one form or another. If you’re part of the 4.5 billion people using the internet, you’re almost certainly running JS, and the applications keep getting more and more sophisticated. If the recent explosion in popularity of frameworks for building rich frontends, like React (https://github.com/facebook/react) and Vue.js (https://github.com/vuejs/vue) is anything to go by, it doesn’t look like that situation is about to change.

The ubiquitous nature of JavaScript makes for an interesting angle for chaos engineering experiments. On top of the layers covered in the previous chapters (from the infrastructure level to the application level), there is another layer where failure can occur (and therefore can be injected): the frontend JavaScript. It’s the proverbial cherry on the equally proverbial cake.

9.1 Scenario

9.1.1 Pgweb

9.1.2 Pgweb implementation details

9.2 Experiment 1: Adding latency

9.2.1 Experiment 1 plan

9.2.2 Experiment 1 steady state

9.2.3 Experiment 1 implementation

9.2.4 Experiment 1 run

9.3 Experiment 2: Adding failure

9.3.1 Experiment 2 implementation

9.3.2 Experiment 2 run

9.4 Other good-to-know topics

9.4.1 Fetch API

9.4.2 Throttling

9.4.3 Tooling: Greasemonkey and Tampermonkey

Summary