Skip to content

Commit 7db6d32

Browse files
authored
docs(nuxt): Add docs for Pinia plugin (#11638)
* docs(nuxt): Add docs for Pinia plugin * review comments
1 parent 71be38c commit 7db6d32

File tree

1 file changed

+104
-0
lines changed
  • docs/platforms/javascript/guides/nuxt/features

1 file changed

+104
-0
lines changed
Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
---
2+
title: Pinia
3+
description: "Learn about enabling Sentry's Pinia plugin in Nuxt."
4+
---
5+
6+
To capture [Pinia](https://pinia.vuejs.org/) state data, add `trackPinia` to your client-side Sentry configuration:
7+
8+
```javascript {3} {filename:sentry.client.config.ts}
9+
Sentry.init({
10+
dsn: "___PUBLIC_DSN___",
11+
trackPinia: true // `true` will apply default options
12+
});
13+
```
14+
15+
## Normalization Depth
16+
17+
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:
18+
19+
```javascript {4} {filename:sentry.client.config.ts}
20+
Sentry.init({
21+
dsn: "___PUBLIC_DSN___",
22+
trackPinia: true,
23+
normalizeDepth: 10, // Or however deep you want your state context to be.
24+
});
25+
```
26+
27+
## Options
28+
29+
When enabling `trackPinia` with `true`, all default options are automatically applied. To configure the Pinia plugin manually, pass an options object to `trackPinia`.
30+
31+
<Alert level="warning" title="Note">
32+
33+
While we try our best to filter out Personally Identifiable Information (PII) such as user passwords, we advise against sending sensitive information to Sentry.
34+
35+
</Alert>
36+
37+
38+
### `attachPiniaState` (Boolean)
39+
40+
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`:
41+
42+
```javascript {2} {filename:sentry.client.config.ts}
43+
trackPinia: {
44+
attachPiniaState: false
45+
}
46+
```
47+
48+
### `addBreadcrumbs` (Boolean)
49+
50+
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`:
51+
52+
```javascript {2} {filename:sentry.client.config.ts}
53+
trackPinia: {
54+
addBreadcrumbs: false
55+
}
56+
```
57+
58+
### `actionTransformer` (Function)
59+
60+
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`:
61+
62+
```javascript {2-9} {filename:sentry.client.config.ts}
63+
trackPinia: {
64+
actionTransformer: (action) => {
65+
if (action === "GOVERNMENT_SECRETS") {
66+
// Return null to not log the action to Sentry
67+
return null;
68+
}
69+
70+
return action;
71+
},
72+
}
73+
```
74+
75+
### `stateTransformer` (Function)
76+
77+
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:
78+
79+
```javascript {2-23} {filename:sentry.client.config.ts}
80+
trackPinia: {
81+
stateTransformer: (state) => {
82+
if (state.topSecret.doNotSend) {
83+
// Return null to not send this version of the state.
84+
return null;
85+
}
86+
87+
// Transform the state to remove sensitive information
88+
const transformedState = {
89+
...state,
90+
topSecret: {
91+
...state.topSecret,
92+
// Replace sensitive information with something else
93+
nuclearLaunchCodes: "I love pizza",
94+
// or just remove it entirely
95+
hiddenTreasureLocation: null,
96+
},
97+
// You should also remove large data that is irrelevant to debugging to not clutter your Sentry issues
98+
giganticState: null,
99+
};
100+
101+
return transformedState;
102+
},
103+
}
104+
```

0 commit comments

Comments
 (0)