De qui aurez-vous besoin pour vous aider à démasquer les erreurs de script ?
Demandez au(x) développeur(s) web de votre site de vous aider à hiérarchiser puis à démasquer les erreurs de script.
Partagez cet article avec eux et poursuivez votre lecture pour en savoir plus !
Pourquoi certaines erreurs ne sont-elles signalées que comme "erreur de script" ?
Contentsquare collecte les erreurs via le navigateur web. La majorité des navigateurs ne partagent pas les détails d'une erreur provenant d'un autre domaine (nom de la fonction, fichier, etc.), sauf s'ils y sont autorisés. C'est le cas, par exemple, pour les outils tiers tels que les scripts de Google Analytics.
C'est pourquoi, pour certaines erreurs, Contentsquare ne peut signaler que "Script Error", car il s'agit d'un paramètre provenant du navigateur et du serveur d'hébergement.
Pour résoudre ce problème, les scripts doivent être démasqués pour signaler qu'ils acceptent d'être inspectés par les tags comme la nôtre.
Comment démasquer les erreurs de script sur votre propre ordinateur ?
Même si Contentsquare ne peut pas accéder aux détails spécifiques de l'erreur, si vous êtes en mesure de la reproduire sur votre propre ordinateur, vous devriez pouvoir obtenir des informations plus utiles sur les erreurs à démasquer en premier.
Suivez les étapes ci-dessous :
1. Ouvrez votre site Web sur une page qui produit constamment des erreurs.
2. Ouvrez la console Javascript de votre navigateur (détails ici)
3. Dans la console, vous verrez un journal complet non masqué de toutes les erreurs sur cette page.
4. Utilisez la fonction ci-dessous pour vérifier ce que le Tag CS voit lorsque cette erreur se produit.
window.onerror=function(errorName, file, lineNo, colNo, errStack) {
debugger ;
}
Si vous ne trouvez pas ce que vous cherchez, consultez les développeurs Web de votre site !
Comment démasquer les erreurs de script de façon permanente
Étape 1. Choisissez les scripts à démasquer
Plus vous démasquez de scripts, plus vous pourrez collecter d'erreurs.
Tout d'abord, vous devez donner la priorité aux scripts à démasquer :
- Demandez au(x) développeur(s) de votre site. Ils vous aideront à sélectionner les scripts les plus accessibles à démasquer et à collecter les détails des erreurs et à les corriger à l'avenir.
- Sélectionnez les scripts dans le module d'analyse des erreurs. Certains "Script Errors" pointent vers un fichier spécifique, il peut être bon de les démasquer si vous voulez plus de détails sur eux.
- Demandez aux fournisseurs tiers de faire de même. De cette façon, leurs bibliothèques JavaScript seront ajoutées à votre Watchlist !
Étape 2. Ajoutez un en-tête HTTP cross-origin sur le serveur de ces scripts
Le(s) serveur(s) hébergeant le(s) script(s) devrait envoyer cet en-tête HTTP :
Access-Control-Allow-Origin : * |
Qui peut faire cela ? - Il s'agit d'une action côté serveur qui peut être effectuée soit par les développeurs en charge du site Web et/ou par l'hébergeur. Partagez cette page avec eux !
Qu'est-ce que cela signifie ? Le serveur indiquera aux navigateurs que toute origine peut aller chercher et inspecter ce fichier, y compris l'hôte.
Puis-je utiliser le domaine de mon site Web au lieu de * ? - Oui, vous pouvez aussi faire cela.
Y a-t-il des inconvénients en matière de sécurité ? - Non. La première chose à garder à l'esprit est que cet en-tête est simplement un en-tête HTTP envoyé par le serveur au navigateur. Le fait de le limiter pour des origines spécifiques ou de désactiver complètement l'en-tête ne rend pas votre site Web plus sûr si vos ressources privées ne sont pas correctement protégées. En fait, les navigateurs modernes tiennent compte de l'en-tête, mais une application comme Postman ou un robot peut tout simplement ignorer l'en-tête.
Comment voir les en-têtes HTTP d'un fichier ? Pour les développeurs
- Sur Google Chrome, ouvrez le panneau Outils pour les développeurs.
- Dans l'onglet Network, cliquez sur le nom du fichier JS.
- Sous l'onglet Headers, recherchez les "Response Headers".
- Vous devriez voir la liste "access-control-allow-origin : *" après la mise à jour ci-dessus ou si aucun changement n'est nécessaire.
Remarque : il se peut que vous deviez attendre la mise à jour du cache du navigateur ou du Content Delivery Network (CDN).
Étape 3. Ajoutez un attribut de script crossorigin="anonymous" sur ces scripts
Sur la ou les tags appelant le ou les fichiers, ajoutez l'attribut suivant :
<script src="http://another-domain.com/app.js"crossorigin="anonymous"></script>
|
⚠️ Cela doit être fait uniquement sur les scripts sur lesquels le header envoyé a autorisé le cross-domain (étape 2 ci-dessus).
Qui peut le faire ? - Il s'agit d'une action côté serveur qui peut être effectuée par l'équipe de développement en charge du site. Partagez cette page avec eux !
Qu'est-ce que cela signifie ? - Ce code indique au navigateur que le fichier cible doit être récupéré de manière "anonyme". Cela signifie qu'aucune information permettant d'identifier l'utilisateur, comme les cookies ou les informations d'identification HTTP, ne sera transmise par le navigateur au serveur lors de la demande de ce fichier.
Y a-t-il un inconvénient de sécurité ? - Non. En ajoutant cet attribut, le navigateur exécutera le script normalement, mais il n'y aura pas d'échange d'informations d'identification de l'utilisateur via des cookies, des certificats SSL côté client ou une authentification HTTP, sauf s'il s'agit de la même origine. Les scripts étant des fichiers statiques, ils n'ont presque jamais besoin de ces fonctionnalités dans tous les cas.
Étape 4. Voir les résultats
Après 3 heures, les erreurs de script devraient commencer à être remplacées par les détails réels des scripts dans l'analyse des erreurs.