diff --git a/packages/remix/test/integration/app_v2/routes/click-error.tsx b/packages/remix/test/integration/app_v2/routes/click-error.tsx new file mode 100644 index 000000000000..3e42801b2cee --- /dev/null +++ b/packages/remix/test/integration/app_v2/routes/click-error.tsx @@ -0,0 +1,15 @@ +// Throw error on click +export default function ClickError() { + return ( +
+ +
+ ); +} diff --git a/packages/remix/test/integration/test/client/click-error.test.ts b/packages/remix/test/integration/test/client/click-error.test.ts new file mode 100644 index 000000000000..1e27cdcbdd69 --- /dev/null +++ b/packages/remix/test/integration/test/client/click-error.test.ts @@ -0,0 +1,38 @@ +import { expect, test } from '@playwright/test'; +import { Event } from '@sentry/types'; +import { getMultipleSentryEnvelopeRequests } from './utils/helpers'; + +const useV2 = process.env.REMIX_VERSION === '2'; + +test('should report a manually captured message on click with the correct stacktrace.', async ({ page }) => { + if (!useV2) { + test.skip(); + return; + } + + await page.goto('/click-error'); + + const promise = getMultipleSentryEnvelopeRequests(page, 2); + await page.click('#click-error'); + + const envelopes = await promise; + + const [_, errorEnvelope] = envelopes; + + expect(errorEnvelope.level).toBe('error'); + expect(errorEnvelope.sdk?.name).toBe('sentry.javascript.remix'); + + expect(errorEnvelope.exception?.values).toMatchObject([ + { + type: 'Error', + value: 'ClickError', + stacktrace: { frames: expect.any(Array) }, + mechanism: { type: 'instrument', handled: false }, + }, + ]); + + // Check the last frame of the stacktrace + const stacktrace = errorEnvelope.exception?.values[0]?.stacktrace?.frames; + + expect(stacktrace?.[stacktrace.length - 1].function).toBe('onClick'); +});