Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Redux Integration in @sentry/react #2717

Merged
merged 14 commits into from Jul 14, 2020
Merged

Conversation

jennmueng
Copy link
Member

@jennmueng jennmueng commented Jul 2, 2020

Redux integration as an export from @sentry/react

Exports a createReduxEnhancer.

Usage would look something like:

import { createReduxEnhancer } from '@sentry/react';

const sentryReduxEnhancer = createReduxEnhancer({
  stateTransformer: state => {
    // Remove sensitive data and large state that is not needed for debugging
    return {
      ...state,
      auth: {
        ...state.auth,
        password: null,
      },
      giganticState: null,
    };
  },
  actionTransformer: action => {
    // Ignore actions with sesitive data
    if (action.type === "AUTH.SET_INPUT.PASSWORD") {
      return null;
    }
    return action;
  },
});

const store = createStore(
  persistedReducer,
  sentryReduxEnhancer
);

Notes:

Store Enhancer not Middleware

Instead of a redux middleware, this is a store enhancer.

Initially, this started out as middleware where the action was logged as a breadcrumb and a global event processor attached the state to each event.

The reason it was changed to an enhancer instead of middleware is that attaching the latest state to each event does not sync down to native events in @sentry/react-native, but setting it on on the scope does. Setting the scope on every call with a middleware would not be ideal as middleware are called BEFORE reducers update the latest state; if an event occurs then the state sent would be the previous state instead of the latest.

With the current store enhancer implementation, every time an action is dispatched, the latest state is processed by calling const newState = reducer(state, action) and the latest state is set on the scope. This implementation does have one downside we need to keep in mind is that it is pretty heavy, as state could be huge and taking it and setting it on the scope each time could be a heavy operation.

Normalization Depth

As we normalize events by default to a depth of 3, if the user wants to view their whole state tree they would have to increase the depth by setting normalizeDepth when they initialize the SDK.

Next Steps

  • Confirm Working in React Native.
  • Confirm working on browser React with a sample app.
  • Fix typescript issues.
  • Write tests.
  • Docs!

@getsentry-bot
Copy link
Contributor

getsentry-bot commented Jul 7, 2020

Messages
📖

@sentry/browser bundle gzip'ed minified size: (ES5: 17.1846 kB) (ES6: 16.2861 kB)

📖 ✅ TSLint passed

Generated by 🚫 dangerJS against 7c75f3b

@jennmueng jennmueng changed the title (WIP) feat: Redux Integration in @sentry/react feat: Redux Integration in @sentry/react Jul 7, 2020
@jennmueng jennmueng marked this pull request as ready for review July 7, 2020 12:07
packages/react/package.json Show resolved Hide resolved
packages/react/src/redux.ts Outdated Show resolved Hide resolved
packages/react/test/redux.test.ts Show resolved Hide resolved
CHANGELOG.md Outdated Show resolved Hide resolved
Copy link
Member

@AbhiPrasad AbhiPrasad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:shipit:

@jennmueng jennmueng merged commit d409dc6 into master Jul 14, 2020
@jennmueng jennmueng deleted the feat/redux-integration branch July 14, 2020 11:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants