Skip to content

docs(nuxt): piniaIntegration in Nuxt #11684

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/platforms/javascript/common/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -109,3 +109,5 @@ Learn more about manually capturing an error or message in our <PlatformLink to=
</Note>

To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved.

<PlatformContent includePath="getting-started-next-steps" />
104 changes: 104 additions & 0 deletions docs/platforms/javascript/guides/nuxt/features/pinia.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
---
title: Pinia
description: "Learn about enabling Sentry's Pinia plugin in Nuxt."
---

To capture [Pinia](https://pinia.vuejs.org/) state data, add the `piniaIntegration` with `usePinia()` to the integrations array of your client-side Sentry configuration:

```javascript {3} {filename:sentry.client.config.ts}
Sentry.init({
dsn: "___PUBLIC_DSN___",
integrations: [Sentry.piniaIntegration(usePinia())],
});
```

## Normalization Depth

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:

```javascript {4} {filename:sentry.client.config.ts}
Sentry.init({
dsn: "___PUBLIC_DSN___",
integrations: [Sentry.piniaIntegration(usePinia())],
normalizeDepth: 10, // Or however deep you want your state context to be.
});
```

## Options

When not providing a second argument to the `piniaIntegration`, all default options are automatically applied. To configure the Pinia plugin manually, pass an options object as a second argument to `piniaIntegration`.

<Alert level="warning" title="Note">

While we try our best to filter out Personally Identifiable Information (PII) such as user passwords, we advise against sending sensitive information to Sentry.

</Alert>


### `attachPiniaState` (Boolean)

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`:

```javascript {2} {filename:sentry.client.config.ts}
Sentry.piniaIntegration(usePinia(), {
attachPiniaState: false
})
```

### `addBreadcrumbs` (Boolean)

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`:

```javascript {2} {filename:sentry.client.config.ts}
Sentry.piniaIntegration(usePinia(), {
addBreadcrumbs: false
})
```

### `actionTransformer` (Function)

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`:

```javascript {2-9} {filename:sentry.client.config.ts}
Sentry.piniaIntegration(usePinia(), {
actionTransformer: (action) => {
if (action === "GOVERNMENT_SECRETS") {
// Return null to not log the action to Sentry
return null;
}

return action;
},
})
```

### `stateTransformer` (Function)

This is used to remove sensitive information from a 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:

```javascript {2-23} {filename:sentry.client.config.ts}
Sentry.piniaIntegration(usePinia(), {
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;
},
})
```
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## Next Steps

- Track your Vue Components or your Pinia store by [adding support for client features](/platforms/javascript/guides/nuxt/features/)
Loading