Pinia

Learn about Sentry's Pinia plugin.

To capture Pinia state data, use Sentry.createSentryPiniaPlugin() and add it to your Pinia store instance:

Copied
import { createPinia } from "pinia";
import { createSentryPiniaPlugin } from "@sentry/vue";

const pinia = createPinia();

pinia.use(createSentryPiniaPlugin());

By default, Sentry SDKs normalize any context to a depth of 3. You may want to increase this for sending Pinia states by passing normalizeDepth to the Sentry.init call:

Copied
Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  normalizeDepth: 10, // Or however deep you want your state context to be.
});

To configure the Pinia plugin, pass an options object as the first parameter to createSentryPiniaPlugin.

This is used to attach Pinia state to Sentry events. By default, this is set to true. If you don't want to attach Pinia state to events being sent to Sentry, set this to false.

Copied
createSentryPiniaPlugin({
  attachPiniaState: false,
});

This is used to add breadcrumbs to Sentry events. By default, this is set to true. If you don't want to add breadcrumbs to events being sent to Sentry, set this to false.

Copied
createSentryPiniaPlugin({
  addBreadcrumbs: false,
});

This can be used to remove sensitive information from Pinia actions. The first parameter passed to the function is the Pinia action name. We send all actions by default, if you don't want an action name sent to Sentry, use return null.

Copied
createSentryPiniaPlugin({
  actionTransformer: (action) => {
    if (action === "GOVERNMENT_SECRETS") {
      // Return null to not log the action to Sentry
      return null;
    }

    return action;
  },
});

This is used to remove sensitive information from Pinia state. The first parameter passed to the function is the Pinia state. We attach all state changes by default. If you don't want to attach state changes to events being sent to Sentry, use return null. Note, that if you choose not to send state to Sentry, your errors might not have the latest version attached.

Copied
createSentryPiniaPlugin({
  stateTransformer: (state) => {
    if (state.topSecret.doNotSend) {
      // Return null to not send this version of the state.
      return null;
    }

    // Transform the state to remove sensitive information
    const transformedState = {
      ...state,
      topSecret: {
        ...state.topSecret,
        // Replace sensitive information with something else
        nuclearLaunchCodes: "I love pizza",
        // or just remove it entirely
        hiddenTreasureLocation: null,
      },
      // You should also remove large data that is irrelevant to debugging to not clutter your Sentry issues
      giganticState: null,
    };

    return transformedState;
  },
});
Previous
Track Vue Components
Next
Vue Router
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").