vidit-sh/redux-sentry-middleware

[BUG] No issues being dispatched to Sentry

Closed this issue · 4 comments

I'm currently migrating from raven-for-redux and I'm having some issues.

Initially I searched the Issues and found this. Follwing the threads instructions, I tried to move my setup into a separated sentry.js file which would be loaded first

import * as Sentry from '@sentry/browser';
Sentry.init({
  dsn: '<dsn>',
  beforeSend(event) {
    console.log('beforeSend', event);
    return event;
  }
});

export default Sentry;

Which is rendered in my top-level index.js

import React from 'react';
import ReactDOM from 'react-dom';
// import * as serviceWorker from './serviceWorker';
import './sentry';
import Root from './root';
ReactDOM.render(<Root />, document.getElementById('root'));

In my store.js file I have configured and injected the reporting middleware

import Sentry from '../../sentry';

Sentry.captureException(new Error('Sentry is working'));

const reportingMiddleware = createSentryMiddleware(Sentry, {
  // https://github.com/vidit-sh/redux-sentry-middleware#options
  stateTransformer: state => {
    // Don't include state in Sentry report
    console.log('[RM] stateTransformer');
    return undefined;
  },
  filterBreadcrumbActions: action => {
    // Only include "SENTRY_SEND" events, **AND POSSIBLY SOME PREAMBLE EVENTS**
    console.log('[RM] filterBreadcrumbActions');
    return true;
  },
  getUserContext: state => {
    // Add information about the User to the report
    const userContext = SentrySelector(state);
    console.log('[RM] getUserContext');
    return userContext;
  },
  breadcrumbDataFromAction: action => {
    console.log('[RM] breadcrumbDataFromAction');
    return action;
  },
  actionTransformer: action => {
    console.log('[RM] actionTransformer');
    return action;
  },
  // breadcrumbCategory: "redux-action"
  getTags: state => {
    console.log('[RM] getTags');
    return undefined;
  },
  breadcrumbMessageFromAction: action => {
    console.log('[RM] breadcrumbMessageFromAction');
    return action.type;
  }
});

// .....

let middlewares = [routerMiddleware, sagaMiddleware, reportingMiddleware];
const enhancer = composeEnhancers(applyMiddleware(...middlewares));

export default function configureStore(initialState = {}) {
  store = createInjectSagasStore(
    { defaultSagas: sagas },
    {
      ...reducers,
      router: connectRouter(history)
    },
    initialState,
    enhancer
  );
  return store;
}

In my console, I can see a single trigger of "beforeSend" for the manual invocation of Sentry Sentry.captureException(new Error('Sentry is working'));

I also see events for "filterBreadcrumbActions", "breadcrumbDataFromAction" and "breadcrumbMessageFromAction" but I never see any other events and nothing ever gets sent to sentry.

Please help me to understand what I'm doing incorrectly

I've dug a little deeper, and it seems as far as I can tell the Sentry.addBreadcrumb is being called, but the scope.addEventProcessor is never called, and the event is never submitted to Sentry

@thehig at which lever are you creating your store/ importing your store.js?

Ok, update time.

Number 1, I know why my data wasn't making it to Sentry. I was never calling 'Sentry.captureException'. I was getting confused with this library and the redux/raven/logrocket integration I tried a while ago and I "blanked" that this library is exclusively just adding Breadcrumbs to the Sentry report and does not by itself trigger Sentry.

Now that I have resolved the above, I am recieving Error reports in Sentry and they are 'supported' by lots of Breadcrumbs. 👍

Number 2, based on your question I checked where I was init'ing Sentry vs init'ing my store, and sure enough once I reorganised my imports, the scope.addEventProcessor started triggering. The only thing that I have yet to get working is the getUserContext.

I can see in the Network panel that the information is being included in the extras field, however I cannot see this anywhere in my Sentry dashboard.

If you'd like I can try and make some improvements to the documentation and submit a PR to help avoid this kind of scenario in the future

Yep, my users object was just too deep/complex/nested. Resolved that and everything is ticketyboo. 🤦‍♂