feat(nuxt): Add piniaIntegration

Author: s1gr1d

CHANGELOG.md

@@ -10,24 +10,29 @@
 
 - "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
 
-## 8.36.0
-
-### Important Changes
-
-- **feat(nuxt): Add Sentry Pinia plugin ([#14047](https://github.com/getsentry/sentry-javascript/pull/14047))**
+- **feat(nuxt): Add Sentry Pinia plugin**
 
-The Nuxt SDK now allows you to track Pinia state for captured errors. To enable the Pinia plugin, set the `trackPinia` option to `true` in your client config:
+The Nuxt SDK now allows you to track Pinia state for captured errors. To enable the Pinia plugin, add the `piniaIntegration` to your client config:
 
 ```ts
 // sentry.client.config.ts
+import { usePinia } from '#imports';
 
 Sentry.init({
-  trackPinia: true,
+  integrations: [
+    Sentry.piniaIntegration(usePinia(), {
+      /* optinal Pinia plugin options */
+    }),
+  ],
 });
 ```
 
 Read more about the Pinia plugin in the [Sentry Pinia Documentation](https://docs.sentry.io/platforms/javascript/guides/nuxt/features/pinia/).
 
+## 8.36.0
+
+### Important Changes
+
 - **feat(nextjs/vercel-edge/cloudflare): Switch to OTEL for performance monitoring ([#13889](https://github.com/getsentry/sentry-javascript/pull/13889))**
 
 With this release, the Sentry Next.js, and Cloudflare SDKs will now capture performance data based on OpenTelemetry.

dev-packages/e2e-tests/test-applications/nuxt-4/sentry.client.config.ts

@@ -1,17 +1,19 @@
 import * as Sentry from '@sentry/nuxt';
-import { useRuntimeConfig } from '#imports';
+import { usePinia, useRuntimeConfig } from '#imports';
 
 Sentry.init({
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: useRuntimeConfig().public.sentry.dsn,
   tunnel: `http://localhost:3031/`, // proxy server
   tracesSampleRate: 1.0,
   trackComponents: true,
-  trackPinia: {
-    actionTransformer: action => `Transformed: ${action}`,
-    stateTransformer: state => ({
-      transformed: true,
-      ...state,
+  integrations: [
+    Sentry.piniaIntegration(usePinia(), {
+      actionTransformer: action => `Transformed: ${action}`,
+      stateTransformer: state => ({
+        transformed: true,
+        ...state,
+      }),
     }),
-  },
+  ],
 });

packages/nuxt/src/client/index.ts

@@ -1,3 +1,4 @@
 export * from '@sentry/vue';
 
 export { init } from './sdk';
+export { piniaIntegration } from './piniaIntegration';

packages/nuxt/src/client/piniaIntegration.ts

@@ -0,0 +1,38 @@
+import { defineIntegration } from '@sentry/core';
+import type { IntegrationFn } from '@sentry/types';
+
+import { consoleSandbox } from '@sentry/utils';
+import { createSentryPiniaPlugin } from '@sentry/vue';
+
+const INTEGRATION_NAME = 'LinkedErrors';
+
+type Pinia = { use: (plugin: ReturnType<typeof createSentryPiniaPlugin>) => void }
+
+const _piniaIntegration = ((
+  // `unknown` here as well because usePinia declares this type: `export declare const usePinia: () => unknown;`
+  pinia: unknown | Pinia,
+  options: Parameters<typeof createSentryPiniaPlugin>[0] = {},
+) => {
+  return {
+    name: INTEGRATION_NAME,
+    setup() {
+      if (!pinia || (typeof pinia === 'object' && !('use' in pinia))) {
+        consoleSandbox(() => {
+          // eslint-disable-next-line no-console
+          console.warn(
+            '[Sentry] You added the Pinia integration, but the passed parameter `pinia` has the wrong value. Make sure to enable Pinia by adding `"@pinia/nuxt"` to your Nuxt modules array and pass pinia to Sentry with `piniaIntegration(usePinia())`. Current value of `pinia`: ', pinia,
+          );
+        });
+      } else {
+        (pinia as Pinia).use(createSentryPiniaPlugin(options));
+      }
+    },
+  };
+}) satisfies IntegrationFn;
+
+/**
+ * Monitor an existing Pinia store.
+ *
+ * This only works if "@pinia/nuxt" is added to the `modules` array.
+ */
+export const piniaIntegration = defineIntegration(_piniaIntegration);

packages/nuxt/src/common/types.ts

@@ -1,21 +1,10 @@
 import type { init as initNode } from '@sentry/node';
 import type { SentryRollupPluginOptions } from '@sentry/rollup-plugin';
 import type { SentryVitePluginOptions } from '@sentry/vite-plugin';
-import type { createSentryPiniaPlugin, init as initVue } from '@sentry/vue';
+import type { init as initVue } from '@sentry/vue';
 
 // Omitting 'app' as the Nuxt SDK will add the app instance in the client plugin (users do not have to provide this)
-export type SentryNuxtClientOptions = Omit<Parameters<typeof initVue>[0] & object, 'app'> & {
-  /**
-   * Control if an existing Pinia store should be monitored.
-   * Set this to `true` to track with default options or provide your custom Pinia plugin options.
-   *
-   * This only works if "@pinia/nuxt" is added to the `modules` array.
-   *
-   * @default false
-   */
-  trackPinia?: true | Parameters<typeof createSentryPiniaPlugin>[0];
-};
-
+export type SentryNuxtClientOptions = Omit<Parameters<typeof initVue>[0] & object, 'app'>;
 export type SentryNuxtServerOptions = Omit<Parameters<typeof initNode>[0] & object, 'app'>;
 
 type SourceMapsOptions = {

packages/nuxt/src/runtime/plugins/sentry.client.ts

@@ -1,6 +1,5 @@
 import { getClient } from '@sentry/core';
-import { consoleSandbox } from '@sentry/utils';
-import { browserTracingIntegration, createSentryPiniaPlugin, vueIntegration } from '@sentry/vue';
+import { browserTracingIntegration,  vueIntegration } from '@sentry/vue';
 import { defineNuxtPlugin } from 'nuxt/app';
 import { reportNuxtError } from '../utils';
 
@@ -35,36 +34,18 @@ export default defineNuxtPlugin({
   name: 'sentry-client-integrations',
   dependsOn: ['sentry-client-config'],
   async setup(nuxtApp) {
-    const sentryClient = getClient();
-    const clientOptions = sentryClient && sentryClient.getOptions();
-
     // This evaluates to true unless __SENTRY_TRACING__ is text-replaced with "false", in which case everything inside
     // will get tree-shaken away
     if (typeof __SENTRY_TRACING__ === 'undefined' || __SENTRY_TRACING__) {
+      const sentryClient = getClient();
+
       if (sentryClient && '$router' in nuxtApp) {
         sentryClient.addIntegration(
           browserTracingIntegration({ router: nuxtApp.$router as VueRouter, routeLabel: 'path' }),
         );
       }
     }
 
-    if (clientOptions && 'trackPinia' in clientOptions && clientOptions.trackPinia) {
-      if ('$pinia' in nuxtApp) {
-        (nuxtApp.$pinia as { use: (plugin: unknown) => void }).use(
-          // `trackPinia` is an object with custom options or `true` (pass `undefined` to use default options)
-          createSentryPiniaPlugin(clientOptions.trackPinia === true ? undefined : clientOptions.trackPinia),
-        );
-      } else {
-        clientOptions.debug &&
-          consoleSandbox(() => {
-            // eslint-disable-next-line no-console
-            console.warn(
-              '[Sentry] You set `trackPinia`, but the Pinia module was not found. Make sure to add `"@pinia/nuxt"` to your modules array.',
-            );
-          });
-      }
-    }
-
     nuxtApp.hook('app:created', vueApp => {
       const sentryClient = getClient();