mcanthony/fluxrecorder

Record and replay actions for the Flux Dispatcher

FluxRecorder: Live Action Replay

A proof of concept to record and replay actions for Facebook's Flux Dispatcher

Inspired by Jeremy Morrell's JSConf UY presentation: Those who forget the past.

Background and explanation here: Replaying bugs with Flux

Usage:

var AppDispatcher = require('./dispatcher'); // reference to you Flux Dispatcher instance
var FluxRecorder = require('./flux-recorder'); // the flux-recorder.js from this project
var recorder = new FluxRecorder(AppDispatcher); // create a new recorder instance
recorder.startRecording(); // listen to and save actions
recorder.listenToHotKeys(); // enable prompts: ALT-SHIFT-C to copy and ALT-SHIFT-P to replay

Live demo of the Flux Chat App with recording here. (Always start with a fresh state (so refresh) before replaying actions!)

Pointers

1. Turn off your API-communication before replay (all incoming data should be in the actions already)
2. Make sure all application-state changes go through actions and the dispatcher
3. Make sure the starting point for both recording and replay is an 'empty' state
4. When using React Router, use it the flux way (with actions and a RouterStore): https://github.com/rackt/react-router/blob/master/docs/guides/flux.md#accessing-route-and-params-from-action-creators
5. Obfuscate any sensitive data when using this with real users

npm

This is a proof of concept. Will release a future version if there is enough interest. Contributions and feedback very welcome in GitHub issues.