ajout de l'error handeling (non finis) et rediretion vers une page d'erreur en cas de page not found 🐛:

cryptide_project/src/App.tsx

@@ -40,6 +40,10 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import messagesFr from './Translations/fr.json';
 import messagesEn from './Translations/en.json';
 
+/* Gestion d' erreur */
+import ErrorBoundary from './Error/ErrorBoundary';
+import ErrorPage from './Error/ErrorPage';
+
 const messages = {
   fr: messagesFr,
   en: messagesEn,
@@ -69,31 +73,35 @@ function App() {
   //   </header>
   // </div>
     
-    <AuthProvider>
-      <GameProvider>
-        {/*@ts-ignore*/}
-        <IntlProvider locale={locale} messages={messages[locale]}>
-          <ThemeProvider>
-            <BrowserRouter>  
-              {hasNavbarVisible && <AppNavbar changeLocale={changeLocale} />}
-              <Routes>
-                <Route path="/" element={<Home />} />
-                <Route path="/login" element={<Login />} />
-                <Route path="/signup" element={<SignUp />} />
-                <Route path="/play" element={<Play/>} />
-                <Route path="/lobby" element={<Lobby/>} />
-                <Route path="/endgame" element={<EndGame/>} />
-                <Route path="/game" element={<InGame locale={locale} changeLocale={changeLocale}/>}/>
-                <Route path="/info" element={<InfoPage locale={locale} changeLocale={changeLocale}/>} />
-                <Route path="/profile" element={<Profile/>} />
-                <Route path="/join" element={<Lobbies/>}/>
-                {/* <Route path="/solo" element={<SoloGame locale={locale} changeLocale={changeLocale} />}/>   */}
-              </Routes>
-            </BrowserRouter>
-          </ThemeProvider>
-        </IntlProvider>
-      </GameProvider>
-    </AuthProvider>
+    <ErrorBoundary>
+      <AuthProvider>
+        <GameProvider>
+          {/*@ts-ignore*/}
+          <IntlProvider locale={locale} messages={messages[locale]}>
+            <ThemeProvider>
+              <BrowserRouter>  
+                {hasNavbarVisible && <AppNavbar changeLocale={changeLocale} />}
+                <Routes>
+                  <Route path="/" element={<Home />} />
+                  <Route path="/login" element={<Login />} />
+                  <Route path="/signup" element={<SignUp />} />
+                  <Route path="/play" element={<Play/>} />
+                  <Route path="/lobby" element={<Lobby/>} />
+                  <Route path="/endgame" element={<EndGame/>} />
+                  <Route path="/game" element={<InGame locale={locale} changeLocale={changeLocale}/>}/>
+                  <Route path="/info" element={<InfoPage locale={locale} changeLocale={changeLocale}/>} />
+                  <Route path="/profile" element={<Profile/>} />
+                  <Route path="/join" element={<Lobbies/>}/>
+                  {/* <Route path="/solo" element={<SoloGame locale={locale} changeLocale={changeLocale} />}/>   */}
+
+                  <Route path="*" element={<ErrorPage msg='404 not found' />} /> {/* page 404 */}
+                </Routes>
+              </BrowserRouter>
+            </ThemeProvider>
+          </IntlProvider>
+        </GameProvider>
+      </AuthProvider>
+    </ErrorBoundary>
   );
 }
 

cryptide_project/src/Error/ErrorBoundary.tsx

@@ -0,0 +1,67 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import ErrorPage from './ErrorPage';
+
+interface ErrorBoundaryProps {
+    children: ReactNode;
+}
+
+interface ErrorBoundaryState {
+    hasError: boolean;
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps) {
+        super(props);
+        this.state = {
+            hasError: false,
+        };
+    }
+
+    static getDerivedStateFromError(): ErrorBoundaryState {
+        return { hasError: true };
+    }
+
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+        // Vous pouvez également enregistrer l'erreur dans un service de journalisation
+        console.error('Error caught by ErrorBoundary:', error, errorInfo);
+    }
+
+    render(): ReactNode {
+        if (this.state.hasError) {
+            // Vous pouvez personnaliser cette partie avec une page d'erreur
+            //return <h1>Something went wrong. Please try again later.</h1>;
+            return <ErrorPage/>;
+        }
+
+        return this.props.children;
+    }
+}
+
+export default ErrorBoundary;
+
+
+// interface ErrorBoundaryProps {
+//         children: ReactNode;
+//     }
+
+    
+// class ErrorBoundary extends React.Component <ErrorBoundaryProps>{
+//     state = { hasError : true }
+//     //@ts-ignore
+//     static getDerivedStateFromError(error){
+//         return { hasError : true};
+//     }
+
+//     componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+//         console.log(error, errorInfo);
+//     }
+
+//     render(){
+//         if (this.state.hasError){
+//             return <ErrorPage/>;
+//         }
+//         return this.props.children;
+//     }
+// }
+
+// export default ErrorBoundary;

cryptide_project/src/Error/ErrorPage.tsx

@@ -0,0 +1,28 @@
+
+import React from 'react';
+import { useTheme } from '../Style/ThemeContext';
+import { Link } from 'react-router-dom';
+import './ErrorStyle.css';
+import { FormattedMessage } from 'react-intl';
+
+
+
+//@ts-ignore
+function ErrorPage({ msg = "Something is really wrong"}) {
+    
+    const theme = useTheme();
+
+    // const mystyle = {
+    //     backgroundColor: "#0064E0",
+    // };
+
+    return (
+        <div className='mainErrorDiv'>
+            <div className='titleError'>
+                <h1>{msg}</h1>
+            </div>
+        </div>
+    );
+}
+
+export default ErrorPage;

cryptide_project/src/Error/ErrorStyle.css

@@ -0,0 +1,15 @@
+
+.mainErrorDiv{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+
+.titleError{
+    border: solid 2px #C70039;
+    border-radius: 10px;
+    margin: 15px;
+    padding: 10px;  
+    box-shadow: 5px 5px 5px #900C3F;    
+}