Sentry middleware for Zustand

[Thanaen]

Problem Statement

Hello, Today, Sentry makes available a method to create a redux store enhancer easily, and thus log actions and values of a redux state. There is no equivalent for the Zustand library yet.

Solution Brainstorm

Do you think it would be possible to create, in the same philosophy, a middleware for the Zustand library (https://github.com/pmndrs/zustand) that would log the actions and the last value of the state?

According to the Zustand documentation, it seems that it is necessary to use middlewares for that (https://github.com/pmndrs/zustand/blob/main/docs/typescript.md#using-middlewares)

I'll try to tinker with one on my side, but having an "official" one would make me feel better 😄. It might not be necessary to integrate it as code in the sentry-javascript package, it could just be written in a wiki or documentation.

Thanks a lot in advance

[AbhiPrasad]

Hey, sounds like a great idea! I would first recommend making an unofficial one, we can help you review code and give feedback. After that gets stable we can think about how to move it into the monorepo :)

[Thanaen]

Here's my first attempt: https://gist.github.com/Thanaen/abfcc669f28765651f8e0ff59ea62527

I wasn't able to log actions for this first version, only the latest scope value is added in Sentry's scope context.

[AbhiPrasad]

Looks great @Thanaen. Having the latest scope value I think is the correct behaviour.

As per https://develop.sentry.dev/sdk/event-payloads/contexts/#state-context, we should probably make the state context call like so:

scope.setContext('state', { type: 'zustand', value: transformedState });

I just realized that our redux integration still uses the old way

https://github.com/getsentry/sentry-javascript/blob/80c66f8fcc2e0bcd7259298e1dccfd00d486c5cb/packages/react/src/redux.ts#L109

lemme fix that real quick! (more details about that here: https://github.com/getsentry/sentry/pull/20184)

[Thanaen]

Great, thanks for the code review! I will update it to reflect your comment.

Glad I could reveal a possible improvement for the redux integration! I was inspired by the source code of this integration to write my code 😁

[AbhiPrasad]

Awesome. I think as a next step, we gotta look at 2 things. First, how we can add breadcrumbs so there's a breadcrumb on action. Then, we gotta add some reasonable defaults for things - basically options to control how breadcrumbs get created, and how what part of the state gets in context. To get some direction, we can get inspired by the Redux integration's options: https://docs.sentry.io/platforms/javascript/guides/react/configuration/integrations/redux/#redux-enhancer-options

[AbhiPrasad]

Also, highly encourage you to publish this as a package and get some feedback that way! Getting stuff into the main Sentry repo might be a slow process, so at least then you can see what other folks think (and get some well deserved recognition).

[Thanaen]

Alright, I'll try to make it a package then! It'll give me a chance to explore the process from start to finish 😁

Thanks for the feedback!

[Thanaen]

I just created the package! It's a very very rough first version, but I'll try to improve it with time 😄 https://github.com/Thanaen/sentry-zustand-middleware https://www.npmjs.com/package/sentry-zustand-middleware

[AbhiPrasad]

Great work @Thanaen! Feel free to open a PR against our docs repo to add your package to the community supported list: https://github.com/getsentry/sentry-docs/blob/master/src/platforms/index.mdx