브라우저 SPA 모니터링 2.0

중요

이 기능은 공개 미리보기로 제공됩니다. 결국에는 기존 브라우저 SPA 환경을 대체하게 될 것입니다.

브라우저 단일 페이지 애플리케이션(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 이벤트가 생성되지 않습니다.

새로운 브라우저 SPA 모니터링 환경을 사용해 보세요

요구 사항 검토

이 기능은 당사의 표준 브라우저 지원 설명서 에 따라 테스트되었으며 지원됩니다.

기능 플래그 추가

에이전트가 APM 방식으로 설치된 경우 당사 지원팀에 문의하시면 귀하 계정에서 해당 기능 플래그를 활성화해 드리겠습니다.

에이전트가 NPM 또는 UI 기반 복사/붙여넣기 방식으로 설치된 경우 브라우저 에이전트 코드에 다음 기능 플래그를 추가합니다.

웹페이지 HTML에서 뉴렐릭 브라우저 에이전트 코드를 찾으세요.
init 설정 개체에 soft_nav 기능 플래그를 추가합니다. 다음은 그 예입니다.
```
<script type="text/javascript"> ;window.NREUM||(NREUM={});init={ …, feature_flags: ['soft_nav'] }:
```
앱을 배포합니다.
이 기능을 비활성화해야 합니까? 간단히 기능 플래그를 제거하세요.

데이터가 뉴렐릭으로 전송되고 있는지 확인하세요

먼저 상호작용이 경험적 원칙을 따르는지 확인하세요: 클릭/키누름/제출 -> 경로 변경 -> DOM 수정.

다음으로, 브라우저의 개발자 도구에서 네트워크 탭을 확인하세요. /events/1/ 로 가는 요청을 필터링합니다. 상호작용이 캡처되고 전송되고 있음을 나타내는 bel.7;1 로 시작하는 페이로드가 있어야 합니다.

마지막으로, 상호작용 데이터는 브라우저 엔터티 대시보드와 차트로 계속 유입되어야 합니다.

알려진 문제

API 사용:
- newrelic.interaction().end() 해결 방법: 이전에 이 방법을 사용하여 보조금 마감 문제를 해결한 경우, 이제는 불필요한 추가 보조금이 표시될 수 있습니다. 최적의 결과를 얻으려면 사용량을 검토하세요.
- createTracer() 기능 변경: createTracer() 더 이상 상호작용을 열어두거나 콜백 시간을 측정하지 않습니다. 이를 통해 JavaScript 코드를 추적하는 경우 다른 방법을 살펴보세요.
AjaxRequest 협회:
- 키워드 탐색에서 제외될 가능성: 이전 키워드 탐색이 끝나갈 무렵 시작된 Ajax 요청은 이제 키워드 탐색 기간이 단축되어 제외될 수 있습니다.
- 수동 확장: 특정 클래스에 대한 속성이 되는 요청이 필요한 경우, .interaction() 함수에 추가된 인수 .interaction({waitForEnd: true}) 를 사용하여 요청이 실행될 때까지 클래스를 열어 둔 다음, .end() 클래스를 실행합니다. 이렇게 하면 요청이 상호작용과 연관됩니다.

피드백을 남겨주세요

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

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