From e19d9bc616fc393976b854b4f760142e28415c63 Mon Sep 17 00:00:00 2001 From: Dan Ott Date: Thu, 1 Jun 2023 23:44:13 -0400 Subject: [PATCH 1/2] Add the danger zone --- app/danger-zone/[...slug]/page.js | 5 ++ app/danger-zone/error-button.tsx | 22 ++++++ app/danger-zone/error.tsx | 40 ++++++++++ app/danger-zone/layout.tsx | 15 ++++ app/danger-zone/not-found.tsx | 19 +++++ app/danger-zone/page.tsx | 20 +++++ .../function-that-errors.tsx | 3 + .../server-component-error/page.tsx | 9 +++ app/global-error.tsx | 79 +++++++++++++++++++ app/layout.tsx | 14 ++++ app/not-found.tsx | 19 +++++ 11 files changed, 245 insertions(+) create mode 100644 app/danger-zone/[...slug]/page.js create mode 100644 app/danger-zone/error-button.tsx create mode 100644 app/danger-zone/error.tsx create mode 100644 app/danger-zone/layout.tsx create mode 100644 app/danger-zone/not-found.tsx create mode 100644 app/danger-zone/page.tsx create mode 100644 app/danger-zone/server-component-error/function-that-errors.tsx create mode 100644 app/danger-zone/server-component-error/page.tsx create mode 100644 app/global-error.tsx create mode 100644 app/not-found.tsx 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..2269d0c --- /dev/null +++ b/app/danger-zone/page.tsx @@ -0,0 +1,20 @@ +import ErrorButton from './error-button'; + +export const metadata = { + title: 'Welcome to the Danger Zone!', +}; + +export default function Home() { + return ( + <> +
+

+ Welcome to the Danger Zone! +

+
+ +
+
+ + ); +} 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 271b06e..dbf0a4a 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -39,6 +39,20 @@ export default function RootLayout({
  • Home
    • +
  • + Error + +
      +
    • + + Server Component Error + +
      • +
    • + Not Found +
      • +
    +
  • Awesome
      diff --git a/app/not-found.tsx b/app/not-found.tsx new file mode 100644 index 0000000..f0a0dc5 --- /dev/null +++ b/app/not-found.tsx @@ -0,0 +1,19 @@ +export const metadata = { + title: `¯\_(ツ)_/¯`, +}; + +export default function NotFound() { + return ( + <> +
      +

      + ¯\_(ツ)_/¯ +

      +
      + I'unno +
      +
      +
      + + ); +} From 7626e36ee0e25bb86c80018592de20db374c48b2 Mon Sep 17 00:00:00 2001 From: Dan Ott Date: Fri, 2 Jun 2023 08:40:43 -0400 Subject: [PATCH 2/2] move error sublinks into error page --- app/danger-zone/page.tsx | 14 ++++++++++++++ app/layout.tsx | 11 ----------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/app/danger-zone/page.tsx b/app/danger-zone/page.tsx index 2269d0c..02c9306 100644 --- a/app/danger-zone/page.tsx +++ b/app/danger-zone/page.tsx @@ -1,3 +1,4 @@ +import Link from 'next/link'; import ErrorButton from './error-button'; export const metadata = { @@ -15,6 +16,19 @@ export default function Home() {
    • +
    +

    Other Errors:

    + +
    ); } diff --git a/app/layout.tsx b/app/layout.tsx index dbf0a4a..c225e25 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -41,17 +41,6 @@ export default function RootLayout({
  • Error - -
  • Awesome