test(nuxt): Add E2E test with NuxtErrorBoundary (#14754)

Adding a test to make sure error events bubble up when using `NuxtErrorBoundary`
getsentry · Dec 18, 2024 · 7f5dd11 · 7f5dd11
1 parent 9e7b949
commit 7f5dd11
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 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
@@ -1,11 +1,16 @@
 <script setup>
 import ErrorButton from '../components/ErrorButton.vue';
+
+const catchErr = () => {
+  console.log('Additional functionality in NuxtErrorBoundary');
+}
 </script>
 
 <template>
   <ErrorButton id="errorBtn"  error-text="Error thrown from Nuxt-3 E2E test app"/>
   <ErrorButton id="errorBtn2" error-text="Another Error thrown from Nuxt-3 E2E test app"/>
-</template>
-
-
 
+  <NuxtErrorBoundary @error="catchErr">
+    <ErrorButton id="error-in-error-boundary" error-text="Error thrown in Error Boundary"/>
+  </NuxtErrorBoundary>
+</template>
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
@@ -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('#error-in-error-boundary').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
@@ -1,11 +1,16 @@
 <script setup>
 import ErrorButton from '../components/ErrorButton.vue';
+
+const catchErr = () => {
+  console.log('Additional functionality in NuxtErrorBoundary');
+}
 </script>
 
 <template>
   <ErrorButton id="errorBtn"  error-text="Error thrown from Nuxt-4 E2E test app"/>
   <ErrorButton id="errorBtn2" error-text="Another Error thrown from Nuxt-4 E2E test app"/>
-</template>
-
-
 
+  <NuxtErrorBoundary @error="catchErr">
+    <ErrorButton id="error-in-error-boundary" error-text="Error thrown in Error Boundary"/>
+  </NuxtErrorBoundary>
+</template>
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
@@ -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('#error-in-error-boundary').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';