Integré Sentry con mi sitio web hace unos días y noté que a veces los usuarios reciben este error en su consola:
ChunkLoadError: Loading chunk <CHUNK_NAME> failed. (error: <WEBSITE_PATH>/<CHUNK_NAME>-<CHUNK_HASH>.js)Así que investigué el problema en la web y descubrí algunos casos similares, pero relacionados con fragmentos faltantes causados por actualizaciones de versiones durante una sesión o problemas de almacenamiento en caché.
La principal diferencia entre estos casos y el mío es que se puede acceder a los fragmentos fallidos desde el navegador, por lo que el error de carga no depende de la actualización posterior al lanzamiento de los hash del fragmento sino (supongo) de algún problema relacionado con la red. Esta suposición se ve reforzada por esta estadística: alrededor del 90% de los dispositivos involucrados son móviles .
Finalmente, llego a la pregunta : ¿Debo manejar el problema de alguna manera (por ejemplo, volver a intentar cargar el fragmento si falla) o es mejor simplemente ignorarlo y dejar que el usuario actualice manualmente?
2021.09.28 edición:
Un mes después, el problema sigue ocurriendo, pero no he recibido ningún informe de los usuarios, también estoy grabando constantemente las sesiones de los usuarios con Hotjar, pero hasta ahora no se ha notado nada relevante.
Recientemente tuve una conversación con el soporte de Sentry que me ayudó a excluir la hipótesis relacionada con la red :
Nuestro React SDK no tiene caché sin conexión de forma predeterminada, cuando se captura un error, se enviará en ese momento. Si la aplicación no puede conectarse a Sentry para enviar el evento, se descartará y el SDK no intentará enviarlo nuevamente.
Rodolfo de Centinela
Puedo confirmar que el problema es bastante inusual, les comparto otra estadística interesante: los usuarios afectados desde la primera ocurrencia son 882 de 332.227 visitantes únicos (~0,26%) , pero noté que el 90% de las ocurrencias son de iOS (no dispositivos móviles genéricos como noté hace un mes), por lo que si calculo la misma proporción con usuarios de iOS (794 (90% de 882) de 128.444) estamos cerca de un 0,62%. Todavía pequeño pero definitivamente más relevante en iOS.
Lo más probable es que esto suceda porque el navegador está almacenando en caché el archivo HTML principal de su aplicación, como index.html , que sirve los paquetes webpack y el manifiesto .
Primero, me aseguraría de que su servidor web envíe los encabezados de respuesta HTTP correctos para no almacenar en caché el archivo index.html de la aplicación (supongamos que se llama así). Si está utilizando NGINX, puede configurar los encabezados apropiados de esta manera:
location ~* ^.+.html$ { add_header Cache-Control "no-store max-age=0"; } Este archivo debe tener un tamaño relativamente pequeño para un SPA, por lo que está bien no almacenarlo en caché siempre que esté almacenando en caché todos los demás activos que necesita la aplicación, como JS y CSS, etc. Debería usar hashes de contenido en su Paquetes JS para admitir la prevención de caché en esos. Con esto en su lugar, las visitas a su sitio siempre deben incluir la última versión de index.html con los últimos activos, incluido el último manifiesto del paquete web que registra los nombres de los fragmentos.
Si desea manejar los errores de carga de fragmentos, puede configurar algo como esto:
import { ErrorBoundary } from '@sentry/react' const App = (children) => { <ErrorBoundary fallback={({ error, resetError }) => { if (/ChunkLoadError/.test(error.name)) { // If this happens during a release you can show a new version alert return <NewVersionAlert /> // If you are certain the chunk is on your web server or CDN // You can try reloading the page, but be careful of recursion // In case the chunk really is not available if (!localStorage.getItem('chunkErrorPageReloaded')) { localStorage.setItem('chunkErrorPageReloaded', true) window.location.reload() } } return <ExceptionRedirect resetError={resetError} /> }}> {children} </ErrorBoundary> }Si decide volver a cargar la página, presentaré un mensaje al usuario de antemano.
El fragmento es accesible no significa que el navegador del usuario pueda analizarlo. Por ejemplo, si el navegador del usuario es antiguo. Pero el fragmento contiene una nueva sintaxis.
Webpack carga el fragmento por jsonp. Inserta la etiqueta <script> en <head> . Si el archivo js chunk se descarga pero no se puede analizar. Se lanzará un ChunkLoadError .
Puedes reproducirlo siguiendo estos pasos. Escriba una cadena opcional y no la compile. Asegúrese de que salga a un trozo.
const obj = {}; obj.sub ??= {};Abre tu aplicación con Chrome 79 o Safari 13.0. El mensaje de error completo se ve así:
SyntaxError: Unexpected token '?' // 13.js:2 MAX RELOADS REACHED // chunk-load-handler.js:24 ChunkLoadError: Loading chunk 13 failed. // trackConsoleError.js:25 (missing: http://example.com/13.js)