Sentry-javascript: Ajouter du texte aux éléments dans le fil d'Ariane ui.click

Créé le 12 mai 2016  ·  18Commentaires  ·  Source: getsentry/sentry-javascript

Cela faciliterait les choses, en particulier pour les applications où les noms de classe ne révèlent pas grand-chose.

Quelque chose du genre :

 div > button.btn.btn-lg.btn-primary "Purchase"

Si l'élément contient beaucoup de texte, il peut être tronqué.

Commentaire le plus utile

Je voulais juste ajouter - j'utilise react & styled-components pour que mes noms de classe soient générés automatiquement, ce serait bien d'avoir plus de contexte (sans avoir à manuellement captureBreadcrumb ):

screen shot 2018-07-02 at 4 36 14 pm

Tous les 18 commentaires

C'est donc quelque chose que j'aimerais faire, mais je suis préoccupé par le fait de gonfler notre fonction de sérialisation DOM au point qu'elle commence à ajouter une surcharge notable aux gestionnaires de clics.

Mais, je vais explorer.

Une alternative simple pourrait être de simplement faire

target = elem.outerHTML;

qui affichera l'élément cliqué exactement tel quel. Vous perdrez l'arborescence - mais d'après mon expérience personnelle, cela n'aide pas autant que de voir l'élément complet et réel que j'ai l'habitude de voir dans mon code tout le temps et que je peux donc reconnaître plus rapidement.

Cela résoudrait également https://github.com/getsentry/raven-js/issues/576

@soroushhakami - nous avons commencé avec outerHTML mais l'avons déconseillé pour cette méthode utilitaire.

La raison pour laquelle nous n'avons pas choisi outerHTML (comme @mitsuhiko l'a commenté) :

  • le format du sélecteur CSS peut afficher plus d'informations avec moins de caractères
  • outerHTML peut inclure des données temporaires bruyantes, par exemple

    • longues chaînes data-reactid (dans React 0.14 et versions antérieures)

    • Attributs title générés dynamiquement destinés aux info-bulles

  • nous obtiendrions beaucoup d' éléments vides addEventListener cible
  • nous avions des boutons avec la même classe/contenu, qui ne sont contextualisés que via des informations sur les ancêtres

Fondamentalement, outerHTML semble bien quand vous montrez un tas d'exemples hypothétiques où cela semble bien, mais notre expérience de l'exécuter en direct pendant quelques semaines était que c'était insuffisant.

Ah je vois, c'est logique, merci pour l'explication ! ??

J'ai ajouté des étiquettes d'identification à tous mes boutons. Surpris qu'ils n'apparaissent pas dans la chapelure. Même si c'était une étiquette personnalisée, j'en serais content. Mais l'étiquette d'identification semble être idéale en raison de son caractère unique.

@nblasgen - si vous pouvez fournir un cas de test défaillant, je serais heureux de voir ce qui se passe.

Mais à l'heure actuelle, le code est censé capturer les identifiants , et il existe un test qui vérifie cela .

+1 pour afficher les identifiants, ou une balise personnalisée comme data-sentry-id="Some text here"

Je vais fermer celui-ci pour l'instant, car nous sommes conscients de cette pièce manquante et nous allons revoir comment cela fonctionne dans la prochaine version majeure.

Réf : https://github.com/getsentry/raven-js/issues/783
Réf : https://github.com/getsentry/raven-js/issues/576

Je voulais juste ajouter - j'utilise react & styled-components pour que mes noms de classe soient générés automatiquement, ce serait bien d'avoir plus de contexte (sans avoir à manuellement captureBreadcrumb ):

screen shot 2018-07-02 at 4 36 14 pm

@kamilogorek des mises à jour à ce sujet ?

Existe-t-il une possibilité d'affiner le clic sur « message » ?

Peut-être que plus de données peuvent être transmises à breadcrumbCallback pour que les gens choisissent ce dont ils ont besoin sans les envoyer à sentinelle par défaut ? Peut-être même un élément dom entier ?

@TuxujPes, ce sera possible dans la prochaine version majeure, mais pas dans celle-ci, car cela nécessite des modifications de l'API publique que nous ne pouvons introduire que dans les versions majeures.

@kamilogorek ça sonne bien. Des estimations sur la date de sortie majeure?

Vers la fin du troisième trimestre (excusez-moi un temps de réponse si long, c'était en vacances).

+1 pour afficher les identifiants, ou une balise personnalisée comme data-sentry-id="Some text here"

Ils pourraient analyser s'il y a cette information et l'emporter avec elle. S'il existe, quittez les sélecteurs avec un bouton pour plus d'informations.

@hiagodotme @TuxujPes @adamreisnz cette fonctionnalité est déjà disponible dans le nouveau SDK - https://docs.sentry.io/learn/filtering/?platform=javascript#before -breadcrumb

Pour info : n'oubliez pas que l'utilisation du nouveau SDK vous apporte +50 Ko pour la taille du bundle #1552

@ 1999, il ajoute 12,7 Ko par rapport à raven-js, n'utilisez pas de tailles non compressées pour la comparaison, car ce n'est pas pertinent.
La v5 (https://github.com/getsentry/sentry-javascript/pull/1919) sera également inférieure à 15 Ko, vous n'aurez donc pas à vous soucier de l'augmentation de votre charge utile.

@kamilogorek J'ai un peu peur des PR avec plus de 200 fichiers de modifications, cela ressemble plus à un tout nouveau SDK qu'à une nouvelle version. Aussi, quelle est la date de sortie ETA de celui-ci?

Cette page vous a été utile?
0 / 5 - 0 notes