From 2935beee15cfbcec052a209f13131eb3d7ebbb01 Mon Sep 17 00:00:00 2001 From: s1gr1d Date: Tue, 17 Dec 2024 13:27:12 +0100 Subject: [PATCH 1/2] test(nuxt): Add E2E test with NuxtErrorBoundary --- .../nuxt-3/pages/client-error.vue | 15 ++++--- .../nuxt-3/tests/errors.client.test.ts | 41 +++++++++++++++++++ .../nuxt-4/app/pages/client-error.vue | 11 +++-- .../nuxt-4/tests/errors.client.test.ts | 41 +++++++++++++++++++ 4 files changed, 100 insertions(+), 8 deletions(-) diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3/pages/client-error.vue b/dev-packages/e2e-tests/test-applications/nuxt-3/pages/client-error.vue index 5e1a14931f84..9b9592d5a447 100644 --- a/dev-packages/e2e-tests/test-applications/nuxt-3/pages/client-error.vue +++ b/dev-packages/e2e-tests/test-applications/nuxt-3/pages/client-error.vue @@ -1,11 +1,16 @@ - - + + + + + + diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3/tests/errors.client.test.ts b/dev-packages/e2e-tests/test-applications/nuxt-3/tests/errors.client.test.ts index 4cb23e8b81df..e1db84a5c0a3 100644 --- a/dev-packages/e2e-tests/test-applications/nuxt-3/tests/errors.client.test.ts +++ b/dev-packages/e2e-tests/test-applications/nuxt-3/tests/errors.client.test.ts @@ -28,6 +28,47 @@ test.describe('client-side errors', async () => { }); }); + test('captures error thrown in NuxtErrorBoundary', async ({ page }) => { + const errorPromise = waitForError('nuxt-3', async errorEvent => { + return errorEvent?.exception?.values?.[0]?.value === 'Error thrown in Error Boundary'; + }); + + await page.goto(`/client-error`); + await page.locator('#errorBtn3').click(); + + const error = await errorPromise; + + const expectedBreadcrumb = { + category: 'console', + message: 'Additional functionality in NuxtErrorBoundary', + }; + + const matchingBreadcrumb = error.breadcrumbs.find( + (breadcrumb: { category: string; message: string }) => + breadcrumb.category === expectedBreadcrumb.category && breadcrumb.message === expectedBreadcrumb.message, + ); + + expect(matchingBreadcrumb).toBeTruthy(); + expect(matchingBreadcrumb?.category).toBe(expectedBreadcrumb.category); + expect(matchingBreadcrumb?.message).toBe(expectedBreadcrumb.message); + + expect(error.transaction).toEqual('/client-error'); + expect(error.sdk.name).toEqual('sentry.javascript.nuxt'); + expect(error).toMatchObject({ + exception: { + values: [ + { + type: 'Error', + value: 'Error thrown in Error Boundary', + mechanism: { + handled: false, + }, + }, + ], + }, + }); + }); + test('shows parametrized route on button error', async ({ page }) => { const errorPromise = waitForError('nuxt-3', async errorEvent => { return errorEvent?.exception?.values?.[0]?.value === 'Error thrown from Param Route Button'; diff --git a/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/client-error.vue b/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/client-error.vue index c2bdabfb4752..9b9592d5a447 100644 --- a/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/client-error.vue +++ b/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/client-error.vue @@ -1,11 +1,16 @@ - - + + + + diff --git a/dev-packages/e2e-tests/test-applications/nuxt-4/tests/errors.client.test.ts b/dev-packages/e2e-tests/test-applications/nuxt-4/tests/errors.client.test.ts index c887e255fe57..971b013ec074 100644 --- a/dev-packages/e2e-tests/test-applications/nuxt-4/tests/errors.client.test.ts +++ b/dev-packages/e2e-tests/test-applications/nuxt-4/tests/errors.client.test.ts @@ -28,6 +28,47 @@ test.describe('client-side errors', async () => { }); }); + test('captures error thrown in NuxtErrorBoundary', async ({ page }) => { + const errorPromise = waitForError('nuxt-4', async errorEvent => { + return errorEvent?.exception?.values?.[0]?.value === 'Error thrown in Error Boundary'; + }); + + await page.goto(`/client-error`); + await page.locator('#errorBtn3').click(); + + const error = await errorPromise; + + const expectedBreadcrumb = { + category: 'console', + message: 'Additional functionality in NuxtErrorBoundary', + }; + + const matchingBreadcrumb = error.breadcrumbs.find( + (breadcrumb: { category: string; message: string }) => + breadcrumb.category === expectedBreadcrumb.category && breadcrumb.message === expectedBreadcrumb.message, + ); + + expect(matchingBreadcrumb).toBeTruthy(); + expect(matchingBreadcrumb?.category).toBe(expectedBreadcrumb.category); + expect(matchingBreadcrumb?.message).toBe(expectedBreadcrumb.message); + + expect(error.transaction).toEqual('/client-error'); + expect(error.sdk.name).toEqual('sentry.javascript.nuxt'); + expect(error).toMatchObject({ + exception: { + values: [ + { + type: 'Error', + value: 'Error thrown in Error Boundary', + mechanism: { + handled: false, + }, + }, + ], + }, + }); + }); + test('shows parametrized route on button error', async ({ page }) => { const errorPromise = waitForError('nuxt-4', async errorEvent => { return errorEvent?.exception?.values?.[0]?.value === 'Error thrown from Param Route Button'; From e58f0791a818456b462f77b19c6774ebc4d086ca Mon Sep 17 00:00:00 2001 From: s1gr1d Date: Tue, 17 Dec 2024 13:40:41 +0100 Subject: [PATCH 2/2] review suggestions --- .../test-applications/nuxt-3/pages/client-error.vue | 6 +++--- .../test-applications/nuxt-3/tests/errors.client.test.ts | 2 +- .../test-applications/nuxt-4/app/pages/client-error.vue | 2 +- .../test-applications/nuxt-4/tests/errors.client.test.ts | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3/pages/client-error.vue b/dev-packages/e2e-tests/test-applications/nuxt-3/pages/client-error.vue index 9b9592d5a447..ea353639a3f4 100644 --- a/dev-packages/e2e-tests/test-applications/nuxt-3/pages/client-error.vue +++ b/dev-packages/e2e-tests/test-applications/nuxt-3/pages/client-error.vue @@ -7,10 +7,10 @@ const catchErr = () => { diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3/tests/errors.client.test.ts b/dev-packages/e2e-tests/test-applications/nuxt-3/tests/errors.client.test.ts index e1db84a5c0a3..a04ebf73f08d 100644 --- a/dev-packages/e2e-tests/test-applications/nuxt-3/tests/errors.client.test.ts +++ b/dev-packages/e2e-tests/test-applications/nuxt-3/tests/errors.client.test.ts @@ -34,7 +34,7 @@ test.describe('client-side errors', async () => { }); await page.goto(`/client-error`); - await page.locator('#errorBtn3').click(); + await page.locator('#error-in-error-boundary').click(); const error = await errorPromise; diff --git a/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/client-error.vue b/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/client-error.vue index 9b9592d5a447..9ec99d1e7471 100644 --- a/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/client-error.vue +++ b/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/client-error.vue @@ -11,6 +11,6 @@ const catchErr = () => { - + diff --git a/dev-packages/e2e-tests/test-applications/nuxt-4/tests/errors.client.test.ts b/dev-packages/e2e-tests/test-applications/nuxt-4/tests/errors.client.test.ts index 971b013ec074..6694ae851df1 100644 --- a/dev-packages/e2e-tests/test-applications/nuxt-4/tests/errors.client.test.ts +++ b/dev-packages/e2e-tests/test-applications/nuxt-4/tests/errors.client.test.ts @@ -34,7 +34,7 @@ test.describe('client-side errors', async () => { }); await page.goto(`/client-error`); - await page.locator('#errorBtn3').click(); + await page.locator('#error-in-error-boundary').click(); const error = await errorPromise;