diff --git a/test/apps/nextjs/app/error-test/error.tsx b/test/apps/nextjs/app/error-test/error.tsx index 072ebbdbbf..99a2683002 100644 --- a/test/apps/nextjs/app/error-test/error.tsx +++ b/test/apps/nextjs/app/error-test/error.tsx @@ -4,15 +4,18 @@ import { addNextjsError } from '@datadog/browser-rum-nextjs' import Link from 'next/link' -import { useEffect } from 'react' +import { useEffect, useState } from 'react' export default function ErrorBoundary({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) { + const [errorReported, setErrorReported] = useState(false) + useEffect(() => { addNextjsError(error) + setErrorReported(true) }, [error]) return ( -
+

Something went wrong!

{error.digest &&

Digest: {error.digest}

} diff --git a/test/apps/nextjs/pages/pages-router/error-test.tsx b/test/apps/nextjs/pages/pages-router/error-test.tsx index 9ec73b34d1..13ba97fe45 100644 --- a/test/apps/nextjs/pages/pages-router/error-test.tsx +++ b/test/apps/nextjs/pages/pages-router/error-test.tsx @@ -1,6 +1,6 @@ import { ErrorBoundary } from '@datadog/browser-rum-nextjs' import type { ErrorBoundaryFallback } from '@datadog/browser-rum-nextjs' -import { useState } from 'react' +import { useState, useEffect } from 'react' import Link from 'next/link' function ErrorThrower() { @@ -13,14 +13,22 @@ function ErrorThrower() { ) } -const ErrorFallback: ErrorBoundaryFallback = ({ error, resetError }) => ( -
-

{error.message}

- -
-) +const ErrorFallback: ErrorBoundaryFallback = ({ error, resetError }) => { + const [errorReported, setErrorReported] = useState(false) + + useEffect(() => { + setErrorReported(true) + }, [error]) + + return ( +
+

{error.message}

+ +
+ ) +} export default function ErrorTestPage() { return ( diff --git a/test/e2e/scenario/nextjsPlugin.scenario.ts b/test/e2e/scenario/nextjsPlugin.scenario.ts index 395e695c71..deee749a17 100644 --- a/test/e2e/scenario/nextjsPlugin.scenario.ts +++ b/test/e2e/scenario/nextjsPlugin.scenario.ts @@ -206,16 +206,12 @@ test.describe('nextjs - errors', () => { createTest('should report client-side error') .withRum() .withNextjsApp(router) - .run(async ({ page, flushEvents, intakeRegistry, withBrowserLogs, browserName }) => { - test.skip( - browserName === 'firefox', - 'firefox is sending the errors in two separate batches, however the last batch is delayed making the test setup to miss it' - ) + .run(async ({ page, flushEvents, intakeRegistry, withBrowserLogs }) => { await page.click('text=Go to Error Test') await page.waitForURL(`**${viewPrefix}/error-test`) await page.click('[data-testid="trigger-error"]') - await page.waitForSelector('[data-testid="error-boundary"]') + await page.waitForSelector('[data-testid="error-boundary"][data-error-reported]') await flushEvents() @@ -236,7 +232,7 @@ test.describe('nextjs - errors', () => { .withNextjsApp(router) .run(async ({ page, flushEvents, intakeRegistry, withBrowserLogs }) => { await page.click('text=Go to Server Error') - await page.waitForSelector('[data-testid="error-boundary"]') + await page.waitForSelector('[data-testid="error-boundary"][data-error-reported]') await flushEvents()