Cómo localizar el origen de los errores 502 y 504 con ayuda de la consola del navegador

¿Alguna vez se ha encontrado con un sitio web que no se carga o que aparece de repente mientras navega "502 Puerta de enlace defectuosa"o"504 Tiempo de espera de la puerta de enlace¿"Mensaje de error"? Estos errores no sólo afectan a la experiencia del usuario, sino que también pueden provocar un descenso de las visitas al sitio web y, en casos graves, incluso afectar al funcionamiento y la reputación del sitio web. ¿Se pregunta cómo localizar rápidamente el origen de estos errores? Especialmente en el caso de una arquitectura de sistema compleja, ¿cómo encontrar rápidamente el problema a través de la consola del navegador?

Estos errores HTTP comunes pueden ser causados por una variedad de razones, tales como tiempos de espera del servidor, problemas de conectividad de red o problemas de configuración de balanceo de carga. Mediante elconsola de navegaciónpuede localizar rápidamente el origen del error. En este artículo, vamos a introducir cómo utilizar la consola y el panel web para la depuración para ayudarle a resolver de manera eficiente 502 y 504 errores y asegurarse de que su sitio web se ejecuta sin problemas.

¿Qué son los errores 502 y 504?

Antes de empezar a depurar, repasemos brevemente la función Errores 502 y 504Significado de:

• 502 Puerta de enlace defectuosa: Suele significar que el servidor que actúa como pasarela o proxy no está recibiendo una respuesta válida del servidor ascendente. Suele deberse a que el servidor de origen está caído, no responde o no puede procesar la solicitud.

• 504 Tiempo de espera de la puerta de enlace: Indica que la pasarela o el servidor proxy solicitante ha agotado el tiempo de espera de una respuesta del servidor de origen, normalmente porque el servidor de origen ha respondido con demasiada lentitud o los datos solicitados no se han podido procesar a tiempo.

Aunque ambos errores están relacionados con problemas de comunicación entre servidores, sus causas y efectos pueden variar.

Depuración de errores 502 y 504 mediante la consola del navegador

Los navegadores modernos ofrecen potentes herramientas para desarrolladores, con el consolas responder cantando panel de red son herramientas importantes para localizar errores 502 y 504. La siguiente sección describe cómo utilizar estas herramientas para la depuración.

1. Abra las herramientas para desarrolladores de su navegador

En primer lugar, abra las herramientas de desarrollo del navegador (DevTools). En la mayoría de los navegadores, puede abrirlo de la siguiente manera:

• Google Chrome: Haga clic con el botón derecho en un espacio en blanco de la página → "Inspeccionar", o pulse la tecla Ctrl + Mayús + I(Windows)/Cmd + Opción + I(Mac).

• Firefox: Haga clic con el botón derecho en un espacio en blanco de la página → "Inspeccionar elemento", o pulse la tecla Ctrl + Mayús + I(Windows)/Cmd + Opción + I(Mac).
• Safari: Prensa Cmd + Opción + Io a través de la opción Desarrollador del menú Safari.

2. Visualización de la salida de la consola

El panel Consola proporciona información sobre los errores de ejecución de la página.502 y Error 504Aquí es donde suele aparecer, especialmente si el error se produce a nivel de JavaScript.

Cómo ver el registro de la consola:

• Cambiar a consolas para ver registros de errores detallados.

• Los errores se mostrarán en rojo y normalmente contendrán el código de estado del error (por ejemplo, 502 o 504), y también pueden mostrar más información sobre la solicitud, como la URL, la marca de tiempo, etc.
• Puede ver si hay otros errores o advertencias de JavaScript relacionados que puedan estar afectando a la solicitud de API, lo que a su vez puede hacer que la pasarela agote el tiempo de espera o no obtenga una respuesta válida.

Consejos de depuración:

• comprobar mensaje de errorSi la consola muestra información detallada del error (por ejemplo, la URL de la solicitud, el tiempo de respuesta, las cabeceras de la solicitud, etc.), puede utilizar esta información para encontrar la parte específica del error.
• comprobar solicitud de redSi hay API Cuando una petición falla, el registro de errores de la consola suele proporcionar la URL y el código de estado de la petición. Esto te ayuda a identificar dónde falló la solicitud (si fue un tiempo de espera en el puerto de solicitud o un problema con los datos devueltos).

