Guide du détective pour le dépannage WordPress - WordCamp Paris 2023

WordPress est génial, mais tout le monde rencontre des problèmes de temps en temps. Que vous possédiez, entreteniez ou construisiez des sites WordPress, le dépannage est une compétence qui vous fera gagner du temps et de l’argent.

Dans cette session, vous allez : Apprendre à connaître les types de problèmes WordPress que vous pouvez rencontrer et comment les diagnostiquer. Découvrir les processus étape par étape qui vous aideront à trouver la cause profonde d’un problème. Apprendrez quelles sont vos prochaines étapes une fois que vous connaissez la source d’un problème. Apprenez quelles informations vous devez fournir lorsque vous interagissez avec les développeurs ou votre hébergeur afin d’accélérer le processus de résolution des problèmes.

Transcript

1. Guide du détective pour le dépannage WordPress Amaury BALMER
2. Votre orateur Amaury BALMER Développeur WordPress since 2005 Fondateur et directeur général de l’agence Be API Détective à mes heures perdues pour les clients de l’agence :)
3. Un dépannage WordPress, c’est comme un épisode de série policière…
4. 1. Découverte de la scène du crime 2. (Fausse) bagarre pour déterminer qui doit enquêter 3. La recherche de caméras et d’images de vidéosurveillance 4. Interrogatoire des principaux suspects (et globalement toujours les mêmes) 5. Constitution des preuves 6. Arrestation du coupable 7. Révélation supplémentaire via une révélation divine 8. Arrestation du réel coupable 9. Happy end !
5. Découverte de la scène de crime
6. Les différents lanceurs d’alerte • Le client (ou un tiers) • Un mail envoyé par WordPress • Un service de monitoring de disponibilités ou d’erreurs applicatives • Vous
7. Tout commence par… … un bon rapport de bug !
10. Un bon “bug report” doit contenir 1. Capture d’écran (un message d’erreur est insuffisant) 2. La date et l’heure 3. Un lien vers la ou les pages concernées 4. Le navigateur utilisé ainsi que le système d’exploitation 5. L’action réalisée et à l’origine du bug 6. Le compte utilisateur utilisé Bonus : console du navigateur
11. WordPress, un CMS pour détective !
12. car il présente des types de victimes variées
13. De nature très différente ! • Visuel • Interactive • Fonctionnel • Données • Sécurité • Performance • Environnemental
14. et parce que la liste des suspects est importante !
15. Serveur & infrastructure Cache Third party integration Données & Réglages Thème & Extensions WordPress
16. Et l’enquêteur ?
17. L’expérience ?! => Privilégiez une approche processus !
18. Avant de commencer …
19. Pro tips N°1
20. Pro tips N°1 Est-ce que je suis intervenu récemment sur le projet ?
21. Pro tips N°1 Est-ce que je suis intervenu récemment sur le projet ? si oui, revert !
22. Outil de déploiement
23. Tags via le SCM Git
24. 100% de bonnes raisons de versionner votre travail même quand vous travaillez en solo !
25. Est-ce vraiment une enquête pour moi ?
26. Serveur & infrastructure Cache Third party integration Données & Réglages Thème & Extensions WordPress
32. Savoir reconnaître les erreurs • DNS • Certificat SSL • Cloud (ex: Cloudflare, AWS) • Varnish • Apache ou Nginx • PHP • WordPress • Extensions
33. Comprendre les erreurs HTTP Et principalement, les réponses d'erreur côté serveur 5XX ! Et notamment : • 500 Internal Server Error • 502 Bad Gateway • 503 Service Unavailable • 504 Gateway Timeout https://developer.mozilla.org/fr/docs/Web/HTTP/Status#r%C3%A9ponses_derreur_c%C3%B4t%C3%A9_serveur
35. Comment lire les codes de réponses HTTP Méfiez-vous des navigateurs ! Services en ligne: httpstatus.io Ou en ligne de commande : • wget • curl • httpie
37. Pro tips N°2
38. Pro tips N°2 Est-ce que cela fonctionne sans WordPress ?
39. Pro tips N°2 Est-ce que cela fonctionne sans WordPress ? Renommer le fichier .htaccess
40. Pro tips N°2 Est-ce que cela fonctionne sans WordPress ? Renommer le fichier .htaccess Fichier .htaccess par défaut
41. Pro tips N°2 Est-ce que cela fonctionne sans WordPress ? Renommer le fichier .htaccess Fichier .htaccess par défaut Créer un fichier HTML
42. Pro tips N°2 Est-ce que cela fonctionne sans WordPress ? Renommer le fichier .htaccess Fichier .htaccess par défaut Créer un fichier HTML Créer un fichier PHP
43. .htaccess Les fichiers de configuration distribués… - Permettent de modifier la configuration du serveur Apache HTTPd … et génèrent des erreurs 500 à chaque problème de syntaxe. => manipulés par de nombreuses extensions (SEO, cache, sécurité, etc)
44. Serveur & infrastructure Cache Third party integration Données & Réglages Thème & Extensions WordPress
45. Cache cache ?
47. cache + formulaires + nonces (jeton de sécurité) = 💥
48. Pro tips N°3
49. Pro tips N°3 By-passer le cache avec un paramètre dans l’URL : ?nocache=true
50. Pro tips N°3 By-passer le cache avec un paramètre dans l’URL : ?nocache=true Purger (et désactiver si possible) tout type de cache !
51. Pro tips N°3 By-passer le cache avec un paramètre dans l’URL : ?nocache=true Purger (et désactiver si possible) tout type de cache ! Cache statique
52. Pro tips N°3 By-passer le cache avec un paramètre dans l’URL : ?nocache=true Purger (et désactiver si possible) tout type de cache ! Cache statique Cache objet
53. Pro tips N°3 By-passer le cache avec un paramètre dans l’URL : ?nocache=true Purger (et désactiver si possible) tout type de cache ! Cache statique Cache objet Transients
54. Serveur & infrastructure Cache Third party integration Données & Réglages Thème & Extensions WordPress
55. Analyse des images de vidéosurveillance
56. Anatomie d’un fichier de log (access_log)
57. Anatomie d’un fichier de log (error_log)
58. Anticiper :) Assurez-vous de pouvoir lire les logs en toute autonomie Assurez-vous de savoir comment y accéder Assurez-vous de les conserver suffisamment longtemps
59. Ajouter une boîte noire à votre projet avec fr.wordpress.org/plugins/stream/
61. Des outils plus spécifiques
62. Extension: WP Mail Logging
63. Extension: REST API Log
64. Extension: Log HTTP Requests
65. Extension: WP Crontrol (wp cron event list)
66. Attention, les extensions de “logs” peuvent sur le long terme consommer plusieurs gigas de données. => Pensez à configurer les options de purge
67. Serveur & infrastructure Cache Third party integration Données & Réglages Thème & Extensions WordPress
68. C’est parti pour l’enquête de terrain
69. Les outils présents dans WP Santé du site Protection contre les erreurs fatales PHP Mode de récupération Mode de dépannage Constantes de configuration
70. État de santé du site
73. Tout savoir sur les erreurs reportées par l’outil “Site Health” https://wordpress.org/documentation/article/site-health-screen/ ou https://fr.wordpress.org/support/article/site-health-screen/
74. Protection contre les erreurs fatales PHP
75. Erreurs fatales avant WordPress 5.2
78. Ici, WordPress a trouvé une erreur avec l’une de vos extensions, « Plugin A ».
80. Pro tips N°4
81. Pro tips N°4 Optez pour une solution tactique !
82. Pro tips N°4 Optez pour une solution tactique ! Extension de maintenance qui renvoie une jolie 503
83. Pro tips N°4 Optez pour une solution tactique ! Extension de maintenance qui renvoie une jolie 503 Désactiver l’extension fautive si elle est d'ores et déjà identifiée !
84. Mode de récupération
89. Mode dépannage
90. Tu as essayé de désactiver toutes les extensions? et les réactiver une par une ? Entendu sur de nombreux WordCamp !
94. Query Monitor
95. Extension: Query Monitor
96. Fichier de configuration
98. Poursuivre l’enquête en labo !
99. Travaillez sereinement ! • Toujours disposer d'un environnement de tests sous la main • Documenter une procédure de recopie des données et du code ◦ ou utilisez une solution dédiée car… WP contient beaucoup de réglages en base de données !
100. Extension: User Switching
101. Serveur & infrastructure Cache Third party integration Données & Réglages Thème & Extensions WordPress
102. Pro tips N°5
103. Pro tips N°5 Vérifier si WP, le thème et les extensions disposent de mises à jour
104. Pro tips N°5 Vérifier si WP, le thème et les extensions disposent de mises à jour Consultez les changelogs !
105. Pro tips N°5 Vérifier si WP, le thème et les extensions disposent de mises à jour Consultez les changelogs ! Appliquez toutes les mises à jours
106. Pro tips N°5 Vérifier si WP, le thème et les extensions disposent de mises à jour Consultez les changelogs ! Appliquez toutes les mises à jours Portez une attention spécifique aux addons !
107. Conflits entre les extensions
108. Tu as essayé de désactiver toutes les extensions? et les réactiver une par une ? Entendu sur de nombreux WordCamp !
109. Souvent une histoire de hooks
115. Pro tips N°6
116. Pro tips N°6 Ne pas hésiter à hacker WordPress !
117. Pro tips N°6 Ne pas hésiter à hacker WordPress ! Et à ajouter des points de logs un peu partout.
118. Pro tips N°6 Ne pas hésiter à hacker WordPress ! Et à ajouter des points de logs un peu partout. ou utiliser Xdebug pour les PHP-puristes ;)
122. mais aussi de variables globales
123. Variable globale : $post
124. Variable globale : $wp_query
125. Noms de variables réservés https://codex.wordpress.org/Global_Variables
126. Cas pratique d’une boucle de redirection
127. Les redirections dans WordPress Gérées par la fonction wp_redirect Le 3ème argument permet de “signer” la réponse depuis WP 5.1
133. Fichier : wp-includes/pluggable.php (ligne 1290)
134. N’utilisez pas: debug_backtrace();
135. Fonction: wp_debug_backtrace_summary();
136. Serveur & infrastructure Cache Third party integration Données & Réglages Thème & Extensions WordPress
137. Et si c’était WordPress ?
138. Reporter un bug dans le projet WordPress Avant tout : 1. Assurez-vous que le bug est présent dans la dernière version de WordPress, via une “fresh install” (tips: wp-env) 2. Faites une recherche afin de vous assurer que le problème n’est pas déjà connu 3. Discutez-en sur les différents supports de la communauté (Slack, forums) Mode d’emploi complet : https://make.wordpress.org/core/handbook/testing/reporting-bugs/
139. Pour conclure
140. Serveur & infrastructure Cache Third party integration Données & Réglages Thème & Extensions WordPress
141. WordPress propose un écosystème extrêmement complet ! …à condition que votre sélection d’extensions, et que vos développements respectent l’état de l’art et tirent parti des nombreuses API de développement !
142. Pro tips N°7
143. Pro tips N°7 Communiquez en temps réel
144. Pro tips N°7 Communiquez en temps réel Faites preuve de transparence
145. Pro tips N°7 Communiquez en temps réel Faites preuve de transparence Formalisez des rapports d’incident
146. Pro tips N°7 Communiquez en temps réel Faites preuve de transparence Formalisez des rapports d’incident Définissez des mesures correctives et préventives.
147. On recrute de nouveaux détectives !
148. Merci !