I added global-error.tsx file to the Next.js project v 13.4.16. I am wondering how I can simulate it to see how this looks like in UI during development.
I keep my global-error.tsx file on the same level as root layout.tsx file in app/[locale] directory (since I am using next-intl).
Is there any way to test it?
I have tried throwing an error in root layout file, but it seems to not catch this error. Instead of global-error page, I see Next.js error indicator.
Here is how my global-error looks like:
"use client";
import * as React from "react";
import { defaultLanguage } from "@/app/intl";
import { Layout } from "@/app/[locale]/home/HeroSection/Layout";
import { Navbar } from "@/app/[locale]/components/Navbar";
import Footer from "@/app/[locale]/components/Footer/Footer";
import { Box } from "@mui/material";
import Link from "next/link";
import { Button } from "@/app/[locale]/components/Button";
import Paragraph from "@/app/[locale]/components/ResponsiveText/Paragraph";
type Props = {
error: Error & { digest?: string };
reset: () => void;
};
const GlobalError = ({ error, reset }: Props) => {
return (
<html lang={defaultLanguage}>
<body>
<Navbar lng={defaultLanguage} />
<Box minHeight={"calc(100vh - 248px)"}>
<Paragraph>Something went wrong...</Paragraph>
<Button
href="/"
version={"dark"}
LinkComponent={Link}
variant="outlined"
>
Go back
</Button>
</Box>
<Footer />
</body>
</html>
);
};
export default GlobalError;
And here is how I am trying to test it in root layout:
export default async function LocaleLayout({
children,
params: { locale },
}: LocaleLayout) {
let messages;
try {
messages = (await import(`../../messages/${locale}.json`)).default;
} catch (error) {
notFound();
}
throw new Error("test");
return (
<html lang={locale}>
<body style={{ backgroundColor: "#695E48" }}>
<NextIntlClientProvider locale={locale} messages={messages}>
<ThemeRegistry options={{ key: "mui" }}>
{children}
<Footer />
<Analytics />
</ThemeRegistry>
</NextIntlClientProvider>
</body>
</html>
);
}
