새로운 브라우저 SPA 모니터링

SPA(에이전트 v1.298.0에서 출시됨)

장기 작업 고려 사항은 이전의 단일 페이지 애플리케이션(SPA)에서 사용되었던 광범위한 콜백 추적을 대체하기 위해 도입되었습니다. 또한 BrowserInteraction과 관련된 AjaxRequest 이벤트의 jsDuration, timeToSettle 및 timeToLastCallbackEnd 속성을 백필하는 데에도 사용됩니다.

에이전트의 nrWrapper 에 의해 래핑된 특정 네이티브 브라우저 객체의 경우 콜백 시간이 지정됩니다. 지속 시간이 50ms를 넘는 경우(긴 작업) BrowserInteraction을 확장할 수 있습니다. 이는 자연스럽게 상호작용이 발생하는 시점을 파악하기 위해 소프트 탐색 휴리스틱을 따랐습니다. 이제 상호작용은 추가적으로 대기하고, 5초 동안 긴 작업이 없는 기간이 될 때까지 지속 시간을 연장하며, 종료 시간은 이에 따라 재조정됩니다.

이전에는 상호작용과 관련된 AjaxRequest가 콜백 타이밍을 보고하거나 추적하지 않아 위에 언급된 세 가지 속성에 대한 값이 무효화되었습니다. 현재 업데이트에서는 장기 작업을 유발하는 이벤트 리스너를 포함하는 인프라의 일부인 XMLHttpRequest (하지만 fetch 은 아님)의 jsDuration, timeToSettle 및 timeToLastCallbackEnd 속성이 장기 작업의 타이밍을 반영하도록 업데이트됩니다.

SPA(에이전트 v1.253.0에서 출시됨)

브라우저 단일 페이지 애플리케이션(SPA)을 모니터링하는 고객을 위해, 저희는 다음과 같은 수많은 문제점을 해결하기 위해 SPA 모니터링 기능을 전면 개편했다는 소식을 전해드리게 되어 기쁩니다.

• 사용할 수 없는 최신 버전: 타사 라이브러리와의 잦은 충돌과 신뢰할 수 없는 상호작용 캡처로 인해 기존 에이전트가 어려움을 겪었으며, 이로 인해 최신 버전을 사용할 수 없게 되는 경우가 많았습니다.
• 패치워크 솔루션: SPA 패치로 한 가지 문제를 해결하면 또 다른 문제가 발생하는 경우가 많아 수정과 후퇴가 짜증나는 악순환이 발생합니다.
• 타사 라이브러리 충돌: 전역 래핑, 특히 Promises 주변의 래핑은 다른 라이브러리와의 충돌로 인해 코드 기능을 방해하는 경우가 많습니다.
• 성능 병목 현상, 병목지점: 타이머, RAF 및 Promise 체인을 사용하는 코드와의 충돌로 인해 속도 저하부터 정지까지 성능 문제가 발생했습니다.

업데이트된 SPA 모니터링 환경은 이러한 문제를 제거하고 크게 향상된 모니터링 환경을 제공하도록 설계되었습니다. 주요 변경 사항은 다음과 같습니다.

• 래핑되지 않은 실행: 핵심 글로벌을 래핑하지 않음으로써 새로운 SPA 환경은 애플리케이션의 실행 속도를 향상시킵니다.

• 소프트 탐색 경험에 맞춰 조정: 새로운 환경에서는 Google Chrome의 소프트 탐색 기능을 도입하여 더 정확한 제스처 추적과 사용자 동작과의 향상된 정렬을 제공합니다.

• 간소화된 전략 결정: 전략은 이제 UI 이벤트(클릭/키다운/제출 -> 경로 변경 -> DOM 수정)로 정의되어 더 명확하고 효율적인 캡처 접근 방식을 제공합니다.

  • 잠재적인 이벤트 연결해제: 이전에 연결되었던 AjaxRequest 및 JavascriptError 이벤트가 UI중심의 복합복합에 초점을 맞춰서 DB2 이벤트의 연결이 해제되는 것을 관찰할 수 있습니다.

• 주요 지표에 초점 맞추기: 보고된 데이터는 크게 변경되지 않았지만, 새로운 환경에서는 더 이상 전략 내의 JavaScript 실행이나 기간을 추적하지 않아 보고된 정보가 간소화되었습니다.

• 상호작용 시간 단축: 특히 경로 변경 시 상호작용 시간이 상당히 단축될 것으로 예상됩니다. 초기 페이지 로드가 약간 줄어들 것입니다.

• API 업데이트:

  • .interaction() 함수에 새로운 선택적 인수 .interaction({waitForEnd: true}) 이 추가되었습니다. 이를 통해 사용자 상호작용 종료 시간을 사용자 지정할 수 있습니다. 기존 .interaction() 기능은 변경되지 않습니다.
  • 더 이상 사용되지 않는 API: createTracer 함수: createTracer 함수는 계속 작동하지만 더 이상 상속을 열어 두지 않거나 시간을 낭비하므로 더 이상 사용되지 않습니다. 참고: 새로운 SPA 환경에서 createTracer 계속 사용하면 BrowserTiming 이벤트가 생성되지 않습니다.

알려진 문제

• API 사용:

  • newrelic.interaction().end() 해결 방법: 이전에 이 방법을 사용하여 보조금 마감 문제를 해결한 경우, 이제는 불필요한 추가 보조금이 표시될 수 있습니다. 최적의 결과를 얻으려면 사용량을 검토하세요.
  • createTracer() 기능 변경: createTracer() 더 이상 상호작용을 열어두거나 콜백 시간을 측정하지 않습니다. 이를 통해 JavaScript 코드를 추적하는 경우 다른 방법을 살펴보세요.

• AjaxRequest 협회:

  • 키워드 탐색에서 제외될 가능성: 이전 키워드 탐색이 끝나갈 무렵 시작된 Ajax 요청은 이제 키워드 탐색 기간이 단축되어 제외될 수 있습니다.
  • 수동 확장: 특정 클래스에 대한 속성이 되는 요청이 필요한 경우, .interaction() 함수에 추가된 인수 .interaction({waitForEnd: true}) 를 사용하여 요청이 실행될 때까지 클래스를 열어 둔 다음, .end() 클래스를 실행합니다. 이렇게 하면 요청이 상호작용과 연관됩니다.

피드백을 남겨주세요

버그, 기능 요청, 성능 개선 사항을 보고하려면 GitHub 문제를 제출하세요 .

기타 피드백이 있으시면 [SoftNav]: 로 시작하는 제목으로 browser-agent@newrelic.com 에게 이메일을 보내서 생각과 제안을 공유해 주세요.