Quelqu’un vous demande un fichier HAR. C’est en général le support, ou un développeur qui regarde un bug que vous avez signalé, et la demande arrive presque toujours avec des instructions qui supposent que vous savez déjà de quoi il s’agit.

Un fichier HAR est l’enregistrement de toutes les requêtes faites par le navigateur pendant que vous faisiez quelque chose, sauvegardé dans un seul fichier. HAR veut dire HTTP Archive. C’est un simple fichier JSON qui liste chaque requête envoyée par la page, ce qui est revenu, le temps que chacune a pris et dans quel ordre : l’onglet Réseau des outils de développement de votre navigateur, écrit noir sur blanc et transmis.

Ce qu’il y a dedans

Pour chaque requête faite par la page pendant l’enregistrement :

  • La requête : méthode, URL complète, en-têtes, chaîne de requête, et le corps s’il y en avait un
  • La réponse : code de statut, en-têtes, type de contenu, taille, et souvent le corps
  • Les temps : combien de temps la requête a attendu, s’est connectée, a envoyé, puis a attendu le premier octet
  • Le moment où c’est arrivé, si bien que l’ordre et les écarts entre les requêtes sont conservés

C’est ce dernier point qui rend un HAR plus utile qu’une capture d’écran de l’onglet Réseau. Une capture vous montre une liste ; un HAR permet à quelqu’un de rejouer la séquence et de voir que le renouvellement du jeton est parti après la requête qui en avait besoin.

Quand on vous en demande un

Presque toujours parce qu’un problème est invisible de l’extérieur et ne se produit que chez vous.

  • Une page se charge chez vous et pas chez eux, ou l’inverse
  • Quelque chose échoue en silence, sans que l’interface le dise
  • Une requête est lente, et personne ne sait si c’est le réseau, le serveur ou le navigateur
  • Une intégration renvoie une erreur seulement en production, et seulement pour un compte

Dans tous ces cas, la réponse tient d’habitude en une ligne d’un fichier que personne n’a regardé : un 403 là où un 200 était attendu, une requête qui n’est jamais partie, une boucle de redirections, une erreur CORS que la page a avalée.

Comment en enregistrer un

Chrome ou Edge. Ouvrez les outils de développement avec F12, ou Cmd + Option + I sur un Mac. Allez dans l’onglet Réseau. Cochez Conserver le journal pour qu’une redirection n’efface pas ce que vous avez enregistré. Reproduisez le problème. Puis faites un clic droit sur n’importe quelle ligne de la liste et choisissez Enregistrer tout dans un fichier HAR avec contenu.

Firefox. Outils de développement, onglet Réseau, reproduisez, puis clic droit sur une ligne et Tout enregistrer sous HAR.

Safari. Activez le menu Développement dans les réglages, puis Développement, Afficher l’inspecteur web, Réseau et Exporter.

Deux choses que l’on oublie. Commencez l’enregistrement avant la manipulation que vous voulez montrer, parce que l’onglet Réseau ne garde que ce qu’il a vu. Et reproduisez le problème une fois puis arrêtez : un HAR de onze minutes de clics est un fichier que personne ne lira.

Le lire sans outil

Le plus rapide est d’ouvrir le fichier dans l’onglet Réseau d’un navigateur : glissez le HAR sur le panneau Réseau et il se charge comme si vous veniez de l’enregistrer, triable et filtrable.

Ce qu’il faut regarder, à peu près dans cet ordre :

Pas ça en premier
Faire défiler toute la liste en cherchant quelque chose qui a l'air anormal
Ça en premier
Filtrer sur les statuts 400 et au-delà, puis sur les quelques requêtes les plus lentes, puis regarder ce qui s'est passé juste avant l'échec

Un HAR est du JSON, donc jq fonctionne dessus lui aussi : jq '.log.entries[] | select(.response.status >= 400) | {url: .request.url, status: .response.status}' capture.har vous sort les échecs en une ligne.

Un HAR ne contient que les requêtes faites par le navigateur. Pour inspecter une requête envoyée par votre propre code, pointez-le sur le point de test de webhooks, qui vous donne une URL et affiche la méthode, les en-têtes, la chaîne de requête et le corps de ce qui arrive.

Ce dont personne ne vous prévient

Un fichier HAR contient presque toujours des identifiants. C’est la chose la plus importante à savoir à son sujet, et les instructions qu’on vous envoie le mentionnent rarement.

Enregistré avec le contenu, un HAR contient tous les en-têtes de requête, donc les cookies de session et les jetons d’autorisation, et tous les corps de réponse, qui peuvent inclure des données personnelles de la personne connectée. Quiconque a le fichier peut souvent agir comme cet utilisateur tant que ces jetons ne sont pas expirés.

Donc :

  • Traitez un HAR comme un mot de passe. Ne le collez pas dans un gestionnaire de tickets public, dans un canal partagé ou dans un fil d’e-mails qui sera transféré.
  • Nettoyez-le avant de le partager si vous le pouvez. Certains outils retirent les cookies et les en-têtes d’autorisation ; sinon, ouvrez le JSON et retirez-les à la main.
  • Enregistrez dans une fenêtre privée avec un compte de test quand le problème le permet, ce qui garde les données réelles de clients entièrement hors du fichier.
  • Supprimez-le ensuite. C’est une pièce à conviction pour une enquête, pas un document.

Si c’est vous qui demandez un HAR, dites tout cela dans la demande. La plupart des gens qui vous en envoient un contenant leur jeton de session actif ne se sont jamais entendu dire de ne pas le faire.

En obtenir un sans les instructions

Tout ce qui précède fait quatre paragraphes d’instructions pour quelqu’un qui cherche seulement à signaler qu’une page est cassée, et c’est pour cela que les fichiers HAR n’arrivent si souvent jamais.

Session Replay

Extension Chrome gratuite. Un clic sur la page qui se comporte mal capture la copie d'écran, la console et le journal réseau, et vous rend un lien à coller dans le ticket.

Installer l'extension

Le journal réseau qu’elle capture comprend un fichier HAR que vous pouvez télécharger et ouvrir dans les outils de développement : la personne qui prend le rapport en main reçoit donc le fichier qu’elle aurait demandé, sans avoir eu à le demander. Ce qu’elle ne fait pas, c’est décider à votre place ce qu’il faut caviarder : l’avertissement ci-dessus vaut toujours pour tout ce que vous partagez.

Pour tout ce qui entoure le fichier - ce que vous attendiez, ce qui s’est produit et de quelle version il s’agissait - le guide du rapport de bug en donne le modèle.