Record Redux Demo

You can use FullStory custom events to record Redux state with middleware.

This example is borrowed from https://github.com/reduxjs/redux/tree/master/examples/counter-vanilla.

More information about Redux middleware: https://redux.js.org/advanced/middleware.

What this is demonstrating

This is what the site looks like (index.html): Clicking the "BOOM!" button will invoke the boom() function via the Redux reducer:

// Redux reducer
function counter(state, action) {
  if (typeof state === 'undefined') {
    return 0;
  }

  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    case 'BOOM':
      boom();
    default:
      return state;
  }
}

This causes a reference error to be thrown (since e is not defined anywhere).

// example error
function boom() {
  var thisIsaReferenceError = e;
}

A middleware function called crashReporter() uses FS.event() to record errors thrown from reducers:

// middleware for capturing errors from https://redux.js.org/advanced/middleware#the-final-approach
const crashReporter = store => next => action => {
  try {
    return next(action);
  } catch (err) {
    // FullStory custom event
    // https://help.fullstory.com/develop-js/363565-fs-event-api-sending-custom-event-data-into-fullstory
    FS.event('Redux error', {
      error: {
        name: err.name,
        message: err.message,
        fileName: err.fileName,
        lineNumber: err.lineNumber,
        stack: err.stack,
      },
      counter: store.getState(), //NOTE: this could be a state object, strip out any sensitive fields first
    });
    throw err;
  }
};

// apply middleware when creating the Redux store
const store = Redux.createStore(counter, Redux.applyMiddleware(crashReporter));

Searching in FullStory

Once Redux error custom events are flowing into FullStory, they can be used to search for sessions:

Viewing a session

Run this demo on your local environment

npm install
npm run serve

Please make sure that you replace window['_fs_org'] = 'YOUR ORG ID HERE'; in the FullStory snippet with your actual Org Id. You can find your Org Id in the sample snippet provided on the FullStory settings page: https://help.fullstory.com/using/recording-snippet.