Application Real-Time Monitoring Service:Causes et solutions des erreurs de script

Causes des erreurs de script

Également appelées erreurs cross-origin, les erreurs de script surviennent lorsqu'un site web demande et exécute un script hébergé sur un domaine tiers. Le scénario le plus courant consiste à utiliser un réseau de diffusion de contenu (CDN) pour héberger des ressources JavaScript (JS).

Pour illustrer ce cas, supposons que la page HTML suivante soit déployée sur le domaine http://test.com :

<!doctype html>
<html>
<head>
  <title>Test page in http://test.com</title>
</head>
<body>
  <script src="http://another-domain.com/app.js"></script>
  <script>
  window.onerror = function (message, url, line, column, error) {
    console.log(message, url, line, column, error);
  }
  foo(); // Invokes the foo method defined in the app.js file. 
  </script>
</body>
</html>

Supposons que la méthode foo appelle une méthode bar non définie :

// another-domain.com/app.js
function foo() {
  bar(); // ReferenceError: bar is not a function
}

Une fois la page chargée, le navigateur capture l'erreur suivante :

"Script error.", "", 0, 0, undefined 

Il ne s'agit pas d'une erreur JS à proprement parler. Pour des raisons de sécurité, les navigateurs masquent délibérément les détails des erreurs levées par les fichiers JS provenant d'autres origines. Cette mesure empêche la capture involontaire d'informations sensibles par des scripts tiers non contrôlés. Ainsi, seuls les scripts de même origine peuvent capturer des messages d'erreur détaillés, tandis que les scripts d'autres origines détectent l'erreur sans pouvoir en récupérer le contenu précis. Pour plus d'informations, consultez le .

bool ScriptExecutionContext::sanitizeScriptError(String& errorMessage, int& lineNumber, String& sourceURL)
    {
        KURL targetURL = completeURL(sourceURL);
        if (securityOrigin()->canRequest(targetURL))
            return false;
        errorMessage = "Script error.";
        sourceURL = String();
        lineNumber = 0;
        return true;
    }

Les sections suivantes décrivent comment résoudre ces erreurs.

Solution 1 : Activer le partage de ressources cross-origin

Pour capturer les erreurs JS cross-origin, suivez les étapes ci-dessous :

1. Ajoutez l'attribut crossorigin="anonymous".

   <script src="http://another-domain.com/app.js" crossorigin="anonymous"></script>

   Cette étape indique au navigateur de récupérer les scripts tiers de manière anonyme. Le navigateur n'envoie donc pas d'informations d'identification utilisateur potentielles, telles que les cookies et les certificats HTTP, au serveur lors de la requête.

2. Ajoutez l'en-tête de réponse HTTP cross-origin. Par exemple, exécutez la commande suivante :

   Access-Control-Allow-Origin: * 

   Vous pouvez également exécuter la commande suivante :

   Access-Control-Allow-Origin: http://test.com 

   Remarque

   Par défaut, la plupart des CDN principaux incluent l'attribut Access-Control-Allow-Origin. L'exemple suivant provient d'Alibaba Cloud CDN :

   $ curl --head https://retcode.alicdn.com/retcode/bl.js | grep -i "access-control-allow-origin"
   => access-control-allow-origin: *

Après avoir effectué ces deux étapes, vous pouvez capturer les erreurs cross-origin à l'aide du gestionnaire window.onerror. Dans l'exemple précédent, après le rechargement de la page, le navigateur capture l'erreur suivante :

=> "ReferenceError: bar is not defined", "http://another-domain.com/app.js", 2, 1, [Object Error]

Solution 2 : Ajouter la commande try catch (facultatif)

S'il est difficile d'ajouter un attribut cross-origin à l'en-tête de requête ou de réponse HTTP, ajoutez la commande try catch.

Ajoutez la commande try catch à la page HTML précédente. Le code suivant illustre cette modification :

<!doctype html>
<html>
<head>
  <title>Test page in http://test.com</title>
</head>
<body>
  <script src="http://another-domain.com/app.js"></script>
  <script>
  window.onerror = function (message, url, line, column, error) {
    console.log(message, url, line, column, error);
  }
  try {
    foo(); // Invokes the foo method defined in the app.js file.
  } catch (e) {
    console.log(e);
    throw e;
  }
  </script>
</body>
</html>

Rechargez la page. Les informations suivantes s'affichent :

=> ReferenceError: bar is not defined
     at foo (http://another-domain.com/app.js:2:3)
     at http://test.com/:15:3
=> "Script error.", "", 0, 0, undefined

La commande try catch génère des informations d'erreur complètes dans le journal de la console, tandis que le gestionnaire window.onerror ne produit que des erreurs de script génériques. Vous pouvez signaler manuellement les exceptions capturées dans le bloc try catch. Pour plus d'informations, consultez les méthodes SDK.

__bl.error(error, pos);

Comment ignorer les erreurs de script dans ARMS ?

Les erreurs de script proviennent généralement de scripts hébergés sur des domaines tiers. Si ces erreurs n'affectent pas l'exécution de votre application, vous pouvez les ignorer en configurant le paramètre ignore du SDK de surveillance frontend ARMS.

Le paramètre ignore permet d'ignorer le signalement d'erreurs JS spécifiques. La valeur de ce paramètre est un objet contenant trois propriétés : ignoreUrls, ignoreApis et ignoreErrors. Le code suivant affiche la valeur par défaut de ce paramètre :

ignore: {
    ignoreUrls: [],
    ignoreApis: [],
    ignoreErrors: []
},

Utilisez la propriété ignoreErrors pour ignorer les erreurs de script. Cette propriété permet d'ignorer les erreurs JS correspondant à une règle spécifiée. Sa valeur peut être une chaîne (type String), une expression régulière (type RegExp), une fonction (type Function) ou un tableau incluant ces trois types. Le code suivant montre comment ignorer les erreurs de script :

__bl.setConfig({
    ignore: {
        ignoreErrors: /^Script error\.?$/
    }
});

Références

• Méthodes SDK

• Référence SDK