3. Análisis de las solicitudes mediante el panel web

panel de red（El panel de Red es la herramienta principal para depurar errores 502 y 504. El panel de red le permite ver todas las solicitudes salientes y sus respuestas, y ver exactamente qué solicitudes fallaron.

Cómo utilizar el análisis de paneles web:

• mostrar (una entrada) reticulación（panel, actualice la página y observe todas las peticiones HTTP.

• solicitud de filtradoPuede filtrar por tipo de solicitud, en particular XHR(XMLHttpRequest) y el archivo Visite normalmente se trata de peticiones API.

• localiceSolicitudes fallidasEn el panel Red, puede ver el código de estado de la solicitud. Si hay un error 502 o 504, haga clic en la solicitud para ver información detallada sobre la solicitud y la respuesta.

Analizar las solicitudes fallidas:

• Código de estado de la solicitudEn la sección Solicitudes fallidas, busque el código de estado HTTP. Si es 502 o 504, haga clic en la solicitud para ver su encabezado de respuesta responder cantando encabezado de la solicitudque ayuda a comprender cuál es el problema.
• Tiempo de respuesta de la solicitudEn el panel Red, puede ver el tiempo de respuesta de cada solicitud. Si el tiempo de respuesta es muy largo, puede ser que el servidor ascendente esté tardando demasiado en procesar la solicitud, lo que provoca un error 504.
• Configuración del tiempo de espera de las solicitudesComprueba el tiempo de espera de una petición. Si el tiempo de respuesta supera el valor de tiempo de espera establecido, se activa un error 504.

4. Comprobar la respuesta de los servidores ascendentes

Si es 502 Errorpuede seguir analizando el servidor upstream en busca de problemas. En la consola del navegador, normalmente verá los detalles del fallo de la solicitud, como se muestra a continuación:

• El servidor no respondeError 502: se produce un error 502 si el servidor al que se dirige la solicitud no responde. Esto puede deberse a una caída del servidor, a un fallo de la red o a problemas de configuración del servidor. Puede ver el mensaje de error en la consolaBuscar el servidor de destino de la solicitudCompruebe si puede acceder al servidor con normalidad.

• Problemas de configuración del proxySi utiliza un servidor proxy o un equilibrador de carga, una configuración incorrecta puede provocar un error 502. Compruebe la configuración del servidor proxy para asegurarse de que puede reenviar correctamente las solicitudes.

5. Visualización de solicitudes API y servicios de terceros

Si su sitio depende de un servicio API externo, lo más probable es que los errores 502 y 504 se deban a la secuencia de comandos Servicios API externos de la incidencia. Puede ver los detalles de la solicitud externa a través del panel web.

• Comprobación del estado de los servicios externosSi tu aplicación depende de un servicio externo, asegúrate de que el servicio no ha fallado. Puedes consultar la página de estado de la API externa o analizar los registros para ver si hay algún timeout o fallo del servidor.
• Disponibilidad del servicio: Ver encabezado de la solicitud responder cantando encabezado de respuestaSi el servicio API externo devuelve una respuesta válida, o si se producen retrasos o fallos en la red, compruebe si el servicio API externo devuelve una respuesta válida.

6. Ajuste del tiempo de espera de las solicitudes

Si descubre que el error 504 se debe al tiempo de espera de la solicitud, intente ajustar la configuración del tiempo de espera de la solicitud.

• Aumentar el tiempo de espera: Si la latencia de la red o los tiempos de respuesta son largos, aumentar adecuadamente el tiempo de espera de las peticiones puede ayudar a reducir la aparición de errores 504.
• Optimizar el rendimiento del back-endSi la respuesta del servicio back-end es demasiado lenta, considere la posibilidad de optimizar el rendimiento del servicio para reducir el tiempo de procesamiento de la solicitud.

resúmenes

Errores 502 y 504Aunque se trata de códigos de estado de error HTTP comunes, podemos solucionarlos y depurarlos eficazmente mediante las herramientas para desarrolladores proporcionadas en la consola del navegador. A través del panel web y los registros de la consola, podemos localizar el origen del error e identificar problemas con servidores upstream, configuraciones de proxy, solicitudes de API, etc. Para los desarrolladores, dominar estas habilidades de depuración no sólo resuelve los problemas más rápidamente, sino que también mejora la estabilidad del sitio y la experiencia del usuario.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: [email protected]
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres