502 BAD GATEWAY BACCANA

Le diable se cache dans les détails du code… mais Baccana en connait les arcanes

Connaissez-vous les expressions « chercher une aiguille dans une botte de foin » ? Ou « Le diable se cache dans les détails » ? Oui bien sûr. Mais en tant que développeur ou gestionnaire de propriété en ligne, avez-vous déjà été confronté aux deux en même temps ? En y ajoutant une pincée ironique de se trouver en plus au mauvais endroit au mauvais moment ? Là je sens que je vous intéresse ! Et Baccana Digital Consulting y a été confronté très récemment. 

On vous donne le contexte. Après plusieurs semaines de développement, un site WordPress custom en langue avec beaucoup de contenus et plus de 160 bannières de publicités customisées est mis en ligne par nos services sur AWS France Paris en attendant le Monaco Cloud.

Tetyana notre Devops avait soigneusement préparé l’environnement avec son staging et son site de production. Le nouveau site et tout sont contenu chargés sur le staging pour faire les tests avant le changement d’IP pour diriger le nom de domaine vers le nouveau site sur AWS. Cette manoeuvre est nécessaire pour s’assurer de la bonne fonctionnalité de la plupart des plugins, certains cependant nécessitant d’être live pour être mis en fonction.

C’est à ce moment là, que toutes les bannières publicitaires sont mises en fonction après avoir été chargée dans le back office. Ce jour là, Isabel, la Project Manager du projet, et le développeur sont en Italie et dans la Drôme en déplacement. Suivez-bien, cela à son importance : Être au mauvais endroit au mauvais moment.

A ce moment là, les 2 donnent le feu vert en début de soirée car tout fonctionne très bien. L’IP est basculé et lentement, à cause du Time To Live, le nouvel IP se propage sur la toile et à force de rafraîchissement de navigateur, le nouveau site apparaît… avec certaines disparité selon les endroits, mais rien d’anormal. Nous ferons les réglages nécessaires dès que possible.

Sauf que rapidement, il apparaît que même après un certains temps, nous ne soyons pas tous égaux devant le code éternel. Certains voient très bien ce superbe nouveau site WordPress Woocommerce avec toutes ses fonctionnalités que ce soit en mobile ou PC Desktop … quand d’autres n’ont pas toutes les pages, voir la terrible page blanche … »502 Bad Gateway Error » ☠️ Le Marcheur Blanc du Web.

Pas de panique, on se pose et on analyse :

Zone DNS du domaine ? Comme le site n’apparait pas partout de manière uniforme, la cause peut en être un DNS qui renvoie sur des IPs différentes avec donc un conflit entre différents Caches du site Web : Zone DNS check ✅

Configuration du Server AWS ? Un 502 Bad Gateway Nginx réfère à une requête non conforme entre le site Web et le serveur, d’où un non affichage de la page avec le message 502 fatal. Mais non, Configuration du Server AWS check ✅

Nous alors faisons un sondage de qui voit bien le site Web avec toutes ses fonctionnalités VS qui rencontre des soucis dans l’expérience de navigation.

La disparité des terminaux utilisés a-t-elle une incidence ? Et oui! Vous êtes plutôt Mac ou PC ? Plutôt iPhone ou Samsung Android ? Vanille ou chocolat ? Rapidement, nous voyons que les erreurs 502 sont également réparties que ce soit sur desktop ou mobile, nous avons 50% qui n’ont pas de problèmes et l’autre moitié qui en ont. Donc ce n’est pas un problème de terminal utilisé check ✅ La paix demeure entre les Mac-Capulet et les PC-Montaigu.

Ensuite vient le type de navigateur utilisé. Cela a-t-il une incidence sur les résultats ? Selon le type de navigateur utilisé : Safari, Chrome, Edge, Firefox etc … et selon si celui-ci est à jour ou non, des erreurs de navigations peuvent être rencontrées. Mais là encore, le sondage ne montre aucune disparité significative. Rien à voir avec le navigateur utilisé, check ✅

Bon alors c’est quoi vous me direz ? Ton histoire a-t-elle une fin ? Patience, nous y voilà…

