Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

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.

About

Using FullStory custom events to record Redux state using middleware.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages