From 743acade0de2206796e13f324951a46243bfa88c Mon Sep 17 00:00:00 2001
From: Marc Rutkowski <marc@attractive-media.fr>
Date: Tue, 7 Nov 2023 18:50:03 +0100
Subject: [PATCH] Fait un rechargement complet de la page en cas d'erreur de
 chargement dynamique d'un composant

---
 .../src/app/pages/Auth/RecoverLandingPage.tsx |  3 +-
 .../src/app/pages/Auth/RegisterPage.tsx       |  3 +-
 .../src/app/pages/Auth/ResetPasswordPage.tsx  |  3 +-
 .../src/app/pages/Profil/ProfilPage.tsx       |  3 +-
 .../ToutesLesCollectivitesPage.tsx            |  3 +-
 .../collectivite/Accueil/AccueilPage.tsx      |  3 +-
 .../BibliothequeDocs/BibliothequeDocsPage.tsx |  3 +-
 .../Historique/JournalActivitePage.tsx        |  3 +-
 .../Indicateurs/IndicateursPage.tsx           |  3 +-
 .../ParcoursLabellisationPage.tsx             |  3 +-
 .../PersoReferentiel/PersoReferentielPage.tsx |  3 +-
 .../PersoReferentielThematiquePage.tsx        |  3 +-
 .../FicheAction/FicheActionPage.tsx           |  3 +-
 .../ParcoursCreationPlan/CreerPlanPage.tsx    |  3 +-
 .../ParcoursCreationPlan/ImporterPlanPage.tsx |  3 +-
 .../ParcoursCreationPlan/SelectionPage.tsx    |  3 +-
 .../PlanAction/PlanActionPage.tsx             |  3 +-
 .../PlansActions/PlansActionsPage.tsx         |  3 +-
 .../PlansActions/Synthese/SynthesePage.tsx    |  3 +-
 .../Synthese/SyntheseVue/SyntheseVuePage.tsx  |  3 +-
 .../collectivite/Referentiels/ActionPage.tsx  |  3 +-
 .../Referentiels/ReferentielsPage.tsx         |  3 +-
 .../pages/collectivite/Users/MembresPage.tsx  |  3 +-
 .../actions/ActionPreuvePanel/index.tsx       |  3 +-
 .../src/utils/lazy.ts                         | 35 +++++++++++++++++++
 25 files changed, 83 insertions(+), 24 deletions(-)
 create mode 100644 app.territoiresentransitions.react/src/utils/lazy.ts

diff --git a/app.territoiresentransitions.react/src/app/pages/Auth/RecoverLandingPage.tsx b/app.territoiresentransitions.react/src/app/pages/Auth/RecoverLandingPage.tsx
index e3d5e1058a3..26e2c768efd 100644
--- a/app.territoiresentransitions.react/src/app/pages/Auth/RecoverLandingPage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/Auth/RecoverLandingPage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 import {Spacer} from 'ui/dividers/Spacer';
 
diff --git a/app.territoiresentransitions.react/src/app/pages/Auth/RegisterPage.tsx b/app.territoiresentransitions.react/src/app/pages/Auth/RegisterPage.tsx
index b0a3195bb3a..236f5ef9559 100644
--- a/app.territoiresentransitions.react/src/app/pages/Auth/RegisterPage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/Auth/RegisterPage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 import {Spacer} from 'ui/dividers/Spacer';
 
diff --git a/app.territoiresentransitions.react/src/app/pages/Auth/ResetPasswordPage.tsx b/app.territoiresentransitions.react/src/app/pages/Auth/ResetPasswordPage.tsx
index d93029be22c..81c8e33ca8e 100644
--- a/app.territoiresentransitions.react/src/app/pages/Auth/ResetPasswordPage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/Auth/ResetPasswordPage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 import {Spacer} from 'ui/dividers/Spacer';
 
