https://github.com/thanaen/sentry-zustand-middleware

A Zustand middleware to log state on Sentry
https://github.com/thanaen/sentry-zustand-middleware

middleware sentry zustand

Last synced: 3 months ago
JSON representation

A Zustand middleware to log state on Sentry

• Host: GitHub
• URL: https://github.com/thanaen/sentry-zustand-middleware
• Owner: Thanaen
• License: isc
• Created: 2022-08-01T18:57:50.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-10-18T17:29:04.000Z (about 1 year ago)
• Last Synced: 2024-04-26T20:22:54.510Z (9 months ago)
• Topics: middleware, sentry, zustand
• Language: TypeScript
• Homepage:
• Size: 633 KB
• Stars: 11
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# sentry-zustand-middleware

[![NPM](https://img.shields.io/npm/l/sentry-zustand-middleware)](https://github.com/thanaen/sentry-zustand-middleware/blob/master/LICENSE)

[![GitHub contributors](https://img.shields.io/github/contributors/thanaen/sentry-zustand-middleware)](https://github.com/Thanaen/sentry-zustand-middleware/graphs/contributors)

[![npm](https://img.shields.io/npm/v/sentry-zustand-middleware)](https://www.npmjs.com/package/sentry-zustand-middleware)

[![npm](https://img.shields.io/npm/dm/sentry-zustand-middleware)](https://www.npmjs.com/package/sentry-zustand-middleware)

A Zustand middleware to log state on Sentry

## How to use

```sh

npm install sentry-zustand-middleware

```

### Basic usage

```ts

import create from 'zustand';

import sentryMiddleware from 'sentry-zustand-middleware';

interface BearState {

  bears: number;

  increase: (by: number) => void;

}

const useStore = create()(

  sentryMiddleware((set) => ({

    bears: 0,

    increase: (by) => set((state) => ({ bears: state.bears + by })),

  })),

);

export default useStore;

```

### With a state transformer

```ts

import create from 'zustand';

import sentryMiddleware from 'sentry-zustand-middleware';

interface BearState {

  bears: number;

  increase: (by: number) => void;

}

const stateTransformer = (state: BearState) => {

  const cleanedState = {

    ...state,

    bears:

      state.bears > 0 ? "There are some bears, but I won't tell you how many!" : 'No bears here',

  };

  // In zustand, actions are accessible from the store's state

  // We might want to remove them before sending the state to Sentry

  return Object.fromEntries(

    Object.entries(cleanedState).filter(

      ([key]) => typeof cleanedState[key as keyof typeof cleanedState] !== 'function',

    ),

  );

};

const useStore = create()(

  sentryMiddleware(

    (set) => ({

      bears: 0,

      increase: (by) => set((state) => ({ bears: state.bears + by })),

    }),

    { stateTransformer: stateTransformer },

  ),

);

export default useStore;

```