Sentry-javascript: Text zu Elementen in Breadcrumbs hinzufügen ui.click

Erstellt am 12. Mai 2016  ·  18Kommentare  ·  Quelle: getsentry/sentry-javascript

Dies würde die Dinge insbesondere für Apps einfacher machen, bei denen die Klassennamen nicht viel verraten.

Etwas in der Richtung von:

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

Wenn das Element viel Text enthält, kann es abgeschnitten werden.

Hilfreichster Kommentar

Wollte nur hinzufügen - ich verwende React & Styled-Komponenten, damit meine Klassennamen automatisch generiert werden, wäre toll, etwas mehr Kontext zu haben (ohne manuell captureBreadcrumb ):

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

Alle 18 Kommentare

Das ist etwas, was ich gerne tun würde, aber ich mache mir Sorgen, dass unsere DOM-Serialisierungsfunktion so weit aufgebläht wird, dass sie den Klickhandlern einen merklichen Overhead hinzufügt.

Aber ich werde es erkunden.

Eine einfache Alternative könnte sein, einfach zu tun

target = elem.outerHTML;

Dadurch wird das angeklickte Element genau so ausgegeben, wie es ist. Sie verlieren die Baumstruktur - aber meiner persönlichen Erfahrung nach hilft das nicht so viel, wie das vollständige, tatsächliche Element zu sehen, das ich gewohnt bin, in meinem Code ständig zu sehen und daher schneller zu erkennen.

Das würde auch https://github.com/getsentry/raven-js/issues/576 lösen

@soroushhakami – wir haben zuerst mit outerHTML angefangen, es aber für diese Dienstprogrammmethode

Der Grund, warum wir uns nicht für outerHTML (wie @mitsuhiko kommentiert):

  • das CSS-Selektorformat kann mehr Informationen mit weniger Zeichen anzeigen
  • outerHTML kann verrauschte temporäre Daten enthalten, zB

    • lange data-reactid Strings (in React 0.14 und früher)

    • dynamisch generierte title Attribute für Tooltips

  • wir würden viele leere Elemente erhalten, je nachdem, wie das addEventListener Ziel konfiguriert ist
  • wir hatten Schaltflächen mit derselben Klasse / demselben Inhalt, die nur über Vorfahreninformationen kontextualisiert sind

Grundsätzlich scheint outerHTML nett zu sein, wenn man eine Reihe von hypothetischen Beispielen zeigt, in denen es gut aussieht, aber unsere Erfahrung, es einige Wochen lang live zu betreiben, war, dass es unzureichend war.

Ah ich verstehe, macht Sinn, danke für die Erklärung! 👍.

Ich habe allen meinen Schaltflächen ID-Tags hinzugefügt. Überrascht, dass sie nicht in den Semmelbröseln auftauchen. Selbst wenn es ein benutzerdefiniertes Tag wäre, wäre ich damit zufrieden. Aber ID-Tag scheint aufgrund seiner Einzigartigkeit ideal zu sein.

@nblasgen – Wenn Sie einen fehlgeschlagenen Testfall bereitstellen können, würde ich gerne nachsehen, was

Aber im Moment soll der Code , der dies überprüft .

+1 für das Anzeigen von IDs oder ein benutzerdefiniertes Tag wie data-sentry-id="Some text here"

Ich schließe diesen hier vorerst, da wir uns dieses fehlenden Teils bewusst sind und werden uns die Funktionsweise dieses Dings in der nächsten Hauptversion erneut ansehen.

Ref: https://github.com/getsentry/raven-js/issues/783
Ref: https://github.com/getsentry/raven-js/issues/576

Wollte nur hinzufügen - ich verwende React & Styled-Komponenten, damit meine Klassennamen automatisch generiert werden, wäre toll, etwas mehr Kontext zu haben (ohne manuell captureBreadcrumb ):

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

@kamilogorek irgendwelche Updates dazu?

Gibt es eine Möglichkeit zur Feinabstimmung auf "Nachricht" klicken?

Vielleicht können mehr Daten an breadcrumbCallback damit die Leute auswählen können, was sie brauchen, ohne sie standardmäßig an die Wache zu senden? Vielleicht sogar ein ganzes Dom-Element?

@TuxujPes es wird in der nächsten Hauptversion möglich sein, jedoch nicht in dieser, da es einige öffentliche API-Änderungen erfordert, die wir nur in Hauptversionen einführen können.

@kamilogorek das hört sich toll an. Irgendwelche Schätzungen zum Datum der Hauptveröffentlichung?

Irgendwann gegen Ende des dritten Quartals (Entschuldigung, so lange Reaktionszeit, war im Urlaub).

+1 für das Anzeigen von IDs oder ein benutzerdefiniertes Tag wie data-sentry-id="Some text here"

Sie könnten analysieren, ob es diese Informationen gibt und sie mitnehmen. Falls vorhanden, lassen Sie die Selektoren mit einer Schaltfläche, um weitere Informationen zu erhalten.

@hiagodotme @TuxujPes @adamreisnz diese Funktion ist bereits im neuen SDK verfügbar - https://docs.sentry.io/learn/filtering/?platform=javascript#before -breadcrumb

Zu Ihrer Information: Vergessen Sie nur nicht, dass Sie mit dem neuen SDK +50 KB für die Bundle-Größe #1552 erhalten

@1999 fügt es 12,7 kB im Vergleich zu raven-js hinzu. Verwenden Sie keine nicht-gzippten Größen zum Vergleich, da dies nicht relevant ist.
Auch v5 (https://github.com/getsentry/sentry-javascript/pull/1919) wird <15kB groß sein, sodass Sie sich keine Sorgen um Ihre Nutzlasterhöhung machen müssen.

@kamilogorek Ich habe ein bisschen Angst vor PRs mit mehr als 200 Änderungsdateien, das scheint eher ein komplett neues SDK als eine neue Version zu sein. Und was ist das ETA-Veröffentlichungsdatum davon?

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen