JavaScript XHR 오리진 추적을 사용하면 브라우저에서 XMLHttpRequest 또는 Fetch 요청 중에 서로 다른 호출 스택에 대해 서블릿 호출을 분할할 수 있습니다. 이를 통해 프로파일된 JVM의 활동과 브라우저에서의 동작을 더 잘 연관시킬 수 있습니다. 아래에서 "XHR"은 XMLHttpRequest와 Fetch 메커니즘 모두를 의미합니다.
브라우저 플러그인
이 기능을 사용하려면 브라우저로 Google Chrome을 사용하고, JProfiler origin tracker 확장 프로그램을 설치해야 합니다.
Chrome 확장 프로그램은 툴바에 JProfiler 아이콘이 있는 버튼을 추가하여 추적을 시작할 수 있습니다. 추적을 시작하면 확장 프로그램이 모든 XHR 호출을 가로채어 로컬에서 실행 중인 JProfiler 인스턴스에 보고합니다. 추적이 시작되지 않은 경우, JProfiler는 JavaScript XHR 오리진 추적 설정 방법을 안내하는 정보 페이지를 표시합니다.
추적이 활성화되면 JProfiler 확장 프로그램이 페이지를 새로고침할 것을 요청합니다. 이는 계측을 추가하기 위해 필요합니다. 페이지를 새로고침하지 않으면 이벤트 감지가 제대로 동작하지 않을 수 있습니다.
추적 상태는 도메인별로 영구적으로 유지됩니다. 추적이 활성화된 상태에서 브라우저를 재시작하고 동일한 URL을 방문하면, 페이지를 새로고침하지 않아도 추적이 자동으로 활성화됩니다.
JavaScript XHR 트리
XHR 호출이 JProfiler에서 활성 프로파일링 세션으로 프로파일된 JVM에 의해 처리되는 경우, JavaScript XHR 뷰에서 이러한 호출의 누적 호출 트리를 확인할 수 있습니다. 뷰가 비어 있다면, 뷰 상단의 "Scope"를 "All XHR calls"로 전환하여 XHR 호출이 발생했는지 확인할 수 있습니다.
JavaScript 호출 스택 노드는 소스 파일과 라인 번호 정보를 포함합니다. XHR 호출이 발생한 함수에는 특수 아이콘과 인접한 하이퍼링크가 표시되며, 해당 XHR 호출이 프로파일된 JVM에 의해 처리된 경우에만 나타납니다. 하이퍼링크를 클릭하면 호출 트리 뷰의 JavaScript 분할 노드로 이동하여 이 유형의 요청을 처리한 서버 측 호출 트리를 확인할 수 있습니다.
트리의 최상단에는 브라우저 이벤트 노드가 표시되며, 이벤트 이름과 엘리먼트 이름, 그리고 이벤트의 출처를 파악하는 데 도움이 되는 주요 속성들이 함께 나타납니다. 모든 요청에 이벤트가 연결되어 있는 것은 아닙니다.
확장 프로그램은 여러 인기 있는 JavaScript 프레임워크를 인식하며,
이벤트의 타겟 노드에서 이벤트 리스너가 위치한 노드까지의 상위 계층을 따라가면서
표시 및 호출 트리 분할에 적합한 속성을 찾습니다. 프레임워크 전용 속성을 찾지 못하면
id 속성에서 멈춥니다. ID가 없는 경우 a, button, input과 같은
"control elements"를 찾습니다. 모두 실패할 경우 이벤트 리스너가 등록된 엘리먼트가 표시됩니다.
경우에 따라 자동으로 감지된 속성이 적합하지 않을 수 있으며, 다른 호출 트리 분할 방식을 선호할 수 있습니다. 예를 들어, 일부 프레임워크는 자동으로 ID를 할당하지만, 모든 엘리먼트를 의미 있는 동작 설명과 함께 그룹화하는 것이 더 읽기 쉬울 수 있습니다. 다른 호출 트리 분할을 원한다면, HTML 속성
data-jprofiler="..."
을 타겟 엘리먼트 또는 타겟과 이벤트 리스너 위치 사이의 엘리먼트에 추가하세요. 해당 속성의 텍스트가 분할에 사용되며, 다른 속성은 무시됩니다.
호출 트리 분할
호출 트리 뷰에서 XHR 호출은 각 브라우저 이벤트와 호출 스택의 조합별로 호출 트리를 분할합니다.
분할 노드는 브라우저 이벤트에 대한 정보를 표시합니다.
이벤트가 진행 중이지 않은 경우(setTimeout() 호출 등)에는 마지막 몇 개의 스택 프레임이 인라인으로 표시됩니다.
이러한 노드의 "show more" 하이퍼링크를 클릭하면 View→Show Node Details 액션으로 열리는 것과 동일한 상세 대화상자가 열립니다. JavaScript 분할 노드의 경우, 상세 대화상자에는 노드의 텍스트 대신 전체 브라우저 호출 스택이 표시됩니다. 다른 JavaScript 분할 노드의 호출 스택을 확인하려면, 비모달 상세 대화상자를 열어둔 채 해당 노드를 클릭하면 대화상자의 내용이 자동으로 갱신됩니다.
