Merge pull request #111 from FdelMazo/error-handling

Manejar errores inesperados
FdelMazo · Aug 18, 2024 · 9f85dfb · 9f85dfb
2 parents 819e4fc + 43a3cfe
commit 9f85dfb
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "react": "^18.2.0",
     "react-big-calendar": "^1.13.1",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.13",
     "react-hotkeys-hook": "^4.4.0",
     "react-scripts": "^5.0.1",
     "react-snowfall": "^1.1.1",

diff --git a/src/DataContext.js b/src/DataContext.js
@@ -19,10 +19,16 @@ if (window.location.hash) {
 }
 
 // Si el usuario tiene una sesión de cuando la aplicación tenía horarios estaticos
-// en vez de importados del SIU, le limpiamos la data
-const json = JSON.parse(window.localStorage.getItem("fiubaplan"));
-if (json && json["cuatrimestre"]) {
-  localStorage.setItem("fiubaplan", JSON.stringify({}));
+// en vez de importados del SIU (la key `cuatrimestre`), le limpiamos la data
+let json = null;
+try {
+  json = JSON.parse(window.localStorage.getItem("fiubaplan"));
+} catch (e) {
+  console.warn("Error al parsear el JSON del localStorage", e);
+} finally {
+  if (!json || json["cuatrimestre"]) {
+    window.localStorage.setItem("fiubaplan", JSON.stringify({}));
+  }
 }
 
 export const DataContext = React.createContext();

diff --git a/src/index.js b/src/index.js
@@ -2,17 +2,33 @@ import { ChakraProvider, Flex } from "@chakra-ui/react";
 import "@fontsource/source-sans-pro/400.css";
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { ErrorBoundary } from "react-error-boundary";
 import Body from "./components/Body";
-import customTheme from "./theme";
 import { DataProvider } from "./DataContext";
+import customTheme from "./theme";
 
 const App = () => {
   return (
-    <DataProvider>
-      <Flex direction="columns" h="100vh">
-        <Body />
-      </Flex>
-    </DataProvider>
+    <ErrorBoundary
+      fallbackRender={({ error, resetErrorBoundary }) => {
+        console.warn(
+          "Hubo un error inesperado. Se limpian los datos guardados",
+          error
+        );
+        // Llamamos resetErrorBoundary() para resetear el error boundary y volver
+        // a intentar el render
+        resetErrorBoundary();
+      }}
+      onReset={() => {
+        localStorage.setItem("fiubaplan", JSON.stringify({}));
+      }}
+    >
+      <DataProvider>
+        <Flex direction="columns" h="100vh">
+          <Body />
+        </Flex>
+      </DataProvider>
+    </ErrorBoundary>
   );
 };
 
@@ -22,5 +38,5 @@ const root = ReactDOM.createRoot(container);
 root.render(
   <ChakraProvider theme={customTheme}>
     <App />
-  </ChakraProvider>,
+  </ChakraProvider>
 );