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);