feat(vue): Add Pinia plugin #13841

onurtemizkan · 2024-10-01T14:03:39Z

Resolves: #13279
Depends on: #13840
Sample Event

Adds a Pinia plugin with a feature set similar to the Redux integration.

Attaches Pinia state as an attachment to the event (true by default)
Provides actionTransformer and stateTransformer to the user for potentially required PII modifications.
Adds breadcrumbs for Pinia actions
Assigns Pinia state to event contexts.

codecov · 2024-10-01T14:22:49Z

❌ 1 Tests Failed:

Tests completed	Failed	Passed	Skipped
626	1	625	31

View the top 1 failed tests by shortest run time

pinia.test.ts sends pinia action breadcrumbs and state context

Stack Traces | 0.316s run time

pinia.test.ts:4:1 sends pinia action breadcrumbs and state context

To view individual test run time comparison to the main branch, go to the Test Analytics Dashboard

github-actions · 2024-10-02T11:28:53Z

size-limit report 📦

Path	Size	% Change	Change
@sentry/browser	22.73 KB	-	-
@sentry/browser - with treeshaking flags	21.53 KB	-	-
@sentry/browser (incl. Tracing)	35.01 KB	-	-
@sentry/browser (incl. Tracing, Replay)	71.67 KB	-	-
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags	62.07 KB	-	-
@sentry/browser (incl. Tracing, Replay with Canvas)	76.01 KB	-	-
@sentry/browser (incl. Tracing, Replay, Feedback)	88.78 KB	-	-
@sentry/browser (incl. Tracing, Replay, Feedback, metrics)	90.63 KB	-	-
@sentry/browser (incl. metrics)	27 KB	-	-
@sentry/browser (incl. Feedback)	39.87 KB	-	-
@sentry/browser (incl. sendFeedback)	27.38 KB	-	-
@sentry/browser (incl. FeedbackAsync)	32.17 KB	-	-
@sentry/react	25.49 KB	-	-
@sentry/react (incl. Tracing)	37.97 KB	-	-
@sentry/vue	26.91 KB	-	-
@sentry/vue (incl. Tracing)	36.9 KB	-	-
@sentry/svelte	22.87 KB	-	-
CDN Bundle	24.11 KB	-	-
CDN Bundle (incl. Tracing)	36.84 KB	-	-
CDN Bundle (incl. Tracing, Replay)	71.47 KB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback)	76.78 KB	-	-
CDN Bundle - uncompressed	70.7 KB	-	-
CDN Bundle (incl. Tracing) - uncompressed	109.36 KB	-	-
CDN Bundle (incl. Tracing, Replay) - uncompressed	221.71 KB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed	234.93 KB	-	-
@sentry/nextjs (client)	37.94 KB	-	-
@sentry/sveltekit (client)	35.6 KB	-	-
@sentry/node	124.9 KB	-	-
@sentry/node - without tracing	94.13 KB	-	-
@sentry/aws-serverless	103.7 KB	-	-

View base workflow run

s1gr1d

Thanks for adding this 🙌

s1gr1d · 2024-10-02T15:18:43Z

dev-packages/e2e-tests/test-applications/vue-3/package.json

@@ -16,6 +16,7 @@
  },
  "dependencies": {
    "@sentry/vue": "latest || *",
+    "pinia": "^2.2.3",


Should we add pinia as a peer dependency as well with major v2?

Sure, added pinia as an optional peer dependency. 👍

s1gr1d · 2024-10-02T15:35:09Z

packages/vue/src/pinia.ts

+          const options = client && client.getOptions();
+          const normalizationDepth = (options && options.normalizeDepth) || 3; // default state normalization depth to 3
+
+          const newStateContext = { state: { type: 'pinia', value: transformedState } };


H: Currently, the state context needs to be nested twice with state (docs here). This could change in the future as it is a bit confusing, but right now it still has to look that way to be understood by Sentry.

This is assigned under store key in the context, so I guess it should comply with the current interface.

Ah right, I see it's there: scope.setContext('state', newStateContext);

s1gr1d · 2024-10-02T15:39:46Z

packages/vue/src/pinia.ts

+              filename: 'pinia_state.json',
+              data: JSON.stringify(store.$state),


L: Can there be multiple files (because the linked event has two)? Users could benefit from having a timestamp in the filename as there can be multiple files in the attachments. Something like hh:mm_pinia_state would be enough.

Looks like these two are two different stores. So, I updated the file name format to include both the store id and the timestamp. Sample Event

s1gr1d · 2024-10-03T09:06:11Z

packages/vue/src/pinia.ts

+  actionTransformer: (action: any) => any;
+  stateTransformer: (state: any) => any;


I think it would be nice to have tests for those :)

