Sentry-javascript: 이동 경로 ui.click의 요소에 텍스트 추가

이것은 내가 하고 싶은 일이지만 클릭 핸들러에 눈에 띄는 오버헤드를 추가하기 시작하는 지점까지 DOM 직렬화 기능을 부풀리는 것에 대해 우려하고 있습니다.

그러나 나는 탐구할 것이다.

한 가지 쉬운 대안은

target = elem.outerHTML;

클릭한 요소를 있는 그대로 출력합니다. 당신은 트리 구조를 느슨하게 할 것입니다 - 그러나 내 개인적인 경험에 따르면 내가 항상 내 코드에서 보는 데 익숙하고 따라서 더 빨리 인식할 수 있는 완전한 실제 요소를 보는 것만큼 도움이 되지는 않습니다.

그러면 https://github.com/getsentry/raven-js/issues/576 도 해결할 수 있습니다.

@soroushhakami – 먼저 outerHTML 시작했지만 이 유틸리티 메서드에서는 더 이상 사용되지 않습니다 .

outerHTML 하지 않은 이유( @mitsuhiko가 언급한 대로):

• CSS 선택기 형식은 더 적은 문자로 더 많은 정보를 표시할 수 있습니다.
• outerHTML 에는 시끄러운 임시 데이터가 포함될 수 있습니다. 예:
  
  
  
  • 긴 data-reactid 문자열(React 0.14 및 이전 버전)
  
  
  • 툴팁용으로 동적으로 생성된 title 속성
  
  
• addEventListener 대상이 구성되는 방식에 따라 많은 빈 요소가 표시됩니다.
• 우리는 조상 정보를 통해서만 맥락화되는 동일한 클래스/콘텐츠를 가진 버튼을 가졌습니다.

기본적으로 outerHTML 는 멋지게 보이는 가상의 예를 여러 개 보여줄 때 멋져 보이지만 몇 주 동안 라이브로 실행한 경험으로는 충분하지 않았습니다.

아 알겠습니다, 이해가 됩니다, 설명 감사합니다! 👍

모든 버튼에 ID 태그를 추가했습니다. 이동 경로에 표시되지 않는 것에 놀랐습니다. 커스텀 태그라고 해도 만족합니다. 그러나 ID 태그는 고유성 때문에 이상적인 것 같습니다.

@nblasgen – 실패한 테스트 사례를 제공할 수 있다면 어떤 일인지 살펴보고 싶습니다.

그러나 지금은 코드가 ID를 캡처해야 하며 이를 확인 하는 테스트

ID 표시에 대한 +1 또는 data-sentry-id="Some text here" 와 같은 사용자 정의 태그

이 누락된 부분을 알고 있기 때문에 지금은 이 부분을 닫고 다음 주요 버전에서 이 기능이 어떻게 작동하는지 다시 살펴보겠습니다.

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

추가하고 싶었습니다. react & styled-components를 사용하고 있으므로 클래스 이름이 자동으로 생성됩니다. 더 많은 컨텍스트가 있으면 좋을 것입니다(수동으로 captureBreadcrumb 하지 않고도).

@kamilogorek 이에 대한 업데이트가 있습니까?

클릭 "메시지"를 미세 조정할 가능성이 있습니까?

사람들이 기본적으로 Sentry로 보내지 않고 필요한 것을 선택할 수 있도록 더 많은 데이터를 breadcrumbCallback 에 전달할 수 있습니까? 전체 dom 요소일 수도 있습니다.

@TuxujPes 다음 주요 릴리스에서는 가능하지만 이번 릴리스에서는 불가능합니다. 주요 릴리스에서만 도입할 수 있는 몇 가지 공개 API 변경이 필요하기 때문입니다.

@kamilogorek 잘 들립니다. 주요 출시일에 대한 예상이 있습니까?

Q3가 거의 끝나갈 무렵(응답 시간이 길어 죄송합니다. 휴가 중이었습니다).

ID 표시에 대한 +1 또는 data-sentry-id="Some text here" 와 같은 사용자 정의 태그

그들은 이 정보가 있는지 분석하고 가져갈 수 있습니다. 존재하는 경우 추가 정보를 보려면 선택기에 버튼을 남겨두십시오.

@hiagodotme @TuxujPes @adamreisnz 이 기능은 이미 새 SDK에서 사용할 수 있습니다. - https://docs.sentry.io/learn/filtering/?platform=javascript#before -breadcrumb

참고: 새 SDK를 사용하면 번들 크기 #1552에 대해 +50Kb가 제공된다는 점을 잊지 마세요.

@ 1999 는 raven-js와 비교할 때 12.7kB를 추가합니다. 관련이 없으므로 비교를 위해 압축되지 않은 크기를 사용하지 마십시오.
또한 v5(https://github.com/getsentry/sentry-javascript/pull/1919)는 <15kB이므로 페이로드 증가에 대해 걱정할 필요가 없습니다.

@kamilogorek 저는 200개 이상의 변경 파일이 있는 PR이 조금 두렵습니다. 이것은 새 버전이라기보다는 완전히 새로운 SDK처럼 보입니다. 또한 ETA 출시 날짜는 무엇입니까?