Use attachments to store the Redux state

[renchap]

Problem Statement

When using the current Redux middleware, the latest state is set in the scope's context:

sentry-javascript/packages/react/src/redux.ts

Lines 105 to 111 in 99864fa

	/* Set latest state to scope */
	const transformedState = options.stateTransformer(newState);
	if (typeof transformedState !== 'undefined' && transformedState !== null) {
	scope.setContext('state', { state: { type: 'redux', value: transformedState } });
	} else {
	scope.setContext('state', null);
	}

This is a problem for big Redux states as the size of attributes in context is limited. But attachments are now added to the JS SDK, and are the perfect solution to this!

Solution Brainstorm

Instead of storing the state in the context, it should be an attachment as those can be much bigger. I have been using this in my app for some time and it work great:

Sentry.addGlobalEventProcessor((event, hint) => {
  hint.attachments = [
    {
      filename: "redux-state.json",
      data: JSON.stringify(store.getState(), undefined, 2),
    },
  ]

  return event
})

If you think this is a good idea, I can submit a PR for this. This could also be a middleware setting if you prefer, as well as the attachment name.

[AbhiPrasad]

Hey @renchap, sounds like a great idea! Please send over a PR and we can merge this in! Let's make it a middleware setting, so users can turn this off if they don't want it, but it being the default makes sense to me.

[malay44]

Hi there!

I've noticed that this issue has been inactive for quite some time. Is it still open and being considered for implementation? I'm interested in contributing and would happily take this up if it's still relevant. I'm working through the documentation to understand the project better.

Looking forward to your guidance on this!

[lforst]

@malay44 Feel free to give it a shot! We're not working on this at the moment.