현지화된 읽기 가이드
applicationinsights-web-ts목적, 사용법 및 출처
기구browser/webApplication Insights JavaScript SDK를 사용하는 앱(@microsoft/applicationinsights-web). 실시간 사용자 모니터링(RUM)에 사용 - 페이지 조회수, 클릭수,AJAX/fetch종속성, 예외, 사용자 지정 이벤트 및 브라우저 측 GenAI 에이전트 추적과 백엔드 OpenTelemetry 추적 간의 상관 관계를 다룹니다. SDK 로더 스크립트 및 npm 설정, 프레임워크 확장(React, React Native, Angular), Click Analytics, 원격 측정 초기화 프로그램 및 OTel GenAI 의미 규칙에 대한 내용을 포함합니다.agent/tool/model브라우저에서 생성된 스팬.
출처 검색됨:
- 소스 저장소
- microsoft/skills
- SKILL.md
.github/plugins/azure-sdk-typescript/skills/applicationinsights-web-ts/SKILL.md- 저장소 Star
- 3,157
- 저장소 최근 업데이트
- 2026-10-31
- 능력 분류
- 클라우드 서비스
- 최근 수집 시간
라이선스: MIT
워크플로 발췌본은 이해를 돕기 위한 자료이며, Codez에서 제공하는 실행 가능한 명령어가 아닙니다. 이 페이지를 생성하는 데 타사 Skill은 사용되지 않았습니다.
아래의 목적 및 워크플로 관련 내용은 읽기 쉽도록 정리 및 번역된 상위 자료입니다. 이는 별도로 분류된 Codez 편집 분석과는 별개입니다.
이 스킬의 기능
기구browser/webApplication Insights JavaScript SDK를 사용하는 앱(@microsoft/applicationinsights-web). 실시간 사용자 모니터링(RUM)에 사용 - 페이지 조회수, 클릭수,AJAX/fetch종속성, 예외, 사용자 지정 이벤트 및 브라우저 측 GenAI 에이전트 추적과 백엔드 OpenTelemetry 추적 간의 상관 관계를 다룹니다. SDK 로더 스크립트 및 npm 설정, 프레임워크 확장(React, React Native, Angular), Click Analytics, 원격 측정 초기화 프로그램 및 OTel GenAI 의미 규칙에 대한 내용을 포함합니다.agent/tool/model브라우저에서 생성된 스팬.
업스트림 워크플로우 작동 방식
빠른 시작(npm)
부르다loadAppInsights()정확히 한 번, 가능한 한 빨리(추적하려는 사용자 상호 작용 이전에) 기록합니다.trackPageView()초기 부하의 경우 —enableAutoRouteTracking이 옵션이 켜져 있으면 이후 경로 변경은 자동으로 이루어집니다.
빠른 시작 (SDK 로더 스크립트)
SDK 자동 업데이트 및 빌드 파이프라인이 필요 없는 경우에 권장합니다. 이 내용을 첫 번째 로 붙여넣으세요. in : Loader-only API (queued until SDK loads): trackEvent, trackPageView, trackException, 트랙트레이스, 트랙의존성데이터, 트랙메트릭, 페이지뷰 성능 추적, startTrackPage, stopTrackPage, startTrackEvent, stopTrackEvent, 텔레메트리 초기화 추가, 인증된 사용자 컨텍스트를 설정하세요, 인증된 사용자 컨텍스트를 지우세요, 물 내림.
Application Insights JavaScript SDK(웹) (TypeScript용)
브라우저 앱용 실시간 사용자 모니터링(RUM)@microsoft/applicationinsights-web페이지 조회수를 자동으로 수집합니다.AJAX/fetch종속성, 처리되지 않은 예외 및 (Click Analytics 플러그인을 사용하는 경우) 클릭을 지원합니다. OpenTelemetry GenAI 의미 규칙을 따르고 W를 통해 백엔드 스팬과 연관되는 사용자 지정 이벤트, 메트릭 및 GenAI 에이전트 추적을 지원합니다.3C 추적 컨텍스트. > ~와 구별됨azure-monitor-opentelemetry-ts이는 ~을 위한 것입니다.Node.js서버 앱용입니다. 이 스킬은 다음과 같은 용도입니다.browser/web코드(및 React Native).
요구 사항 및 설정
npm i --save @microsoft/applicationinsights-web
# Optional plugins (install only what you use):
npm i --save @microsoft/applicationinsights-clickanalytics-js
npm i --save @microsoft/applicationinsights-react-js @microsoft/applicationinsights-react-native @microsoft/applicationinsights-angularplugin-js제한 사항 및 품질 검사
흔히 저지르는 실수
두 번 초기화하지 마십시오. 다른 번들에서 모듈을 다시 가져오면 페이지 뷰가 중복됩니다. 단일 공유 모듈 내보내기를 사용하십시오. 초기 데이터 손실을 방지하기 위해 첫 사용자 입력 전에 초기화하십시오.clicks/exceptions.
상류 통로 · L412 ↗안전한 시험 사용부터 시작하세요
- 지원되는 호스트와 저장소 설치 지침을 확인하세요. 스킬 디렉토리와 해당 디렉토리에서 참조하는 스크립트, 자산 및 문서를 함께 보관하세요.SKILL.md단독으로는 종속성을 생략할 수 있습니다.
- 에이전트에 실제 입력값, 원하는 출력값 및 승인 기준을 제공하십시오. 호출 구문 및 사용 가능한 도구는 호스트에 따라 다르므로 이 사이트는 범용 설치 명령을 제공하지 않습니다.
- 원본 워크플로를 임시 프로젝트 또는 복사본에서 테스트해 보세요. 파일, 원격 서비스 또는 유료 리소스를 변경하는 작업은 허용하기 전에 검토하십시오.
- 출력 결과를 원본 품질 검사 및 자체 요구 사항에 맞춰 검증하십시오. 트리거가 성공적으로 작동했거나 저장소의 별점 수가 높다고 해서 반드시 올바른 결과가 나오는 것은 아닙니다.
원문에서 더 자세한 내용을 읽어보세요.
- Application Insights JavaScript SDK(웹) (TypeScript용)
- 구현 전
- 설치
- 연결 문자열
- 빠른 시작(npm)
- 빠른 시작 (SDK 로더 스크립트)
- 원격 측정 초기화 도구(보강 및 필터링)
- 클릭 애널리틱스
- SPA 경로 추적
- 분산 추적(백엔드와의 연관성)
- GenAI 에이전트 추적(OTel 의미 규칙)
- 필수 속성 키(OTel 이름을 그대로 사용하십시오)
- 패턴: invoke_agent + 중첩tool/model범위
- 리액트(타입스크립트)
- 성능 — 웹 주요 지표
- 쿠키 및 개인정보 보호
- 견본 추출
- 오프라인 / 전송 후 하역
- 흔히 저지르는 실수
- 번들 크기
- 모범 사례
- 참고 자료
관련 기술
번역 및 범위
이 독서 안내서는 고정된 상류 지역에서 발췌한 구절들을 소개합니다.SKILL.md본 번역은 보조 번역이며, 완전한 설명서 또는 호환성 테스트를 보장하는 것은 아닙니다. 사용 전에 원본 및 참조 파일을 반드시 읽어 주십시오.
이 소개글은 아래 고정된 버전을 참조하며, 현재 저장소 활동 및 수집 시간은 별도로 표시됩니다.
- 고정된 소스
- 원문을 읽어보세요 ↗
- 출처 검색됨
- 소스 커밋
00d66a64919edca5bca2c673373444e36a4b5461- 출처 SHA-256
05ec3512a9d20bbc1e63aebc1e721ecfc26be2c0332e3e9affb6e6975e3f657d