Et l’endroit géographique où on se situe alors ? Y a-t-il un rapport avec l’IP depuis lequel on se log au site Web ? Et là Bingo ! ❌ En croisant les données géographiques, surprise. En Italie chez Isabel, tout va bien. A Paris chez des partenaires, tout va bien. Aux USA, UK, Suisse chez d’autres partenaires tout va bien. Pour David en déplacement dans la Drôme, tout va bien … mais pas à Monaco, pas à Nice, pas à Cannes, pas à Antibes … enfin nulle part sur le Côte d’Azur. Cocasse n’est-ce pas ?

On avance bien, donc le mal vient de l’intérieur du site et en plus, il est géo-localisé à la Côte d’Azur. Certainement un plugin WordPress car c’est bien connu, un plugin non mis à jour sur WordPress est capable de mettre tout l’édifice en danger (c’est pourquoi, avoir de la maintenance régulière dans votre WordPress, c’est très bon pour la santé de vos sites Web). Mais tous les plugins sont neufs et à jour ✅

Tetyana consulte alors la console du serveur pour observer les requêtes soumises au serveur depuis le site et celles qui reviennent en warning, c’est à dire en erreur. Là se dessine un scénario à la Usual Suspects, il était là devant nous tout ce temps et on l’a sous estimé : le plugin des bannières publicitaires. Le Kaiser Sauzé de notre projet ! Le malfrat de plugin renvoie des messages d’erreur quand on navigue sur les pages en Erreur 502. Il a donc quelque chose de pourri non pas dans l’État du Danemark, mais dans le code du plugin publicitaire. Nous contactons le fabriquant du plugin, mais ce dernier tardant à répondre efficacement, il nous incombe de résoudre l’énigme le plus rapidement possible, car le temps passe.

Nous partons donc à la recherche de l’aiguille dans une botte de foin, ou bien dans notre cas la ligne de code défaillante dans un bottin chinois. Mais Tetyana à l’oeil, et le bon. Elle trouve des réglages internes du plugin qui font un matching de régionalisation selon l’IP depuis lequel on navigue sur la toile. Concrètement, cela ressemble à ceci : REGEXP ‘Provence-Alpes-Côte d’Azur|Monaco|98000 quand on est à Monaco, REGEXP ‘Provence-Alpes-Côte d’Azur|Antibes|06160 quand on est à Antibes. On y est presque, on arrive à l’adage le diable est dans le détail. Il faut de bons yeux. Vous ne voyez pas le problème dans « Côte d’Azur » dans les lignes REGEXP ci-dessus ? C’est normal, pourtant il y a une erreur de la part du fabriquant qui vend ce plugin publicitaire, certainement utilisant un clavier QWERTY sur lequel il a confondu un apostrophe avec un guillemet simple (single quote). Non vous lisez bien. Une erreur de syntaxe dans le code en dur de ce plugin pour la Côte d’Azur à suffit pour désorganiser la belle mécanique bien huilée de ce site Web.

Quand les warnings sur le serveur émanant de ce plugins ont été coupés, les Erreurs 502 Bad Gateway on disparues pour tous les utilisateurs de la Côte d’Azur ✅

Quand le guillemet simple a été remplacé par l’apostrophe dans le code en dur du plugin pour « Côte d’Azur », les publicités sont apparues pour tous les utilisateurs de la Côte d’Azur ✅

Quel fromage pour une simple apostrophe me direz-vous ? En vous rapportant cette histoire qui concerne Baccana et dans laquelle ont été concernés Tetyana, Isabel, David, Alex, Chris et notre client, nous voulons également saluer tous les développeurs qui travaillent chaque jour à débugger des situations pour le bien de la communauté des internautes. Quand ce genre de solution est trouvée en équipe, ce n’est pas seulement le client qui en sort gagnant, mais la communauté du Web et la profession de consultant développeur dans son ensemble.

Nous aimons notre métier, nous tenions à vous faire partager cette expérience… jusqu’au prochain challenge. Nous l’attendons de pied ferme, le doigt sur le touchpad.

 

 

No Comments

Post A Comment

Demandez un DEVIS GRATUIT. Notre talentueuse équipe d'experts collaborera avec vous et mènera des recherches pour bien cerner vos besoins et vos attentes.