下一页 .js 页面路由器 - 错误边界不起作用

问：

我正在尝试在Next.js页面路由器中使用错误边界。我有一个页面，我把所有这些放在其中：

import Layout from "@/components/Layout";
import { Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";

const ProductList = () => {
    throw new Error("Error");
    return <></>
};

const SuspensePage = () => {
    return (
        <Layout>
            <ErrorBoundary fallback={<div>Error</div>}>
                <Suspense fallback={<div>Loading...</div>}>
                    <ProductList />
                </Suspense>
            </ErrorBoundary>
        </Layout>
    );
};

export default SuspensePage;

谁能看到我在这里犯的错误？我尝试使用 fallbackRender 而不是 fallback，但没有帮助。我还尝试编写自己的自定义 ErrorBoundary 组件，它也没有帮助。 结果应该是我能够使用 TanstackQuery v5 中的 useSuspenseQuery 来获取产品。悬念工作正常，但任何错误都会破坏应用程序。 有什么想法吗？