Depurar de aplicaciones de PWA Kit

Los errores y los problemas de rendimiento son una parte inevitable del desarrollo de aplicaciones web. Con el PWA Kit podrá afrontar estos problemas en profundidad gracias a una variedad de herramientas y técnicas para examinar la aplicación de cerca.

Reemplace los marcadores de posición de esta guía por valores reales. Los marcadores de posición tienen el siguiente formato: $PLACEHOLDER.

Antes de seguir los consejos más específicos de esta guía, pruebe primero los siguientes pasos generales para la solución general de problemas:

• Compruebe que esté ejecutando una versión admitida del nodo (consulte la guía Primeros pasos) antes de iniciar su servidor de desarrollo local.
• Confirme que su servidor de desarrollo siga funcionando y que el puerto no ha sido tomado por otro proceso.
• Después de hacer un cambio de código, confirme que aparezca el mensaje HTTP development server listening en la terminal antes de actualizar su navegador.
• Busque errores tanto en la consola del navegador como en la terminal.
• Busque las respuestas de error de red con las herramientas de desarrollo de su navegador. (En las DevTools de Chrome, vaya a la pestaña Red).
• Para ayudar a identificar errores de sintaxis y de dedazo, ejecute una herramienta de formateo de código y un linter. En la Retail React App, se proporcionan archivos de configuración para Prettier (herramienta de formateo de código) y para ESLint (linter).
• Compruebe la configuración del antivirus y del firewall de su computadora para ver si hay algo que impida la ejecución del código o que bloquee las solicitudes de red.
• Para identificar y analizar problemas de rendimiento, utilice la herramienta “Profiler” de las DevTools de Chrome. Para obtener más información, consulte esta guía de Google: Análisis del rendimiento en tiempo de ejecución. También puede instalar la extensión de herramientas para desarrolladores de React para Chrome para obtener otra pestaña de “Profiler” desde la que podrá ver información similar pero a nivel de componentes.

Hay dos parámetros de consulta especiales que puede añadir a cualquier URL alimentada por su aplicación de comercio para ayudar a depurar problemas con el código del lado del servidor.

El parámetro de consulta __server_only detiene el proceso de hidratación para que la página aparezca en su navegador exactamente como lo hace después de la renderización del lado del servidor. Ver la versión de la página renderizada del lado del servidor ayuda a solucionar problemas no solo de renderización del lado del servidor, sino también de SEO, ya que los motores de búsqueda rastrean esta versión de la página.

El parámetro de consulta __pretty_print añade formato al objeto __PRELOADED_STATE__ para hacerlo más legible. Este objeto proporciona una captura del estado de la aplicación antes de que comience la hidratación, por lo que puede ser útil para la depuración, para ver si esta contiene los valores esperados. Para ver el contenido del objeto, cargue su aplicación, vea la fuente de la página y busque __PRELOADED_STATE__.

El objeto __PRELOADED_STATE__ se incluye en una etiqueta <script> dentro del código fuente HTML de la página que se solicitó inicialmente cuando la aplicación comienza a ejecutarse del lado del servidor. El objeto __PRELOADED_STATE__ contiene los valores serializados arrojados por la función getProps (incluidas las versiones de getProps que se adjuntan al componente _app y al componente de la página).

Por defecto, el servidor de aplicaciones muestra mensajes de consola en la terminal, pero no permite observar la ejecución del código. Esta limitación puede dificultar la depuración del código que renderiza las páginas en el lado del servidor (o en su máquina local).

Para mejorar la depuración, puede iniciar el servidor de desarrollo local con un comando alternativo que ejecuta un proceso de inspección en el nodo al que se puede adjuntar un depurador. (Para obtener más información, consulte la Documentación del nodo).

Puede adjuntar el depurador incluido en muchos navegadores y editores de texto populares al proceso de inspección del nodo. A continuación se muestran las instrucciones para Google Chrome y Visual Studio Code.

