From b0a4c6f04fcc0f9755bed295aef5936d39ad8e1a Mon Sep 17 00:00:00 2001 From: s1gr1d Date: Wed, 23 Oct 2024 10:31:11 +0200 Subject: [PATCH 1/2] docs(nuxt): Add docs for Pinia plugin --- .../javascript/guides/nuxt/features/pinia.mdx | 104 ++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 docs/platforms/javascript/guides/nuxt/features/pinia.mdx diff --git a/docs/platforms/javascript/guides/nuxt/features/pinia.mdx b/docs/platforms/javascript/guides/nuxt/features/pinia.mdx new file mode 100644 index 00000000000000..f2371251f78762 --- /dev/null +++ b/docs/platforms/javascript/guides/nuxt/features/pinia.mdx @@ -0,0 +1,104 @@ +--- +title: Pinia +description: "Learn about enabling Sentry's Pinia plugin in Nuxt." +--- + +To capture Pinia state data, add `trackPinia` to your client-side Sentry configuration: + +```javascript {3} {filename:sentry.client.config.ts} +Sentry.init({ + dsn: "___PUBLIC_DSN___", + trackPinia: true // `true` will apply default options +}); +``` + +## 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___", + trackPinia: true, + normalizeDepth: 10, // Or however deep you want your state context to be. +}); +``` + +## Options + +When enabling `trackPinia` with `true`, all default options are automatically applied. To configure the Pinia plugin manually, pass an options object to `trackPinia`. + + + +While we try our best to filter out Personally Identifiable Information (PII) such as user passwords, we advise against sending sensitive information to Sentry. + + + + +### `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} +trackPinia: { + 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} +trackPinia: { + 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} +trackPinia: { + 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 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} +trackPinia: { + 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; + }, +} +``` From 7470b5574a6bd82610064e6a53638fede2900291 Mon Sep 17 00:00:00 2001 From: s1gr1d Date: Thu, 24 Oct 2024 14:12:55 +0200 Subject: [PATCH 2/2] review comments --- .../javascript/guides/nuxt/features/pinia.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/platforms/javascript/guides/nuxt/features/pinia.mdx b/docs/platforms/javascript/guides/nuxt/features/pinia.mdx index f2371251f78762..5634aec74cdd65 100644 --- a/docs/platforms/javascript/guides/nuxt/features/pinia.mdx +++ b/docs/platforms/javascript/guides/nuxt/features/pinia.mdx @@ -3,7 +3,7 @@ title: Pinia description: "Learn about enabling Sentry's Pinia plugin in Nuxt." --- -To capture Pinia state data, add `trackPinia` to your client-side Sentry configuration: +To capture [Pinia](https://pinia.vuejs.org/) state data, add `trackPinia` to your client-side Sentry configuration: ```javascript {3} {filename:sentry.client.config.ts} Sentry.init({ @@ -37,7 +37,7 @@ While we try our best to filter out Personally Identifiable Information (PII) su ### `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`. +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} trackPinia: { @@ -47,7 +47,7 @@ trackPinia: { ### `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`. +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} trackPinia: { @@ -57,7 +57,7 @@ trackPinia: { ### `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`. +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} trackPinia: { @@ -74,7 +74,7 @@ trackPinia: { ### `stateTransformer` (Function) -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. +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} trackPinia: {