Comment localiser la source des erreurs 502 et 504 à l'aide de la console du navigateur ?

Avez-vous déjà rencontré un site web qui ne se charge pas ou qui apparaît soudainement lorsque vous naviguez sur "502 Mauvaise passerelle"ou"504 Délai d'attente de la passerelle"Message d'erreur ? Ces erreurs n'affectent pas seulement l'expérience de l'utilisateur, mais peuvent également entraîner une baisse du nombre de visites sur le site web et, dans les cas les plus graves, affecter le fonctionnement et la réputation du site web. Vous vous demandez comment localiser rapidement la source de ces erreurs ? En particulier dans le cas d'une architecture système complexe, comment trouver rapidement le problème dans la console du navigateur ?

Ces erreurs HTTP courantes peuvent être dues à diverses raisons, telles que des dépassements de délai du serveur, des problèmes de connectivité réseau ou des problèmes de configuration de l'équilibrage de la charge. Les erreurs HTTP peuvent être résolues à l'aide de la fonctionconsole du navigateurEn utilisant la console de débogage, vous pouvez rapidement localiser la source de l'erreur. Dans cet article, nous allons vous présenter comment utiliser la console et le panneau web pour le débogage afin de vous aider à résoudre efficacement les erreurs 502 et 504 et de garantir le bon fonctionnement de votre site web.

Que sont les erreurs 502 et 504 ?

Avant de commencer le débogage, passons brièvement en revue la fonction Erreurs 502 et 504Signification de :

• 502 Mauvaise passerelle: Cela signifie généralement que le serveur agissant en tant que passerelle ou proxy ne reçoit pas de réponse valide de la part du serveur en amont. Cela est généralement dû au fait que le serveur en amont est en panne, qu'il ne répond pas ou qu'il n'est pas en mesure de traiter la demande.

• 504 Délai d'attente de la passerelle: Indique que la passerelle ou le serveur proxy demandeur a dépassé le délai d'attente d'une réponse du serveur en amont, généralement parce que le serveur en amont a répondu trop lentement ou que les données demandées n'ont pas pu être traitées à temps.

Bien que ces deux erreurs soient liées à des problèmes de communication entre les serveurs, leurs causes et leurs effets peuvent varier.

Débogage des erreurs 502 et 504 à l'aide de la console du navigateur

Les navigateurs modernes offrent des outils de développement puissants, avec le consoles répondre en chantant panneau de réseau sont des outils importants pour localiser les erreurs 502 et 504. La section suivante décrit comment utiliser ces outils pour le débogage.

1. ouvrez les outils de développement de votre navigateur

Tout d'abord, ouvrez les outils de développement du navigateur (DevTools). Dans la plupart des navigateurs, vous pouvez l'ouvrir de la manière suivante :

• Google ChromeCliquez avec le bouton droit de la souris sur un espace vide de la page → "Inspecter", ou appuyez sur la touche Ctrl + Shift + I(Windows)/Cmd + Option + I(Mac).

• FirefoxPour plus d'informations, consultez le site web de la Commission européenne : cliquez avec le bouton droit de la souris sur un espace vide de la page → "Inspecter l'élément", ou appuyez sur la touche de fonction Ctrl + Shift + I(Windows)/Cmd + Option + I(Mac).
• Safari: Presse Cmd + Option + Iou via l'option Développeur du menu Safari.

2) Visualisation de la sortie de la console

Le panneau Console fournit des informations sur les erreurs d'exécution des pages.502 et Erreur 504C'est là que le problème se pose généralement, surtout si l'erreur se produit au niveau du JavaScript.

Comment afficher le journal de la console :

• Passez à consoles pour afficher les journaux d'erreurs détaillés.

• Les erreurs s'affichent en rouge et contiennent généralement le code d'état de l'erreur (par exemple 502 ou 504). Elles peuvent également contenir des informations supplémentaires sur la demande, telles que l'URL, l'horodatage, etc.
• Vous pouvez voir s'il existe d'autres erreurs ou avertissements JavaScript susceptibles d'affecter la demande d'API, ce qui peut entraîner un dépassement de délai pour la passerelle ou l'impossibilité d'obtenir une réponse valide.

Conseils de débogage :

• vérifier message d'erreurSi la console affiche des informations détaillées sur l'erreur (par exemple, l'URL de la requête, le temps de réponse, les en-têtes de la requête, etc.), vous pouvez utiliser ces informations pour trouver la partie spécifique de l'erreur.
• vérifier demande de réseauS'il y a API Lorsqu'une requête échoue, le journal des erreurs de la console fournit souvent l'URL et le code d'état de la requête. Cela vous aide à identifier où la requête a échoué (qu'il s'agisse d'un dépassement de délai sur le port de requête ou d'un problème avec les données renvoyées).

3) Analyse des demandes à l'aide du panel web

panneau de réseau（Le panneau Réseau est l'outil principal pour déboguer les erreurs 502 et 504. Il vous permet de visualiser toutes les requêtes sortantes et leurs réponses, et de savoir exactement quelles requêtes ont échoué.

Comment utiliser l'analyse de panel web :

• spectacle (un billet) réticulation（panel, rafraîchissez la page et observez toutes les requêtes HTTP.

• demande de filtrageVous pouvez filtrer par type de demande, en particulier XHR(XMLHttpRequest) et l'élément Rechercher Il s'agit généralement de demandes d'API.

• localiserDemandes rejetéesDans le panneau Réseau, vous pouvez voir le code d'état de la demande. En cas d'erreur 502 ou 504, cliquez sur la demande pour obtenir des informations détaillées sur la demande et la réponse.

Analyser les demandes qui n'ont pas abouti :

• Code d'état de la demandeRequêtes échouées : À côté de Requêtes échouées, recherchez le code d'état HTTP. S'il s'agit d'un code 502 ou 504, cliquez sur la demande pour en voir le contenu. en-tête de réponse répondre en chantant en-tête de la demandequi aide à comprendre le problème.
• Temps de réponse de la demandeDans le panneau Réseau, vous pouvez voir le temps de réponse pour chaque requête. Si le temps de réponse est très long, il se peut que le serveur en amont mette trop de temps à traiter la demande, ce qui entraîne une erreur 504.
• Paramètres de délai d'attente pour les demandes: Vérifie le délai d'attente d'une demande. Si le temps de réponse dépasse la valeur du délai défini, une erreur 504 est déclenchée.

4. vérifier la réponse des serveurs en amont

Si c'est le cas 502 ErreurSi vous ne parvenez pas à résoudre le problème, vous pouvez analyser plus en détail le serveur en amont pour y déceler d'éventuels problèmes. Dans la console du navigateur, vous verrez généralement les détails de l'échec de la requête, comme indiqué ci-dessous :

• Le serveur ne répond pasErreur 502 : Une erreur 502 se produit si le serveur qui est la cible de la requête ne répond pas. Cela peut être dû à un arrêt du serveur, à une défaillance du réseau ou à des problèmes de configuration du serveur. Vous pouvez voir le message d'erreur dans la consoleTrouver le serveur de destination de la requêteVérifiez si vous pouvez accéder au serveur normalement.

• Problèmes de configuration du proxySi vous utilisez un serveur proxy ou un équilibreur de charge, une mauvaise configuration peut entraîner une erreur 502. Vérifiez la configuration du serveur proxy pour vous assurer qu'il est en mesure de transmettre les demandes correctement.

5. visualiser les demandes d'API et les services tiers

Si votre site s'appuie sur un service API externe, les erreurs 502 et 504 sont probablement dues à l'utilisation de la fonction Services API externes du problème. Vous pouvez consulter les détails de la demande externe dans le panneau web.

• Vérification de l'état des services externesSi votre application dépend d'un service externe, assurez-vous que le service n'a pas échoué. Vous pouvez consulter la page d'état de l'API externe ou analyser les journaux pour voir s'il y a des dépassements de délai ou des défaillances du serveur.
• Disponibilité du service: Voir en-tête de la demande répondre en chantant en-tête de réponseSi le service API externe renvoie une réponse valide, ou s'il y a des retards ou des défaillances du réseau, vérifiez si le service API externe renvoie une réponse valide.

6) Ajustement des paramètres de délai d'attente pour les demandes

Si vous constatez que l'erreur 504 est due au délai d'attente de la demande, essayez d'ajuster le paramètre de délai d'attente de la demande.

• Augmenter le délai d'attenteSi la latence du réseau ou les temps de réponse sont longs, l'augmentation appropriée du délai d'attente pour les demandes peut contribuer à réduire le nombre d'erreurs 504.
• Optimiser les performances du back-endSi la réponse du service d'arrière-plan est trop lente, envisagez d'optimiser les performances du service afin de réduire le temps de traitement de la demande.

résumés

Erreurs 502 et 504Bien qu'il s'agisse de codes d'état d'erreur HTTP courants, nous pouvons les dépanner et les déboguer efficacement grâce aux outils de développement fournis dans la console du navigateur. Grâce au panneau web et aux journaux de la console, nous sommes en mesure de localiser la source de l'erreur et d'identifier les problèmes liés aux serveurs en amont, aux configurations de proxy, aux demandes d'API, etc. Pour les développeurs, la maîtrise de ces compétences de débogage permet non seulement de résoudre les problèmes plus rapidement, mais aussi d'améliorer la stabilité du site et l'expérience de l'utilisateur.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.