1. Abra una terminal.
2. Vaya al directorio del proyecto.
3. Inicie su servidor local de desarrollo con npm run start:inspect.
4. Para confirmar que el depurador esté escuchando, busque el mensaje “Depurador escuchando” en la salida de la terminal.
5. Abra Chrome e ingrese la URL chrome://inspect.
6. Haga clic en Abrir las DevTools dedicadas para el Nodo.
7. DevTools se abre en una ventana nueva.
8. Para confirmar que el depurador se haya adjuntado, busque el mensaje “Depurador adjunto” en la salida de la terminal.
9. Establezca puntos de quiebre, añada declaraciones de debugger, etc.
10. Cargue una página de su servidor de desarrollo local en Chrome.
11. Utilice la ventana dedicada para la depuración.

Ahora puede rastrear la ejecución del código del lado del servidor.

Para obtener más información sobre la depuración con puntos de quiebre en DevTools, consulte esta guía de Google: Depuración de JavaScript.

1. Abra sus archivos de proyecto en Visual Studio Code.
2. Desde la barra de menú, haga clic en Terminal > Nueva terminal.
3. Inicie su servidor local de desarrollo con npm run start:inspect.
4. Abra la paleta de comandos. Acceso directo en Windows: Ctrl + Shift + P. Acceso directo en Mac: Command + Shift + P.
5. Ingrese el siguiente comando: “Debug: Attach to Node Process.”
6. Aparece una lista de los procesos del Nodo. Seleccione el primero de la lista.
7. Para confirmar que el depurador se haya adjuntado, busque el mensaje “Depurador adjunto” en la salida de la terminal.
8. Establezca puntos de quiebre, añada declaraciones de depurador, etc.
9. Cargue una página de su servidor de desarrollo local en su nevegador web.
10. Utilice el depurador integrado en Visual Studio Code para la depuración.

Ahora puede rastrear la ejecución del código del lado del servidor en Visual Studio Code.

Hay tres maneras de depurar el código implementado en Managed Runtime (MRT):

• Utilice mapas de origen para identificar dónde se produjeron los errores.
• Registros finales para depurar problemas o errores en tiempo real en un entorno de bajo volumen.
• Para un entorno de producción, utilice Log Center, que ofrece potentes funciones de búsqueda y retención.

Utilice mapas de origen para identificar cualquier error del lado del servidor o del lado del cliente. Los mapas de origen proporcionan un seguimiento simple de la pila de errores que señala dónde se produjo un error. Por ejemplo, el rastreo de pila identifica el archivo y el número de línea donde ocurrió el error para facilitar la solución de problemas.

Para usar mapas de origen, debe crear su sitio con PWA Kit versión 3.4.x o posterior. Si tienes una versión anterior, actualiza tu proyecto para usar PWA Kit 3.4.x.

Tiene dos opciones para habilitar los mapas de origen: usar Runtime Admin o usar Managed Runtime API.

Usar Runtime Admin

1. Inicie sesión en Runtime Admin.
2. Haga clic en su proyecto.
3. Haga clic en un entorno.
4. Haga clic en Configuración delentorno.
5. En la sección Avanzada, haga clic en Editar.
6. Habilite los mapas deorigen.
7. En la parte superior de la sección Opciones avanzadas, haga clic en Actualizar.
8. Espere a que el paquete termine de reimplementarse.

Usar la Managed Runtime API

Llame al punto de conexión de la projects_target_partial_update API y establézcalo enable_source_maps en . true De este modo, se configura la variable de NODE_OPTIONS entorno Managed Runtime en el entorno con --enable-source-mapsel paquete y se vuelve a implementar.

1. Al compilar el proyecto, genere el archivo mediante esta variable de ssr.js.map entorno local: PWA_KIT_SSR_SOURCE_MAP=true.

2. Implemente el paquete en Managed Runtime.

Después de habilitar y cargar mapas de origen, puede verlos mediante Tail Logs en Managed Runtime.

El uso de mapas de origen puede causar problemas de rendimiento. Por ejemplo, hay latencia en cualquier momento error.stack a la que se accede. Por lo tanto, cuando lo incluyes console.error(e) en tu código, esto puede ralentizar tu sitio.

