Log Production Errors in Your React-Redux App and Reproduce Them on Development

Take advantage of the redux single application state tree and log user errors with the full application state. Make your single page applications more reliable and easier to maintain.

Don’t Forget about the Frontend

Web applications are increasingly frontend-based thanks to the speedy growth of frameworks such as Ember.js and libraries such as React. I think that every backend developer is using some kind of error reporting tool, like Rollbar or Sentry - but have you thought about integrating these tools into your JavaScript stack?

If you are using Redux, you can take advantage of its single application state tree. Let me introduce you to redux-rollbar-middleware. If an error occurs, this tool will automatically log your full application state and action name with its params to the cloud. Then, you can instantly reproduce the very same situation your user had while facing the error on your development station. Pretty cool, huh?

How Is Redux-rollbar-middleware Built?

Redux-rollbar-middleware is served as middleware to redux. Middlewares, put simply, are plain functions that are executed when the new redux action happens, accept a next function as params, allow some operations to be performed and eventually execute and return the passed next. I take advantage of this simple mechanism by running try { ... } catch { ... } around next execution.

If any error happens during the execution, either in the reducer or rendering the components (it is a synchronous chain of executions), my catch block will execute. Redux-rollbar-middleware will then read the full application state, stringify it to JSON and send it to Rollbar with an exception object. A very simple, yet powerful mechanism that significantly improves maintaining the application.

Fun Facts

Want to know some fun facts about the development process? I created this open source in less than 6 hours during Netguru’s team retreat hackathon. It has basically 46 lines of code, but I still consider it to be one of the most important dependencies that you should include in your React-Redux app while using Rollbar.

Using Ember.js? Want to know more about how you can embrace Rollbar in your Ember.js application? Check out my blog post about our deployment process for Ember applications, use it and take advantage of ember-cli-deploy-rollbar which I created a few months ago!