javascript - Next.js 13 Error and Not Found Pages Not Displaying Properly - Stack Overflow

admin管理员组

文章数量:1312805

I'm working on a project using Next.js 13 and the app directory structure. I've created error.tsx and not-found.tsx pages in the app/sample directory to handle errors and not-found scenarios. However, when I try to use these pages, they're not displaying as expected.

Here's the code for my error and not-found pages:

app/sample/error.tsx:

'use client'

import React from 'react'

export default function Error({
  error,
  reset,
}: {
  error: Error
  reset: () => void
}) {
  React.useEffect(() => {
    console.log('logging error:', error)
  }, [error])

  return (
    <div className="space-y-4">
      <h2 className="text-lg font-bold">Error</h2>
      <p className="text-sm">{error?.message}</p>
      <div>
        <button onClick={() => reset()}>Try Again</button>
      </div>
    </div>
  )
}

app/sample/not-found.tsx:

export default function NotFound() {
  return (
    <div className="space-y-4">
      <h2 className="text-lg font-bold">Not Found</h2>
      <p className="text-sm">Could not find requested resource</p>
    </div>
  )
}

In my app/sample/page.tsx file, I'm deliberately triggering an error like this:

'use client'

export default function Sample() {
  const error = () => {
    throw new Error(new Date().toISOString())
  }

  return (
    <main className="flex flex-col items-center justify-between p-24">
      Sample
      <button onClick={error}>Throw Error</button>
    </main>
  )
}

The issue I'm facing is that when I invoke the error by clicking the "Throw Error" button on the page accessed via localhost:3000/sample, I expect to see the custom error page I've defined, but instead, I get a Next.js pop-up notification on the bottom left of the screen that informs me of the error.

I'm wondering if I've missed any configuration or if there's something I need to do differently in Next.js 13 to properly display the custom error and not-found pages. Any guidance or suggestions on how to troubleshoot and resolve this issue would be greatly appreciated.

Thank you in advance!

I'm working on a project using Next.js 13 and the app directory structure. I've created error.tsx and not-found.tsx pages in the app/sample directory to handle errors and not-found scenarios. However, when I try to use these pages, they're not displaying as expected.

Here's the code for my error and not-found pages:

app/sample/error.tsx:

'use client'

import React from 'react'

export default function Error({
  error,
  reset,
}: {
  error: Error
  reset: () => void
}) {
  React.useEffect(() => {
    console.log('logging error:', error)
  }, [error])

  return (
    <div className="space-y-4">
      <h2 className="text-lg font-bold">Error</h2>
      <p className="text-sm">{error?.message}</p>
      <div>
        <button onClick={() => reset()}>Try Again</button>
      </div>
    </div>
  )
}

app/sample/not-found.tsx:

export default function NotFound() {
  return (
    <div className="space-y-4">
      <h2 className="text-lg font-bold">Not Found</h2>
      <p className="text-sm">Could not find requested resource</p>
    </div>
  )
}

In my app/sample/page.tsx file, I'm deliberately triggering an error like this:

'use client'

export default function Sample() {
  const error = () => {
    throw new Error(new Date().toISOString())
  }

  return (
    <main className="flex flex-col items-center justify-between p-24">
      Sample
      <button onClick={error}>Throw Error</button>
    </main>
  )
}

The issue I'm facing is that when I invoke the error by clicking the "Throw Error" button on the page accessed via localhost:3000/sample, I expect to see the custom error page I've defined, but instead, I get a Next.js pop-up notification on the bottom left of the screen that informs me of the error.

I'm wondering if I've missed any configuration or if there's something I need to do differently in Next.js 13 to properly display the custom error and not-found pages. Any guidance or suggestions on how to troubleshoot and resolve this issue would be greatly appreciated.

Thank you in advance!

• javascript
• reactjs
• next.js

Share Improve this question Follow edited Sep 5, 2023 at 3:27 Shawn 1,67533 gold badges1919 silver badges5555 bronze badges asked Aug 23, 2023 at 20:18 Leonardo RamosLeonardo Ramos 8322 silver badges55 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Because error.js uses react error boundaries and they don't catch errors from event handlers. Check the yellow note here: https://legacy.reactjs/docs/error-boundaries.html

You could use an error state and throw the error when this state changes

I had a similar issue... I couldn't understand the cause for a long time, and through the process of elimination, I concluded (in my case) that the problem was with the <Providers> in layout.tsx (Providers.tsx → that wraps {children} with react-redux store Provider).

Because of it, the display for not-found.tsx wasn't triggering. With other errors - same!

→ I moved it to a separate ponent and wrapped only those ponents that use it...

upd; right way to trigger not-found:

import { notFound } from 'next/navigation';
...
<button onClick={notFound}>Throw 404 Error</button>

According to the official doc:

The not-found file is used to render UI when the notFound function is thrown within a route segment

and notFound() is something you call manually as seen in the official example here https://nextjs/docs/app/api-reference/functions/not-found

  if (!user) {
    notFound()
  }

Which means that throw new Error() will cause you to reach error page (which can only be visible in production build, development build shows you a model of error message and stack-trace instead) instead of Not Found page.

The suggestion here is to have you follow what the official document does and calls the notFound() accordingly. https://nextjs/docs/app/api-reference/functions/not-found

本文标签： javascriptNextjs 13 Error and Not Found Pages Not Displaying ProperlyStack Overflow