브라우저 모니터링 소개

최종 사용자 경험은 전체 기술 스택에 따라 달라집니다. 고객 불만 또는 문제의 원인을 빠르게 이해해야 합니다.

• 문제가 인프라, 애플리케이션 또는 궁극적으로 문제를 렌더링하는 브라우저에서 발생했습니까?
• 문제가 있는 인터넷 제공업체의 결과입니까, CPU 또는 메모리 오류가 있는 자체 데이터 센터의 문제입니까, 아니면 다른 문제입니까?
• 웹사이트에서 고객 경험에 중점을 둘 위치의 우선 순위를 정할 수 있도록 핵심 CWV(Web Vital) 점수 를 어떻게 모니터링하고 개선할 수 있습니까?

New Relic의 브라우저 모니터링을 통해 최종 사용자의 앱 경험에 대한 실행 가능한 데이터를 보고, 쿼리하고, 시각화하고, 경고를 설정할 수 있습니다.그리고 이미 APM으로 앱을 모니터링하고 있다면 APM 에이전트를 사용하여 브라우저 모니터링을 추가할 수 있습니다.

핵심 웹 바이탈

RUM(실제 사용자 모니터링)은 실제 페이지 성능에 대한 통찰력을 제공하지만 사이트 성능에 대한 사용자의 인식도 조사해야 합니다.페이지는 다양한 방식으로 콘텐츠를 로드할 수 있으며 사용자는 해당 콘텐츠와 상호 작용하는 시기를 제어합니다.

브라우저 모니터링 요약 페이지 는 다음에 대한 중요한 핵심 웹 핵심 점수를 보여줍니다.

• 가장 큰 콘텐츠가 포함된 페인트(LCP): 페이지 콘텐츠가 로드되는 속도
• FID(First Input Delay): 브라우저가 사용자 입력에 얼마나 빨리 응답할 수 있는지
• CLS(누적 레이아웃 이동): 로드되는 콘텐츠가 얼마나 불안정한지

다른 이벤트에 종속되지 않는 보다 실시간 전달 메커니즘을 위해 PageViewTiming 이벤트 를 사용할 수도 있습니다.

실제 사용자 모니터링(RUM) 이상

New Relic의 브라우저 모니터링은 최종 사용자가 다양한 웹 브라우저, 장치, 운영 체제 및 네트워크에서 사이트를 탐색할 때 속도와 성능을 측정하는 실제 사용자 모니터링(RUM) 솔루션을 제공합니다.

그러나 브라우저 모니터링은 초기 페이지 로드를 훨씬 능가합니다.

전체 페이지 수명 주기 데이터 측정

브라우저 모니터링 UI에서 전체 페이지 수명 주기 데이터 를 측정하여 다음을 얻습니다.

• 페이지뷰 인기도 및 사용자 만족도 점수별 상세 실적 데이터(Apdex)
• 비동기 또는 동적 시각적 개체와 대화형 페이지 콘텐츠가 표시되는 속도를 측정하는 인지된 성능 데이터
• JavaScript 오류 분석 , 소스 맵, 스택 추적 및 코드 줄 가시성, 오류 자체로 이어지는 최종 사용자 단계를 보여줍니다.
• 웹 페이지의 전체 수명 주기 동안 로드 및 상호 작용 이벤트의 상세한 타임라인 및 히트 맵을 통한 세션 성능
• 웹 페이지의 타이밍, 끝점 및 특정 위치 문제를 나타내는 AJAX 요청
• 단일 페이지 애플리케이션(SPA) 아키텍처를 사용하는 앱에 대한 브라우저 상호 작용 중 해시 기반 경로 변경, 초기 페이지 로드 및 활동

API 를 통해 브라우저 및 SPA 모니터링을 사용자 정의하고 확장할 수도 있습니다.

프론트엔드와 백엔드 문제의 상관관계

측정항목, 이벤트, 로그, 추적 등 필요한 모든 유형의 데이터를 계측하여 다음을 수행할 수 있습니다.

• 특정 지리적 위치 또는 특정 유형의 최종 사용자 활동에 중점을 둡니다.
• 특정 도메인 을 모니터링하거나 차단합니다.
• 비교 차트 를 사용하여 실제 사용자 브라우저 상호 작용 및 종합 모니터링 추세를 비교합니다.
• 분산 추적 을 사용하여 브라우저 활동에서 네트워크에서 보낸 시간, 백엔드 활동에 이르기까지 전체 트랜잭션에서 대기 시간을 분리합니다.
• 문제가 특정 유형의 브라우저 , 플랫폼(모바일, 데스크톱 등) 또는 브라우저 버전과 관련되어 있는지 확인합니다.

이러한 도구(및 그 이상!)는 팀에서 최종 사용자의 페이지 로드 경험을 최적화하고 버그를 제거하며 전체 스택에서 더 빠르게 문제를 해결하는 데 도움이 됩니다.

브라우저 모니터링 시작하기

이 기본 단계를 따르면 브라우저 모니터링을 통해 New Relic에서 빠르게 시작하고 실행할 수 있습니다!

1. 아직 가입하지 않았다면 New Relic 계정에 가입하세요 .
2. 브라우저 에이전트를 설치 합니다.
3. one.newrelic.com 으로 이동하여 브라우저 앱을 선택합니다.
4. 브라우저 모니터링 요약 페이지 에서 핵심 웹 필수 정보 및 기타 요약 데이터를 확인한 다음 페이지 로드 타이밍 세부 정보 및 기타 UI 데이터로 드릴다운합니다.