This plugin allows you to capture Zustand mutations/state and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.

npm i @openreplay/tracker-zustand

Initialize the @openreplay/tracker package as usual and load the plugin into it. Call the plugin and to set up the store name, this will return a named store tracker instance which you can call with your store exemplar as an argument to enable tracking of this store.

If your website is a Single Page Application (SPA)

Section titled If your website is a Single Page Application (SPA)
import Tracker from '@openreplay/tracker';
import trackerZustand from '@openreplay/tracker-zustand';

If your web app is Server-Side-Rendered (SSR)

Section titled If your web app is Server-Side-Rendered (SSR)
import Tracker from '@openreplay/tracker/cjs';
import trackerZustand from '@openreplay/tracker-zustand/cjs';
import create from "zustand";
import Tracker from '@openreplay/tracker';
import trackerZustand, { StateLogger } from '@openreplay/tracker-zustand';

const tracker = new Tracker({
  projectKey: YOUR_PROJECT_KEY,

// as per https://docs.pmnd.rs/zustand/guides/typescript#middleware-that-doesn't-change-the-store-type
// cast type to new one
// but this seems to not be required and everything is working as is
const zustandPlugin = tracker.use(trackerZustand()) as unknown as StateLogger

const useBearStore = create(
  zustandPlugin((set: any) => ({
    bears: 0,
    increasePopulation: () => set((state: any) => ({ bears: state.bears + 1 })),
    removeAllBears: () => set({ bears: 0 }),
    // store name is optional
    // and is randomly generated if undefined

You can customize the plugin behavior with options to sanitize your data. They are similar to the ones from the standard createLogger plugin.

  filter (mutation, state) {
    // returns `true` if a mutation should be logged
    // `mutation` is a `{ type, payload }`
    return mutation.type !== "aBlacklistedMutation";
  transformer (state) {
    // transform the state before logging it.
    // for example return only a specific sub-tree
    return state.subTree;
  mutationTransformer (mutation) {
    // mutations are logged in the format of `{ type, payload }`
    // we can format it any way we want.
    return mutation.type;

Having trouble setting up this plugin? please connect to our Slack or check out our Forum and get help from our community.