我正在做一个使用Next.js 13和app目录结构的项目。我已经在app/sample目录中创建了error.tsx和not-found.tsx页面来处理错误和找不到的情况。但是，当我尝试使用这些页面时，它们并没有按预期显示。
以下是我的错误和未找到页面的代码：

• 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>
  )
}

在我的 * app/sample/page.tsx * 文件中，我故意触发这样的错误：

'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>
  )
}

我面临的问题是，当我通过单击localhost:3000/sample访问的页面上的"Throw Error"按钮来调用错误时，我希望看到我定义的自定义错误页面，但相反，我在屏幕左下角看到一个Next.js弹出通知，通知我错误。
我想知道我是否错过了任何配置，或者我是否需要在Next.js 13中做一些不同的事情，以正确显示自定义错误和未找到的页面。如有任何关于如何排除故障和解决此问题的指导或建议，我们将不胜感激。
在此先谢谢您！