• Nuevos entornos que no son de producción: enable_source_maps se establece en true.
• Nuevos entornos de producción: enable_source_maps se establece en false. Este comportamiento ayuda a evitar posibles impactos en el rendimiento que pueden surgir cuando se habilita la característica de mapas de origen.
• Todos los entornos preexistentes: enable_source_maps se establece en false.

Cuando su aplicación se implementa en Managed Runtime, no se admite la depuración remota. Sin embargo, puede mostrar el final de los registros para cualquier entorno de Managed Runtime en tiempo real para ayudar a diagnosticar errores del lado del servidor.

Tiene dos opciones para mostrar el final registros usando la línea de comandos.

Si está trabajando dentro de un proyecto de PWA Kit generado desde la versión 2.4.1 o posterior, puede:

• Ver ayuda para el comando de registros: npm run tail-logs -- --help
• Mostrar el final de los registros para un proyecto y entorno específicos: npm run tail-logs -- --environment $ENV_ID

Si está trabajando fuera de un proyecto de PWA Kit, o tiene un proyecto generado desde una versión anterior a la 2.4.1, puede utilizar npx para:

• Ver ayuda para el comando de registros: npx @salesforce/pwa-kit-dev tail-logs --help
• Mostrar el final de los registros para una identificación de entorno y una identificación de proyecto específicas: npx @salesforce/pwa-kit-dev tail-logs --environment $ENV_ID --project $PROJ_ID

Al mostrar el final de los registros, tenga en cuenta las siguientes restricciones:

• Cada sesión para mostrar el final de los registros terminará después de los 60 minutos.
• Cada entorno puede admitir hasta 100 sesiones de muestra del final de los registros activas a la vez, entre todos los usuarios.
• Para mostrar el final de los registros, debe obtener permisos de usuario de desarrollador o administrador para el proyecto de Managed Runtime.

Utilice el Log Center para solucionar errores si creó un sitio con PWA Kit o si tiene una instancia de B2C Commerce. Log Center:

• Proporciona una única ubicación para acceder a los registros desde Managed Runtime (MRT) y su instancia de B2C Commerce. Conecte lo que sucede en su entorno de MRT con lo que ocurre en su instancia de B2C Commerce.
• Le permite buscar y filtrar muchos registros históricos. Puede obtener más información sobre lo que sucedió en producción, para ayudar a investigar y resolver problemas más rápido.

Esta guía se centra en la depuración de sitios creados con PWA Kit. Para obtener información sobre el uso del Log Center con su instancia de B2C Commerce, consulte Log Center centralizado.

Para acceder a los registros de MRT de un entorno en el Log Center, primero debe:

1. Tener el rol de usuario del Log Center en Account Manager. Para verificarlo, marque su rol en Account Manager. Si no tiene el rol, pídale a su administrador de Account Manager que le dé acceso. Consulte Administración de Account Manager para usuarios de Salesforce B2C Commerce.

2. Configure el entorno de la siguiente manera:

   a. Marque el entorno como un entorno de producción. Consulte los detalles y las limitaciones relacionadas con los entornos de producción.

   b. Seleccione una instancia de Commerce Cloud (B2C Commerce) para conectarse al entorno.

   c. Agregue uno o más identificadores de sitio para asociarlos con el entorno.

Después de completar los requisitos previos, para ver los registros de MRT en el Log Center:

1. Inicie Log Center.
2. Seleccione una región.
3. Seleccione un Realm. Si no conoce el código de identificación de su realm, pregúntele a su ejecutivo de cuenta (EC) o al Customer Success Manager (CSM).
4. Haga clic en Mostrar resultados filtrados.
5. Haga clic en Buscar > Búsquedaactual.
6. En Tipo de servicio, seleccione mrt.
7. En Host, seleccione el entorno de producción cuyos registros de MRT desea ver. El formato del host es $PROJECT.$ENVIRONMENT. Si tiene más de un entorno de producción de MRT, puede ver varios nombres de host de MRT.
8. Vea los registros de MRT.

Para obtener información sobre los niveles y volúmenes de registro en Log Center, consulte Configuración para administradores.