Maison >interface Web >js tutoriel >Que signifie 'l'erreur de script'?

Que signifie 'l'erreur de script'?

Joseph Gordon-Levittoriginal: 2025-02-15 11:45:12992parcourir

What the Heck Does

Points de base

Le navigateur envoie un message "Erreur de script" à la fonction de rappel onerror lorsque le fichier JavaScript provient d'une source différente. Ceci est pour des raisons de sécurité pour empêcher une fuite accidentelle d'informations potentiellement sensibles.
Pour obtenir un aperçu des erreurs JavaScript fournies par des fichiers à partir de différentes sources, deux étapes doivent être prises: ajoutant crossorigin="anonymous" des propriétés de script et ajoutant des en-têtes HTTP à domaine croisé. Cela permet à toute source d'obtenir le fichier et les erreurs déclenchées par le script seront signalées à window.onerror.
Si l'en-tête HTTP du script ne peut pas être ajusté, vous pouvez utiliser try/catch comme alternative. En emballage du code tiers dans un bloc try/catch, vous pouvez avoir un aperçu des erreurs lancées par des scripts interdomains. Cependant, si possible, il est toujours recommandé de définir les propriétés et les en-têtes CORS.

Cet article est créé en collaboration avec Sentry.io. Merci de soutenir les partenaires qui ont rendu le point de point possible.

Si vous avez déjà utilisé l'événement onerror de JavaScript, vous avez peut-être rencontré la situation suivante:

Erreur de script.

Lorsqu'une erreur provient d'un fichier JavaScript à partir d'une source différente (nom de domaine différent, port ou protocole), le navigateur envoie une "erreur de script" à la fonction de rappel onerror. Ceci est douloureux car même si une erreur se produit, vous ne savez pas quelle est l'erreur, ni de quel code provient de l'erreur. Et le but de window.onerror est de mieux comprendre les erreurs non apprises dans l'application.

Raison: scripts inter-domaines

Pour mieux comprendre ce qui se passe, considérez l'exemple suivant HTML, en supposant qu'il vient de http://example.com/test:

<code class="language-html"><!DOCTYPE html>


  <title>example.com/test</title>


  
  

</code>

Il s'agit du contenu de http://another-domain.com/app.js. Il déclare une seule fonction appelée foo dont l'appel lancera toujours ReferenceError.

<code class="language-javascript">// another-domain.com/app.js
function foo() {
  bar(); // ReferenceError: bar 不是函数
}</code>

Lorsque ce document est chargé et que JavaScript est exécuté dans le navigateur, ce qui suit est sorti de la console (enregistrée via la fonction de rappel window.onerror):

"Erreur de script.", "", "", 0, 0, indéfini

Ce n'est pas une erreur JavaScript - le navigateur masque délibérément les fichiers de script à partir de différentes sources pour des raisons de sécurité. Il s'agit d'empêcher le script de fuir accidentellement des informations potentiellement sensibles dans la fonction de rappel onerror qu'il ne peut pas contrôler. Par conséquent, le navigateur permet uniquement à window.onerror de mieux comprendre les erreurs provenant du même domaine. Tout ce que nous savons, c'est qu'une erreur s'est produite - pas de savoir rien d'autre!

Je ne suis pas une mauvaise personne, vraiment!

Bien que le navigateur soit dans de bonnes intentions, vous voulez creuser profondément dans les erreurs lancées par des scripts de différentes sources, et il y a de très bonnes raisons:

Les fichiers JavaScript de votre application proviennent de différents noms d'hôtes (par exemple, static.sentry.io/app.js).
Vous utilisez des bibliothèques fournies à partir d'un CDN communautaire tel que CDNJS ou Google Hosting Library.
Vous utilisez une bibliothèque JavaScript tierce commerciale qui est uniquement disponible à partir d'un serveur externe.

Mais ne vous inquiétez pas! Une compréhension plus profonde des erreurs JavaScript fournies par ces fichiers ne nécessite que quelques ajustements simples.

Solution: Propriétés et en-têtes CORS

Pour comprendre l'exception JavaScript lancée par les scripts de différentes sources, vous devez faire deux choses.

1. `crossorigin="anonymous"`

Cela indique au navigateur que le fichier cible doit être récupéré "anonymement". Cela signifie que lorsque vous demandez ce fichier, le navigateur ne transmet aucune information potentielle d'identification de l'utilisateur au serveur, tel que les cookies ou les informations d'identification HTTP.

