diff --git a/app/danger-zone/[...slug]/page.js b/app/danger-zone/[...slug]/page.js new file mode 100644 index 0000000..d95e83b --- /dev/null +++ b/app/danger-zone/[...slug]/page.js @@ -0,0 +1,5 @@ +import { notFound } from 'next/navigation'; + +export default async function Page() { + notFound(); +} diff --git a/app/danger-zone/error-button.tsx b/app/danger-zone/error-button.tsx new file mode 100644 index 0000000..7451c36 --- /dev/null +++ b/app/danger-zone/error-button.tsx @@ -0,0 +1,22 @@ +'use client'; +import { useState } from 'react'; + +export default function ErrorButton() { + const [clicked, setClicked] = useState(false); + + if (clicked) { + throw new Error('This is why the call it the Danger Zone.'); + } + + return ( + + ); +} diff --git a/app/danger-zone/error.tsx b/app/danger-zone/error.tsx new file mode 100644 index 0000000..ddb3e9c --- /dev/null +++ b/app/danger-zone/error.tsx @@ -0,0 +1,40 @@ +'use client'; // Error components must be Client Components + +import { useEffect } from 'react'; + +export default function Error({ + error, + reset, +}: { + error: Error; + reset: () => void; +}) { + useEffect(() => { + // Log the error to an error reporting service + console.error(error.message); + }, [error]); + + return ( +
+
+

+ Something went wrong! +

+
+ Oh no! +
+
+
+ Error: {error.message} +
+ +
+
+
+ ); +} diff --git a/app/danger-zone/layout.tsx b/app/danger-zone/layout.tsx new file mode 100644 index 0000000..e39211e --- /dev/null +++ b/app/danger-zone/layout.tsx @@ -0,0 +1,15 @@ +export default function Layout({ children }: { children: React.ReactNode }) { + return ( +
+
+

+ The Danger Zone +

+
+ Yikes! +
+
+ {children} +
+ ); +} diff --git a/app/danger-zone/not-found.tsx b/app/danger-zone/not-found.tsx new file mode 100644 index 0000000..520daea --- /dev/null +++ b/app/danger-zone/not-found.tsx @@ -0,0 +1,19 @@ +export const metadata = { + title: `Danger Not Found`, +}; + +export default function NotFound() { + return ( + <> +
+

+ Danger Not Found +

+
+ No danger here! +
+
+
+ + ); +} diff --git a/app/danger-zone/page.tsx b/app/danger-zone/page.tsx new file mode 100644 index 0000000..02c9306 --- /dev/null +++ b/app/danger-zone/page.tsx @@ -0,0 +1,34 @@ +import Link from 'next/link'; +import ErrorButton from './error-button'; + +export const metadata = { + title: 'Welcome to the Danger Zone!', +}; + +export default function Home() { + return ( + <> +
+

+ Welcome to the Danger Zone! +

+
+ +
+
+
+

Other Errors:

+ +
+ + ); +} diff --git a/app/danger-zone/server-component-error/function-that-errors.tsx b/app/danger-zone/server-component-error/function-that-errors.tsx new file mode 100644 index 0000000..3125675 --- /dev/null +++ b/app/danger-zone/server-component-error/function-that-errors.tsx @@ -0,0 +1,3 @@ +export async function fnThatErrors() { + throw new Error('This message will not appear in production'); +} diff --git a/app/danger-zone/server-component-error/page.tsx b/app/danger-zone/server-component-error/page.tsx new file mode 100644 index 0000000..bdd4c78 --- /dev/null +++ b/app/danger-zone/server-component-error/page.tsx @@ -0,0 +1,9 @@ +import { fnThatErrors } from './function-that-errors'; + +export const dynamic = 'force-dynamic'; + +export default async function Page() { + await fnThatErrors(); + + return
This will totally work
; +} diff --git a/app/global-error.tsx b/app/global-error.tsx new file mode 100644 index 0000000..b7be956 --- /dev/null +++ b/app/global-error.tsx @@ -0,0 +1,79 @@ +'use client'; +import Link from 'next/link'; +import './globals.css'; +import { Inter } from 'next/font/google'; +const inter = Inter({ subsets: ['latin'] }); +import { useEffect } from 'react'; + +export default function GlobalError({ + error, + reset, +}: { + error: Error; + reset: () => void; +}) { + useEffect(() => { + // Log the error to an error reporting service + console.error(error); + }, [error]); + + return ( + + +
+
+
+

+ Something went wrong! +

+
+
+ {new Date().toLocaleTimeString()} +
+
+ +
+ Error: {error.message} +
+ +
+ +
+
+ + + ); +} diff --git a/app/layout.tsx b/app/layout.tsx index 7b712c4..04624d8 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -44,6 +44,9 @@ export default function RootLayout({
  • Interactive
    • +
  • + Error +
  • Awesome