Added 👍 c7cfa72

s1gr1d · 2024-10-03T09:41:11Z

packages/vue/src/pinia.ts

+            ...(hint.attachments || []),
+            {
+              filename,
+              data: JSON.stringify(store.$state),


M: What just came to my mind: the store can contain PII, especially when pinia is used in forms. What do you think of adding the type of the value as the value? Like this:

name: string likes: object

Since the pinia plugin needs to be added manually I would argue it is fine. Just having the type is basically useless for debugging.

Stringifying the state as JSON will only work in some scenarios and fail in many others like Dates, Errors, Maps, Sets, and custom classes. I would recommend using https://github.com/Rich-Harris/devalue like Nuxt does to allow users to provide serializer and revivers. I would even recommend adding a custom one that uses a toJSON() method if it exists by default as a convention. I think, but I'm not sure, that Nuxt has something similar.

Hi, we are on a tight bundle-size budget so we need to be a bit careful what we pull in as deps.

What we definitely should do is wrap the stringify call in a try-catch because it can throw in certain situations.

Non-serializable data is tricky and I would recommend we do it in a follow-up if at all. Dates get serialized properly with ordinary JSON.stringify, errors, maps, and sets, will become objects (which is fine for now), and stringify already supports toJSON natively.

The toJSON() was specific to devalue ofc. If users can opt-in to a fully compatible serializable solution, they would be able to put their app in a similar state with the serialized state and debug in dev mode, so I think it's nice to advocate for that! Since Map and Sets are common, it would be a shame to lose them fully by using JSON.stringify()`

So, this event processor logic is already in try-catch, so we're safe on that part. We can do a follow-up for serializing. Thanks for the review @posva!

lforst · 2024-10-03T10:33:09Z

packages/vue/src/pinia.ts

+type SentryPiniaPluginOptions = {
+  attachPiniaState?: boolean;
+  actionTransformer: (action: any) => any;
+  stateTransformer: (state: any) => any;


In addition to having the entire options object be optional, I think all of the options individually should probably also be optional.

Updated: c8482b9

lforst · 2024-10-03T10:35:57Z

packages/vue/src/pinia.ts

+            ...(hint.attachments || []),
+            {
+              filename,
+              data: JSON.stringify(store.$state),


Since the pinia plugin needs to be added manually I would argue it is fine. Just having the type is basically useless for debugging.

lforst · 2024-10-03T10:36:50Z

packages/vue/src/pinia.ts

+        const transformedAction = options.actionTransformer(context.name);
+
+        if (typeof transformedAction !== 'undefined' && transformedAction !== null) {
+          addBreadcrumb({


I would add an option to turn off creating breadcrumbs. From experience, some apps have a lot of state updates and breadcrumbs might be very spammy.

Updated: ea7ba22

lforst · 2024-10-03T10:38:29Z

packages/vue/src/pinia.ts

+
+          scope.setContext('state', newStateContext);
+        } else {
+          scope.setContext('state', null);


Is there a way for us not to nuke the entire state context here but only the pinia state 🤔 I know it could be tricky and is a bit edge-casy but may be worth it.

Does this update make sense? 4a78c04

yes! perfect

s1gr1d

LGTM 🙌

onurtemizkan mentioned this pull request Oct 2, 2024

ref(utils): Keep non-enumerable properties in dropUndefinedKeys. #13840

Merged

onurtemizkan force-pushed the onur/pinia-plugin branch from 23d8d11 to 6895af0 Compare October 2, 2024 09:18

onurtemizkan marked this pull request as ready for review October 2, 2024 09:40

feat(vue): Add Pinia plugin

1fa274a

onurtemizkan force-pushed the onur/pinia-plugin branch from 6895af0 to 1fa274a Compare October 2, 2024 11:21

s1gr1d self-requested a review October 2, 2024 15:12

s1gr1d reviewed Oct 2, 2024

View reviewed changes

onurtemizkan added 2 commits October 3, 2024 07:56

Attach store id and timestamp to attachment name.

c9de1b6

Add pinia as an optional peer dependency.

cf1b89f

s1gr1d reviewed Oct 3, 2024

View reviewed changes

lforst reviewed Oct 3, 2024

View reviewed changes

onurtemizkan added 4 commits October 4, 2024 12:15

Make actionTransformer and stateTransformer optional

c8482b9

Test actionTransformer and stateTransformer

c7cfa72

Provide an option for adding breadcrumbs

ea7ba22

Don't nuke the entire context.state.

4a78c04

onurtemizkan force-pushed the onur/pinia-plugin branch from cd409dc to 4a78c04 Compare October 4, 2024 10:46

Set addBreadcrumbs true by default.

f244aba

s1gr1d approved these changes Oct 7, 2024

View reviewed changes

Merge branch 'develop' into onur/pinia-plugin

a4c3098

onurtemizkan mentioned this pull request Oct 8, 2024

feat(vue): Add Pinia Plugin Docs getsentry/sentry-docs#11516

Open

Merge remote-tracking branch 'origin/develop' into onur/pinia-plugin

02afb2b

s1gr1d merged commit ecf84e0 into develop Oct 15, 2024
147 checks passed

s1gr1d deleted the onur/pinia-plugin branch October 15, 2024 08:44

github-actions bot mentioned this pull request Oct 15, 2024

Plugin for Pinia 🍍 #13279

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(vue): Add Pinia plugin #13841

feat(vue): Add Pinia plugin #13841

onurtemizkan commented Oct 1, 2024 •

edited

Loading

codecov bot commented Oct 1, 2024 •

edited

Loading

github-actions bot commented Oct 2, 2024 •

edited

Loading

s1gr1d left a comment

s1gr1d Oct 2, 2024

onurtemizkan Oct 3, 2024

s1gr1d Oct 2, 2024

onurtemizkan Oct 3, 2024

s1gr1d Oct 3, 2024

s1gr1d Oct 2, 2024

onurtemizkan Oct 3, 2024

s1gr1d Oct 3, 2024

onurtemizkan Oct 4, 2024

s1gr1d Oct 3, 2024

lforst Oct 3, 2024

posva Oct 8, 2024

lforst Oct 8, 2024

posva Oct 8, 2024

onurtemizkan Oct 11, 2024

lforst Oct 3, 2024

onurtemizkan Oct 4, 2024

lforst Oct 3, 2024

lforst Oct 3, 2024

onurtemizkan Oct 4, 2024

lforst Oct 3, 2024

onurtemizkan Oct 4, 2024

lforst Oct 4, 2024

s1gr1d left a comment

		filename: 'pinia_state.json',
		data: JSON.stringify(store.$state),

		actionTransformer: (action: any) => any;
		stateTransformer: (state: any) => any;

feat(vue): Add Pinia plugin #13841

feat(vue): Add Pinia plugin #13841

Conversation

onurtemizkan commented Oct 1, 2024 • edited Loading

codecov bot commented Oct 1, 2024 • edited Loading

❌ 1 Tests Failed:

github-actions bot commented Oct 2, 2024 • edited Loading

size-limit report 📦

s1gr1d left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

s1gr1d left a comment

Choose a reason for hiding this comment

onurtemizkan commented Oct 1, 2024 •

edited

Loading

codecov bot commented Oct 1, 2024 •

edited

Loading

github-actions bot commented Oct 2, 2024 •

edited

Loading