<code class="language-html"><!DOCTYPE html>


  <title>example.com/test</title>


  
  

</code>

CORS est l'abréviation du partage de ressources inter-domaines, et c'est un ensemble d'API (principalement des en-têtes HTTP) qui spécifie comment les fichiers sont téléchargés et servis dans les domaines.

<code class="language-javascript">// another-domain.com/app.js
function foo() {
  bar(); // ReferenceError: bar 不是函数
}</code>

En définissant

, le serveur indique au navigateur que n'importe quelle source peut obtenir ce fichier. Alternativement, vous pouvez le limiter aux sources connues que vous contrôlez:

<code>Access-Control-Allow-Origin: *</code> Une fois ces deux étapes terminées, toutes les erreurs déclenchées par ce script seront signalées à

, comme tout script de même domaine ordinaire. Par conséquent, l'exemple

<code class="language-html"></code>

ne sera plus une "erreur de script", mais à la place:

window.onerror onerror c'est tout! "Erreur de script" ne vous dérangera plus, vous et votre équipe.

<code>Access-Control-Allow-Origin: *</code>

Alternative: essayez / attraper

Parfois, nous ne pouvons pas ajuster l'en-tête HTTP des scripts que notre application Web utilise. Dans ce cas, il existe une alternative: utilisez .

Considérez à nouveau l'exemple d'origine, cette fois en utilisant try/catch:

try/catch Pour le bien des générations futures,

Again, comme suit:

<code class="language-bash">$ curl --head https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.js | \
    grep -i "access-control-allow-origin"

Access-Control-Allow-Origin: *</code>

some-domain.com/app.js Exécutez l'exemple HTML sorti les deux entrées suivantes à la console:

<code>"ReferenceError: bar 未定义", "http://another-domain.com/app.js", 2, 1, [Object Error]</code>

La première instruction Console - de

- a réussi à obtenir un objet d'erreur contenant la trace de type, de message et de pile, y compris le nom du fichier et le numéro de ligne. La deuxième instruction de la console de

<code class="language-html">
window.onerror = function (message, url, line, column, error) {
  console.log(message, url, line, column, error);
}

try {
  foo(); // 调用 app.js 中声明的函数
} catch (e) {
  console.log(e);
  throw e; // 故意重新抛出（由 window.onerror 捕获）
}
</code>

ne peut à nouveau que sortir uniquement "Erreur de script".

try/catch Maintenant, cela signifie-t-il que vous devez essayer de capturer tout le code? Probablement pas. Si vous pouvez facilement changer HTML et spécifier les en-têtes CORS sur le CDN, il est préférable de le faire et de rester avec window.onerror.

mais, si vous ne contrôlez pas ces ressources, envelopper le code tiers en utilisant window.onerror est un moyen fiable (bien que fastidieux) d'obtenir une compréhension plus profonde des erreurs lancées par des scripts inter-domaines.

Remarque: Par défaut, le SDK Raven.js JavaScript de Sentry détecte soigneusement les méthodes intégrées pour essayer d'emballer automatiquement votre code dans un bloc try/catch. Ceci est fait pour essayer de capturer des messages d'erreur et de piler des traces pour tous les scripts, peu importe d'où ils viennent. Si possible, il est toujours recommandé de définir les propriétés et les en-têtes CORS.

Bien sûr, il existe de nombreux outils commerciaux et open source qui peuvent faire tout le travail pour vous. (Shh: Vous voudrez peut-être essayer de déboguer JavaScript avec Sentry.)

c'est tout! Surveillance des erreurs heureuse.

FAQ d'erreur de script FAQ

(La partie FAQ est omise ici, car l'article est trop long et a une faible corrélation avec le sujet de l'article, vous pouvez ajouter ou modifier la FAQ vous-même selon les besoins)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html Static Cookie try catch Error 回调函数栈堆 JS undefined 对象事件 http sentry Access

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Test angulaire: introduction d'un développeurArticle suivant：Test angulaire: introduction d'un développeur

Articles Liés

Voir plus

Que signifie 'l'erreur de script'?

1. crossorigin="anonymous"

CORS est l'abréviation du partage de ressources inter-domaines, et c'est un ensemble d'API (principalement des en-têtes HTTP) qui spécifie comment les fichiers sont téléchargés et servis dans les domaines.

Articles Liés

1. `crossorigin="anonymous"`