[Sentry] ChunkLoadErrors

[XavierJp]

https://sentry.io/answers/chunk-load-errors-javascript/

[johangirod]

Une piste intéressante soulevée par un thread StackOverflow m'a permis d'avancer.

J'ai réussi à reproduire l'erreur en naviguant rapidement entre les pages. La requête du chunk est donc annulée avant le changement de page, ce qui causerait le ChunkLoadError.

La bonne nouvelle, c'est que la page d'erreur ne s'affiche «que» pendant le chargement de la prochaine page. Dès que celle-ci a fini, elle s'affiche bien.

Si c'en est bien la cause principale, cette erreur n'aurait pas lieu si on utilisait le composant Link de Next, puisque le chargement du chunk précédent ne serait pas arrêté. Je pense qu'il faut qu'on se repose la question de ce qu'on gagne à ne pas faire le switch vs ce qu'on y perd.

Je réfléchis à une solution de contournement en attendant.

[johangirod]

J'ai trouvé une idée pour améliorer l'expérience usager dans ce cas.

1. Créer un nouveau dossier parent avec un layout.js pour factoriser toute la partie au-dessus des onglets pour les routes entreprises, dirigeants, etc...
2. Ajouter un error.js au même niveau qui affiche « Chargement en cours » lorsque l'erreur est une instance de ChunkLoadError et qu'un évènement de changement de page a été détecté (à peu près la même logique utilisé pour requalifier les TypeError dans le client http frontend

Cela permettra d'afficher un état intermédiaire de chargement :

Ceci étant dit, je suis de plus en plus convaincu qu'il serait préférable de créer composant Link custom qui :

• utiliserait le Link de next
• forcerait les aria-label dans les props
• abstrairait la logique « ouvrir dans une nouvelle fenêtre » dans une prop

Si on quitte next un jour, il suffira de remplacer le Link de next par un a dans l'implémentation.