diff --git a/CHANGELOG.md b/CHANGELOG.md
index b160a8e17293..31db2ef30b12 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,23 @@
- "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
+- **feat(nuxt): Add `piniaIntegration` ([#14138](https://github.com/getsentry/sentry-javascript/pull/14138))**
+
+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({
+ integrations: [
+ Sentry.piniaIntegration(usePinia(), {
+ /* optional Pinia plugin options */
+ }),
+ ],
+});
+```
+
## 8.36.0
### Important Changes
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/pinia-cart.vue b/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/pinia-cart.vue
new file mode 100644
index 000000000000..3d210cf459de
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/pinia-cart.vue
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-4/nuxt.config.ts b/dev-packages/e2e-tests/test-applications/nuxt-4/nuxt.config.ts
index c00ba0d5d9ed..da988a9ee003 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-4/nuxt.config.ts
+++ b/dev-packages/e2e-tests/test-applications/nuxt-4/nuxt.config.ts
@@ -4,7 +4,7 @@ export default defineNuxtConfig({
compatibilityDate: '2024-04-03',
imports: { autoImport: false },
- modules: ['@sentry/nuxt/module'],
+ modules: ['@pinia/nuxt', '@sentry/nuxt/module'],
runtimeConfig: {
public: {
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-4/package.json b/dev-packages/e2e-tests/test-applications/nuxt-4/package.json
index db56273a7493..178804768e87 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-4/package.json
+++ b/dev-packages/e2e-tests/test-applications/nuxt-4/package.json
@@ -14,6 +14,7 @@
"test:assert": "pnpm test"
},
"dependencies": {
+ "@pinia/nuxt": "^0.5.5",
"@sentry/nuxt": "latest || *",
"nuxt": "^3.13.2"
},
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-4/sentry.client.config.ts b/dev-packages/e2e-tests/test-applications/nuxt-4/sentry.client.config.ts
index 7547bafa6618..dd2183162db9 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-4/sentry.client.config.ts
+++ b/dev-packages/e2e-tests/test-applications/nuxt-4/sentry.client.config.ts
@@ -1,5 +1,5 @@
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
@@ -7,4 +7,13 @@ Sentry.init({
tunnel: `http://localhost:3031/`, // proxy server
tracesSampleRate: 1.0,
trackComponents: true,
+ integrations: [
+ Sentry.piniaIntegration(usePinia(), {
+ actionTransformer: action => `Transformed: ${action}`,
+ stateTransformer: state => ({
+ transformed: true,
+ ...state,
+ }),
+ }),
+ ],
});
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-4/stores/cart.ts b/dev-packages/e2e-tests/test-applications/nuxt-4/stores/cart.ts
new file mode 100644
index 000000000000..cad52916ac25
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nuxt-4/stores/cart.ts
@@ -0,0 +1,43 @@
+import { acceptHMRUpdate, defineStore } from '#imports';
+
+export const useCartStore = defineStore({
+ id: 'cart',
+ state: () => ({
+ rawItems: [] as string[],
+ }),
+ getters: {
+ items: (state): Array<{ name: string; amount: number }> =>
+ state.rawItems.reduce(
+ (items: any, item: any) => {
+ const existingItem = items.find((it: any) => it.name === item);
+
+ if (!existingItem) {
+ items.push({ name: item, amount: 1 });
+ } else {
+ existingItem.amount++;
+ }
+
+ return items;
+ },
+ [] as Array<{ name: string; amount: number }>,
+ ),
+ },
+ actions: {
+ addItem(name: string) {
+ this.rawItems.push(name);
+ },
+
+ removeItem(name: string) {
+ const i = this.rawItems.lastIndexOf(name);
+ if (i > -1) this.rawItems.splice(i, 1);
+ },
+
+ throwError() {
+ throw new Error('error');
+ },
+ },
+});
+
+if (import.meta.hot) {
+ import.meta.hot.accept(acceptHMRUpdate(useCartStore, import.meta.hot));
+}
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-4/tests/pinia.test.ts b/dev-packages/e2e-tests/test-applications/nuxt-4/tests/pinia.test.ts
new file mode 100644
index 000000000000..44b057a29f15
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/nuxt-4/tests/pinia.test.ts
@@ -0,0 +1,35 @@
+import { expect, test } from '@playwright/test';
+import { waitForError } from '@sentry-internal/test-utils';
+
+test('sends pinia action breadcrumbs and state context', async ({ page }) => {
+ await page.goto('/pinia-cart');
+
+ await page.locator('#item-input').fill('item');
+ await page.locator('#item-add').click();
+
+ const errorPromise = waitForError('nuxt-4', async errorEvent => {
+ return errorEvent?.exception?.values?.[0].value === 'This is an error';
+ });
+
+ await page.locator('#throw-error').click();
+
+ const error = await errorPromise;
+
+ expect(error).toBeTruthy();
+ expect(error.breadcrumbs?.length).toBeGreaterThan(0);
+
+ const actionBreadcrumb = error.breadcrumbs?.find(breadcrumb => breadcrumb.category === 'action');
+
+ expect(actionBreadcrumb).toBeDefined();
+ expect(actionBreadcrumb?.message).toBe('Transformed: addItem');
+ expect(actionBreadcrumb?.level).toBe('info');
+
+ const stateContext = error.contexts?.state?.state;
+
+ expect(stateContext).toBeDefined();
+ expect(stateContext?.type).toBe('pinia');
+ expect(stateContext?.value).toEqual({
+ transformed: true,
+ rawItems: ['item'],
+ });
+});
diff --git a/packages/nuxt/src/client/index.ts b/packages/nuxt/src/client/index.ts
index 583643fa40f1..849c305a22e3 100644
--- a/packages/nuxt/src/client/index.ts
+++ b/packages/nuxt/src/client/index.ts
@@ -1,3 +1,4 @@
export * from '@sentry/vue';
export { init } from './sdk';
+export { piniaIntegration } from './piniaIntegration';
diff --git a/packages/nuxt/src/client/piniaIntegration.ts b/packages/nuxt/src/client/piniaIntegration.ts
new file mode 100644
index 000000000000..28b797fb9fa6
--- /dev/null
+++ b/packages/nuxt/src/client/piniaIntegration.ts
@@ -0,0 +1,39 @@
+import { defineIntegration } from '@sentry/core';
+import type { IntegrationFn } from '@sentry/types';
+
+import { consoleSandbox } from '@sentry/utils';
+import { createSentryPiniaPlugin } from '@sentry/vue';
+
+const INTEGRATION_NAME = 'Pinia';
+
+type Pinia = { use: (plugin: ReturnType) => void };
+
+const _piniaIntegration = ((
+ // `unknown` here as well because usePinia declares this type: `export declare const usePinia: () => unknown;`
+ pinia: unknown | Pinia,
+ options: Parameters[0] = {},
+) => {
+ return {
+ name: INTEGRATION_NAME,
+ setup() {
+ if (!pinia || (typeof pinia === 'object' && !('use' in pinia))) {
+ consoleSandbox(() => {
+ // eslint-disable-next-line no-console
+ console.warn(
+ '[Sentry] The Pinia integration was added, but the passed parameter `pinia` has the wrong value. Make sure to enable Pinia by adding `"@pinia/nuxt"` to the 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);