From c8d6486f5195ab21ea00d822127721649b07d05a Mon Sep 17 00:00:00 2001 From: Federico del Mazo Date: Thu, 15 Aug 2024 18:28:16 -0300 Subject: [PATCH 1/4] Handle out-of-react json parsing error --- src/DataContext.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/DataContext.js b/src/DataContext.js index cf1c482..b8b824b 100644 --- a/src/DataContext.js +++ b/src/DataContext.js @@ -15,10 +15,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(); From d42f93635fbb14517dd0c9a5a42c2d06bc81e06f Mon Sep 17 00:00:00 2001 From: Federico del Mazo Date: Thu, 15 Aug 2024 18:28:46 -0300 Subject: [PATCH 2/4] Add a catch-all boundary for unexpected errors --- package-lock.json | 21 +++++++++++++++++++++ package.json | 1 + src/index.js | 23 +++++++++++++++++------ 3 files changed, 39 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index adc2001..f14be1c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,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", @@ -14880,6 +14881,18 @@ "react": "^18.2.0" } }, + "node_modules/react-error-boundary": { + "version": "4.0.13", + "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.13.tgz", + "integrity": "sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.12.5" + }, + "peerDependencies": { + "react": ">=16.13.1" + } + }, "node_modules/react-error-overlay": { "version": "6.0.11", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", @@ -28882,6 +28895,14 @@ "scheduler": "^0.23.0" } }, + "react-error-boundary": { + "version": "4.0.13", + "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.13.tgz", + "integrity": "sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==", + "requires": { + "@babel/runtime": "^7.12.5" + } + }, "react-error-overlay": { "version": "6.0.11", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", diff --git a/package.json b/package.json index 06d3e4c..3717a66 100644 --- 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/index.js b/src/index.js index 70fb12f..47a2d26 100644 --- a/src/index.js +++ b/src/index.js @@ -2,17 +2,28 @@ 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 ( - - - - - + { + console.warn( + "Hubo un error inesperado. Se limpian los datos guardados", + error, + ); + localStorage.setItem("fiubaplan", JSON.stringify({})); + }} + > + + + + + + ); }; From 3004e6daad98a82ec31956ac144530b0885b99ec Mon Sep 17 00:00:00 2001 From: "Axel C. Lopez" Date: Fri, 16 Aug 2024 16:37:13 -0300 Subject: [PATCH 3/4] move reset to onReset and retry render --- src/index.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 47a2d26..ce7d690 100644 --- a/src/index.js +++ b/src/index.js @@ -8,13 +8,20 @@ import { DataProvider } from "./DataContext"; import customTheme from "./theme"; const App = () => { + // const {setErrorToast} = React.useContext(DataContext); + return ( { + fallbackRender={({ error, resetErrorBoundary }) => { console.warn( "Hubo un error inesperado. Se limpian los datos guardados", - error, + error ); + // Llamamos resetErrorBoundary() para resetear el error boundary y volver + // a intentar el render + resetErrorBoundary(); + }} + onReset={() => { localStorage.setItem("fiubaplan", JSON.stringify({})); }} > @@ -33,5 +40,5 @@ const root = ReactDOM.createRoot(container); root.render( - , + ); From 43a3cfe33d9dd67cbfc969555a29e0c49b907347 Mon Sep 17 00:00:00 2001 From: Federico del Mazo Date: Sun, 18 Aug 2024 12:21:16 -0300 Subject: [PATCH 4/4] Remove unused code --- src/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/index.js b/src/index.js index ce7d690..c7f5ee8 100644 --- a/src/index.js +++ b/src/index.js @@ -8,8 +8,6 @@ import { DataProvider } from "./DataContext"; import customTheme from "./theme"; const App = () => { - // const {setErrorToast} = React.useContext(DataContext); - return ( {