Skip to content

Commit daa84dd

Browse files
committed
test(e2e): tests for capturing inside error boundaries in nextjs
1 parent 9921bc5 commit daa84dd

21 files changed

+274
-13
lines changed

e2e/capture/capture-flood/capture-flood.spec.ts

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,12 @@ import { getDirname } from "../../utils";
55

66
const { test } = createNextTest({
77
path: join(getDirname(import.meta.url), 'app'),
8+
port: 3004,
89
dependencies: {
910
"useflytrap": `link:${join(getDirname(import.meta.url), '..', '..', '..')}`
1011
}
1112
})
1213

13-
// @todo: we need to install `useflytrap` by path
14-
// to test out the bug fix.
15-
// "useflytrap": "link:/Users/rasmus/Desktop/DEV/Web/flytrap-libs",
16-
17-
1814
test("flood of captures are ignored and doesn't affect app performance", async ({ page }) => {
1915
await page.goto('/');
2016

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
'use client' // Error components must be Client Components
2+
3+
import { useEffect } from 'react'
4+
5+
export default function Error({ error, reset }) {
6+
useEffect(() => {
7+
// Log the error to an error reporting service
8+
console.error(error)
9+
}, [error])
10+
11+
return (
12+
<div>
13+
<h2>Root Page Error Boundary</h2>
14+
<button
15+
onClick={
16+
// Attempt to recover by trying to re-render the segment
17+
() => reset()
18+
}
19+
>
20+
Try again
21+
</button>
22+
</div>
23+
)
24+
}
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
'use client'
2+
3+
import { useEffect } from 'react'
4+
5+
export default function GlobalError({ error, reset }) {
6+
useEffect(() => {
7+
// Log the error to an error reporting service
8+
console.error(error)
9+
}, [error])
10+
11+
return (
12+
<div>
13+
<h2>Root Layout Error Boundary</h2>
14+
<button
15+
onClick={
16+
// Attempt to recover by trying to re-render the segment
17+
() => reset()
18+
}
19+
>
20+
Try again
21+
</button>
22+
</div>
23+
)
24+
}
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default function RootLayout({ children }) {
2+
return (
3+
<html>
4+
<head></head>
5+
<body>{children}</body>
6+
</html>
7+
)
8+
}
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
'use client' // Error components must be Client Components
2+
3+
import { useEffect } from 'react'
4+
5+
export default function Error({ error, reset }) {
6+
useEffect(() => {
7+
// Log the error to an error reporting service
8+
console.error(error)
9+
}, [error])
10+
11+
return (
12+
<div>
13+
<h2>Nested Page Error Boundary</h2>
14+
<button
15+
onClick={
16+
// Attempt to recover by trying to re-render the segment
17+
() => reset()
18+
}
19+
>
20+
Try again
21+
</button>
22+
</div>
23+
)
24+
}
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export default function RootLayout({ children }) {
2+
return (
3+
<html>
4+
<head></head>
5+
<body>
6+
<span>Nested Layout</span>
7+
{children}
8+
</body>
9+
</html>
10+
)
11+
}
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
'use client';
2+
3+
export default function NestedPage() {
4+
function functionThatThrows() {
5+
throw new Error('Nested Page Error')
6+
}
7+
8+
return (
9+
<main>
10+
<h1>Nested page</h1>
11+
<button onClick={functionThatThrows}>Trigger error boundary</button>
12+
</main>
13+
);
14+
}
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default function Home() {
2+
return (
3+
<main>
4+
</main>
5+
);
6+
}
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
'use client' // Error components must be Client Components
2+
3+
import { useEffect } from 'react'
4+
5+
export default function ServerError({ error, reset }) {
6+
useEffect(() => {
7+
// Log the error to an error reporting service
8+
console.error(error)
9+
}, [error])
10+
11+
return (
12+
<div>
13+
<h2>Server Component Error Boundary</h2>
14+
<button
15+
onClick={
16+
// Attempt to recover by trying to re-render the segment
17+
() => reset()
18+
}
19+
>
20+
Try again
21+
</button>
22+
</div>
23+
)
24+
}
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function ServerComponentPage() {
2+
throw new Error('Server Component Error')
3+
}

0 commit comments

Comments
 (0)