Redux middleware/integration for Sentry new browser module

redux-middleware-sentry.js

// https://github.com/captbaritone/raven-for-redux/issues/82#issuecomment-421440309

/**
Middleware
*/

import thunk from 'redux-thunk';
import { applyMiddleware, createStore, compose } from 'redux';
import { init, addBreadcrumb } from '@sentry/browser';

// Sentry middleware
 const sentryReporter = store => next => action => {
  addBreadcrumb({
    message: action.type,
    category: 'redux action',
    level: 'info',
    data: {
      payload: action.payload
    }
  });
  return next(action);
};

// Create the store with our Sentry middleware
const reduxStore = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(thunk, sentryReporter))
);

// Initialize Sentry
init({ dsn: '...' });

/**
Integration
*/

class ReduxSentryIntegration {
  constructor() {
    this.name = 'ReduxSentryIntegration';
  }

  install(reduxStore) {
    this.reduxStore = reduxStore;
    reduxStore.subscribe(this.handleStoreChange);
  }

  handleStoreChange = () => {
    const state = this.reduxStore.getState();
    // ... log things to Sentry
  };
}

// To add the ReduxSentryIntegration:
import { init } from '@sentry/browser';

const store = createStore(rootReducer, compose(applyMiddleware(thunk)));

init({
  dsn: '...'
  integrations: (integrations) => {
     integrations.push(new ReduxSentryIntegration(store));
     return integrations;
  }
});