diff --git a/app.territoiresentransitions.react/src/app/pages/Profil/ProfilPage.tsx b/app.territoiresentransitions.react/src/app/pages/Profil/ProfilPage.tsx
index 9b14767e285..17977f4213b 100644
--- a/app.territoiresentransitions.react/src/app/pages/Profil/ProfilPage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/Profil/ProfilPage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const Profil = lazy(() => import('app/pages/Profil/Profil'));
diff --git a/app.territoiresentransitions.react/src/app/pages/ToutesLesCollectivites/ToutesLesCollectivitesPage.tsx b/app.territoiresentransitions.react/src/app/pages/ToutesLesCollectivites/ToutesLesCollectivitesPage.tsx
index c5dfcbcb011..d5c65538d25 100644
--- a/app.territoiresentransitions.react/src/app/pages/ToutesLesCollectivites/ToutesLesCollectivitesPage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/ToutesLesCollectivites/ToutesLesCollectivitesPage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const ToutesLesCollectivites = lazy(
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/Accueil/AccueilPage.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/Accueil/AccueilPage.tsx
index cd4c7bf4fe0..73ba05b2f49 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/Accueil/AccueilPage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/Accueil/AccueilPage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const Accueil = lazy(() => import('app/pages/collectivite/Accueil/Accueil'));
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/BibliothequeDocs/BibliothequeDocsPage.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/BibliothequeDocs/BibliothequeDocsPage.tsx
index a2c97f5799e..3476b456dc2 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/BibliothequeDocs/BibliothequeDocsPage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/BibliothequeDocs/BibliothequeDocsPage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const BibliothequeDocs = lazy(
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/Historique/JournalActivitePage.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/Historique/JournalActivitePage.tsx
index 108261278e8..adb5d3d2c62 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/Historique/JournalActivitePage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/Historique/JournalActivitePage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const JournalActivite = lazy(
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/IndicateursPage.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/IndicateursPage.tsx
index 71672535a1f..dcfecd09ac0 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/IndicateursPage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/IndicateursPage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const Indicateurs = lazy(
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/ParcoursLabellisation/ParcoursLabellisationPage.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/ParcoursLabellisation/ParcoursLabellisationPage.tsx
index 63e83a77c88..4c64f7bbe89 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/ParcoursLabellisation/ParcoursLabellisationPage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/ParcoursLabellisation/ParcoursLabellisationPage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const ParcoursLabellisation = lazy(
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/PersoReferentiel/PersoReferentielPage.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/PersoReferentiel/PersoReferentielPage.tsx
index 9b2db2751b5..1c89aab8557 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/PersoReferentiel/PersoReferentielPage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/PersoReferentiel/PersoReferentielPage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const PersoReferentiel = lazy(
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/PersoReferentielThematique/PersoReferentielThematiquePage.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/PersoReferentielThematique/PersoReferentielThematiquePage.tsx
index 9f99d7ec675..4991871f12d 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/PersoReferentielThematique/PersoReferentielThematiquePage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/PersoReferentielThematique/PersoReferentielThematiquePage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const PersoReferentielThematique = lazy(
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/FicheAction/FicheActionPage.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/FicheAction/FicheActionPage.tsx
index 0390b9c421b..57d6fccd4e4 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/FicheAction/FicheActionPage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/FicheAction/FicheActionPage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const FicheAction = lazy(
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/ParcoursCreationPlan/CreerPlanPage.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/ParcoursCreationPlan/CreerPlanPage.tsx
index cec0110b83f..e328ac7f41f 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/ParcoursCreationPlan/CreerPlanPage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/ParcoursCreationPlan/CreerPlanPage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const CreerPlan = lazy(
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/ParcoursCreationPlan/ImporterPlanPage.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/ParcoursCreationPlan/ImporterPlanPage.tsx
index 321d461facb..d60e9272eaf 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/ParcoursCreationPlan/ImporterPlanPage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/ParcoursCreationPlan/ImporterPlanPage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const ImporterPlan = lazy(
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/ParcoursCreationPlan/SelectionPage.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/ParcoursCreationPlan/SelectionPage.tsx
index 2027601c233..75b38f21dfa 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/ParcoursCreationPlan/SelectionPage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/ParcoursCreationPlan/SelectionPage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const Selection = lazy(
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/PlanAction/PlanActionPage.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/PlanAction/PlanActionPage.tsx
index 0ab3270424f..349b2c7104a 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/PlanAction/PlanActionPage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/PlanAction/PlanActionPage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const PlanAction = lazy(
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/PlansActionsPage.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/PlansActionsPage.tsx
index acead50c1de..37489012a2d 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/PlansActionsPage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/PlansActionsPage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const PlansActions = lazy(
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/Synthese/SynthesePage.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/Synthese/SynthesePage.tsx
index 583989a1dc5..a8f557a2a30 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/Synthese/SynthesePage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/Synthese/SynthesePage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const Synthese = lazy(
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/Synthese/SyntheseVue/SyntheseVuePage.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/Synthese/SyntheseVue/SyntheseVuePage.tsx
index 230ba5960e8..409d06b6dea 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/Synthese/SyntheseVue/SyntheseVuePage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/Synthese/SyntheseVue/SyntheseVuePage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const Vue = lazy(
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/Referentiels/ActionPage.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/Referentiels/ActionPage.tsx
index e5426069407..5be978c6adb 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/Referentiels/ActionPage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/Referentiels/ActionPage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {useParams} from 'react-router-dom';
 import {renderLoader} from 'utils/renderLoader';
 import {Referentiel} from 'types/litterals';
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/Referentiels/ReferentielsPage.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/Referentiels/ReferentielsPage.tsx
index 9a97feeaf44..f77f8189efc 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/Referentiels/ReferentielsPage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/Referentiels/ReferentielsPage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const ReferentielTabs = lazy(
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/Users/MembresPage.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/Users/MembresPage.tsx
index de5f05a5485..3290ac471d5 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/Users/MembresPage.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/Users/MembresPage.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const Membres = lazy(() => import('app/pages/collectivite/Users/Membres'));
diff --git a/app.territoiresentransitions.react/src/ui/shared/actions/ActionPreuvePanel/index.tsx b/app.territoiresentransitions.react/src/ui/shared/actions/ActionPreuvePanel/index.tsx
index 231348c3b13..f4d5414ab8a 100644
--- a/app.territoiresentransitions.react/src/ui/shared/actions/ActionPreuvePanel/index.tsx
+++ b/app.territoiresentransitions.react/src/ui/shared/actions/ActionPreuvePanel/index.tsx
@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 import {TActionPreuvePanelProps} from './ActionPreuvePanel';
 
diff --git a/app.territoiresentransitions.react/src/utils/lazy.ts b/app.territoiresentransitions.react/src/utils/lazy.ts
new file mode 100644
index 00000000000..6a06de941bd
--- /dev/null
+++ b/app.territoiresentransitions.react/src/utils/lazy.ts
@@ -0,0 +1,35 @@
+import {ComponentType, lazy as originalLazy} from 'react';
+
+type ImportComponent = () => Promise<{default: ComponentType<any>}>;
+
+const FORCE_REFRESH = 'force-refresh';
+
+// Encapsule la fonction `React.lazy` pour faire un rechargement complet de la
+// page en cas d'erreur de chargement dynamique d'un composant, et ce afin
+// d'éviter les `ChunkLoadError` lors des mises à jour du front.
+// Ref: https://gist.github.com/raphael-leger/4d703dea6c845788ff9eb36142374bdb#file-lazywithretry-js
+export const lazy = (importComponent: ImportComponent) =>
+  originalLazy((async () => {
+    // vérifie si on a déjà forcé le rechargement complet
+    const isPageHasBeenForceRefreshed = JSON.parse(
+      localStorage.getItem(FORCE_REFRESH) || 'false'
+    );
+
+    try {
+      // essaye de charger le composant
+      const component = await importComponent();
+
+      localStorage.setItem(FORCE_REFRESH, 'false');
+
+      return component;
+    } catch (error) {
+      // en cas d'erreur on essaye de faire un rechargement complet de la page
+      // si ça n'a pas déjà été tenté
+      if (!isPageHasBeenForceRefreshed) {
+        localStorage.setItem(FORCE_REFRESH, 'true');
+        return document.location.reload();
+      }
+
+      throw error;
+    }
+  }) as ImportComponent);