testing error page

src/index.js

@@ -7,15 +7,25 @@ import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
 import { AnimatePresence } from "framer-motion";
 import Home from "./pages/Home.jsx";
 import Profile from "./pages/Profile.jsx";
-import {ErrorBoundary} from "./components/ErrorBoundary.jsx";
+import { ErrorBoundary } from "react-error-boundary";
+// import { ErrorBoundary } from "./components/ErrorBoundary.jsx";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 
+function fallbackRender({ error, resetErrorBoundary }) {
+	return (
+		<div role='alert'>
+			<p>Something went wrong:</p>
+			<pre style={{ color: "red" }}>{error.message}</pre>
+		</div>
+	);
+}
+
 root.render(
 	<React.StrictMode>
 		<UserContextProvider>
 			<BrowserRouter>
-				<ErrorBoundary fallback={<p>Something went wrong</p>}>
+				<ErrorBoundary fallbackRender={fallbackRender}>
 					<App />
 				</ErrorBoundary>
 			</BrowserRouter>