If you’re a client-side developer, you’ve probably heard of Redux, a JavaScript library that helps manage application state in complex applications. It has become increasingly popular since its introduction in 2015, especially among React developers.

Redux can be pretty tricky to understand, but it works something like this:

your entire application state is saved in a single object called a store

you dispatch actions on the store to describe state changes (e.g. ADD_ROW)

you implement functions called reducers to transform the state of your store as a result of an action

Want to learn more about Redux? We recommend watching the free “Learn Redux” video series.

Redux and Logging

Architecting your application this way has a handful of benefits, but what makes it particularly nice is how it impacts logging and crash reporting. Specifically, Redux makes it easy to know:

the state of your app at the time of the crash (via the store)

the action(s) that preceded the crash

If you are working on a Redux app, it’s possible to write middleware to automatically capture these values from your application at crash-time so you have more detail for JavaScript error tracking. “Middleware” sounds intimidating, but it’s just a function that is registered with Redux to be invoked as an action is dispatched.

Below is an example middleware function, crashReporter. When registered with Redux, it is invoked every time an action is triggered.

Redux and Sentry

If you are a Redux and Sentry user, this middleware already exists via a project named raven-for-redux, available via npm:

npm install--save raven-for-redux

Like the example from earlier, it is initialized via applyMiddleware when creating your store:

importRavenfrom"raven-js";// Or, you might already have this as `window.Raven`.import{createStore,applyMiddleware}from"redux";importcreateRavenMiddlewarefrom"raven-for-redux";import{reducer}from"./myReducer";Raven.config("your-sentry-dsn").install();conststore=createStore(reducer,applyMiddleware(createRavenMiddleware(Raven)));

_NOTE: RavenMiddleware should be the first argument passed to applyMiddleware, ahead of other middleware like Redux Thunk.

Besides just capturing errors, raven-for-redux does two powerful things:

attaches the contents of your Redux store and your last dispatched action as extra data

An example of extra data as it appears in Sentry:

Wrapping up

If you’re using Redux, you owe it to yourself to start logging rich application errors using middleware. If you’re a Sentry user, this is really easy via raven-for-redux. However you choose to track errors, there’s no better time than now to get started.

Sentry provides open source error tracking that shows you every crash in your stack as it happens, with the details needed to prioritize, identify, reproduce, and fix each issue. It also gives you information your support team can use to reach out to and help those affected and tools that let users send you feedback for peace of mind.

Each month we process billions of exceptions from the most popular products on the internet.