스파 데이터 수집

이 문서는 브라우저가 비동기 SPA(단일 페이지 앱) 데이터를 수집하고 저장하는 방법을 설명합니다. 이렇게 하면 브라우저 UI에 표시되는 SPA 데이터를 더 잘 이해할 수 있습니다. 이렇게 하면 SPA API 를 사용하여 사용자 지정 모니터링을 더 쉽게 추가할 수도 있습니다.

브라우저 상호 작용

SPA 모니터링의 핵심은 브라우저 상호 작용 의 개념입니다. New Relic은 브라우저 상호 작용을 앱 사용자의 브라우저에서 발생하는 모든 것으로 정의합니다. 예를 들어:

• 페이지 로드 또는 경로 변경으로 이어지는 사용자 상호작용
• 앱 위젯에 대한 예약된 동적 업데이트

브라우저 상호 작용에는 초기 트리거 이벤트뿐만 아니라 AJAX 요청, 동기 및 비동기 JavaScript와 같은 해당 이벤트로 인한 활동도 포함됩니다. 원인뿐만 아니라 브라우저 상호 작용의 영향도 추적하여 사용자가 애플리케이션의 보기 및 경로 변경을 경험하는 방식을 이해하는 데 도움이 됩니다.

모든 앱은 다르며 모니터링 요구 사항도 다릅니다. 그렇기 때문에 기본 모니터링과 사용자가 선택한 브라우저 상호 작용에 대한 사용자 지정 모니터링을 설정할 수 있는 기능이 포함되어 있습니다.

SPA 데이터 보고 유형

단일 페이지 앱 데이터의 세 가지 주요 범주를 New Relic에 보고할 수 있습니다.

• 초기 페이지 로드
• 경로 변경
• SPA API를 통해 생성된 사용자 지정 브라우저 상호 작용

이들 각각은 BrowserInteraction 이벤트를 생성합니다. 하나 이상의 AJAX 요청이 상호작용의 일부인 경우 연결된 AjaxRequest 이벤트도 생성됩니다. 이러한 이벤트 및 해당 속성은 쿼리 작성기 에서 쿼리할 수 있습니다.

초기 페이지 로드

초기 페이지 로드 는 URL의 전체 로드 또는 다시 로드로 인해 발생하는 기존 URL 변경입니다. 이는 페이지 로드 이벤트( window.onload 이벤트)가 실행될 때 브라우저에 표시됩니다. 초기 페이지 로드 는 브라우저 UI의 경로 변경과 함께 나타납니다.

경로 변경

SPA 사용자는 페이지 로드와 유사한 방식으로 동적 경로 변경을 경험합니다. 사이트나 앱 방문자는 일반적으로 새로운 보기가 어떻게 전달되었는지 신경 쓰지 않습니다. 그들은 단순히 작업을 수행할 때 새로운 보기가 나타난다는 것을 알고 있습니다. 이러한 이유로 UI에서 페이지 로드와 유사한 방식으로 경로 변경을 처리합니다.

단일 페이지 애플리케이션을 최적으로 모니터링하기 위해 이론적으로 경로 변경으로 이어질 수 있는 많은 브라우저 상호 작용 모니터링을 시작합니다.

• 이러한 상호 작용이 경로 변경으로 이어지지 않으면 브라우저는 모니터링을 시작한 다음 무시합니다.
• 이러한 상호작용으로 인해 경로 가 변경되면 브라우저는 동기 및 비동기 활동에 대한 정보를 포함하여 상호작용 시퀀스를 BrowserInteraction 이벤트로 저장합니다.

상호작용은 경로 변경으로 간주되며 다음 중 하나가 발생할 때 BrowserInteraction 이벤트로 저장됩니다.

• URL 해시가 변경됩니다(일반적으로 window.location.hash 사용).
• popstate 이벤트는 상호작용과 연결된 콜백 중에 발생합니다.
• pushState 또는 replaceState API가 호출됩니다.

경로 변경 사항은 브라우저 UI 에 초기 페이지 로드와 함께 나타납니다.

경로 변경 URL에서 해시 조각을 수신하고 저장합니다. 해시를 사용하여 비공개 또는 민감한 데이터를 전달하는 경우 해당 데이터가 New Relic 계정 사용자에게 표시될 수 있습니다. 데이터 수집 및 보고에 대한 자세한 내용은 브라우저 보안을 참조하세요.

맞춤형 모니터링

SPA API 를 사용하여 기본적으로 모니터링되지 않는 브라우저 상호 작용에 대한 사용자 지정 모니터링을 설정할 수 있습니다. API를 사용하여 기본 모니터링을 비활성화할 수도 있습니다.

맞춤 이벤트는 BrowserInteraction 이벤트로 저장되며 다음과 같은 속성을 가집니다.

• category 속성은 Custom 값을 갖습니다.
• trigger 속성은 api 값을 갖습니다. (기본값이지만 API로 변경할 수 있습니다.)

기존 페이지 로드 타이밍과의 차이점

단일 페이지 앱 모니터링에 최적화된 데이터를 제공하기 위해 동기 및 비동기의 저수준 브라우저 기능을 래핑하여 페이지 로드 타이밍을 새로운 방식으로 측정합니다. 이렇게 하면 새 보기에 필요한 변경을 완료하는 데 걸리는 시간을 더 자세히 알 수 있습니다.

이는 페이지 로드 타이밍에 대한 기존 방법과 다릅니다. 기존의 페이지 로드 타이밍 은 window.onload 이벤트 발생을 사용하여 페이지가 로드되는 시기를 결정합니다. 웹 앱에는 window.onload 이벤트가 발생한 후 상당한 시간 동안 실행되는 비동기 코드가 있는 경우가 많기 때문에 이는 보기 변경 타이밍을 측정하는 최적의 방법이 아닙니다.

기존의 window.onload 페이지 로드 타이밍은 여전히 SPA 페이지 보기 페이지에 나타납니다. 특정 페이지 로드 이벤트를 선택하면 창 로드가 페이지 로드 시간 차트에 빨간색 선으로 나타납니다. 표준 페이지 보기로 전환을 선택하여 기존 로드 타이밍 표시로 돌아갈 수도 있습니다.

타이머

에이전트는 타이머를 포함한 모든 비동기 호출을 모니터링합니다. 지속 시간이 1초 미만인 타이머는 래핑됩니다. 1초보다 긴 타이머는 일반적으로 사용자 상호 작용과 관련이 없는 백그라운드 작업 또는 폴링과 같은 웹이 아닌 트랜잭션 을 위한 것이기 때문에 래핑되지 않습니다.

이벤트 및 속성

경로 변경 및 페이지 로드로 이어지는 브라우저 상호작용을 BrowserInteraction 이벤트로 저장하고 AJAX 요청을 AjaxRequest 이벤트로 저장합니다. 쿼리 빌더 에서 이러한 이벤트를 쿼리할 수 있습니다.