APM Call Tree

/call-tree 데모에 사용된 ApmCallTree와 ApmProfileTimelineDataChart는 데스크톱 트랜잭션 상세의 호출 트리와 프로파일 타임라인을 표시합니다. 모바일 전용 표현은 Mobile Call Tree를 참고하세요.

인터랙티브 데모

고정된 샘플 호출을 펼치거나 선택해 보세요. 선택한 노드는 콜트리와 아래 타임라인에 함께 반영됩니다.

ApmCallTree

Prop	타입	필수	설명
data	ApmCallTreeNode[]	예	호출 트리 데이터
columns	ApmCallTreeColumn[]	예	컬럼 정의
expandAll	boolean	예	전체 펼침 상태
highlightedNodeKeys	number[]	예	강조할 노드 키
transactionDuration	number	예	전체 트랜잭션 시간
emptyText, stackTraceText	string	예	빈 상태와 스택 추적 문구
selectedTreeIndex, scrollToTreeIndex, focusedTreeIndex	string	아니요	선택·스크롤·포커스 대상
navigationRequest	number	아니요	같은 노드로 다시 이동할 때 변경하는 요청 값
detailLabels	Partial<CallTreeExpandedLabels>	아니요	상세 라벨
classLinkable	boolean	아니요	클래스 링크 허용 여부
connectionLabels	TransactionConnectionLabels	아니요	연결 메뉴 라벨
counterpartDisabled, counterpartDisabledReason	boolean, string	아니요	상대 트랜잭션 동작 제한과 이유
expandOutgoingOnly, expandBeforeDetail	boolean	아니요	펼침 범위와 상세 열기 동작

주요 이벤트는 select, update:selected-tree-index, open-counterpart, open-class, find-stack-trace, scroll-to-complete, search-profile-number입니다. 노드 선택 이벤트에는 undefined가 올 수 있으므로 선택 해제도 처리하세요.

ApmProfileTimelineDataChart

data와 callTree가 필수입니다. selectedProfileIndex, 이벤트 라벨, 디버그 표시, 연결 라벨을 선택적으로 전달할 수 있습니다. 노드 선택, 상대 트랜잭션 열기, 프로파일 이벤트 선택을 각각 select, open-counterpart, select-event 이벤트로 전달합니다.

데모 시나리오

/call-tree 데모는 realistic, normal, nested, connections, errors, stack, stack-error, details, empty, error 시나리오를 제공합니다. XView API 응답은 MSW와 합성 fixture로 모사하므로 제품 서버 데이터가 아닙니다. 실제 화면은 서버 응답을 컬럼·상세·연결 라벨과 함께 전달해야 합니다.