Skip to content
Using FullStory custom events to record Redux state using middleware.
HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
README.md
index.html
package-lock.json
package.json

README.md

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): image 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: image

Viewing a session

image

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.

You can’t perform that action at this time.