브라우저 모니터링 소개

엔드유저 경험은 전체 기술 스택에 따라 달라집니다. 고객 불만이나 문제의 원인을 빠르게 이해해야 합니다.

• 문제가 인프라나 애플리케이션에서 발생했는가 아니면 최종적으로 렌더링하는 브라우저에서 발생했는가?
• 문제가 있는 인터넷 공급자의 문제인가, 아니면 CPU나 메모리 오류가 있는 자체 데이터센터의 문제인가, 아니면 다른 문제인가?
• 어떻게 코어 웹 바이탈을 모니터링하고 개선하여 웹사이트에서 고객 경험의 어디에 중점을 둘 지 우선순위를 정할 수 있을까요?

뉴렐릭의 브라우저 모니터링을 통해 엔드유저의 앱 경험에 대한 실행 가능한 데이터를 확인하고, 쿼리하고, 시각화하고, 알림를 설정할 수 있습니다. 이미 APM으로 앱을 모니터링하고 있다면 APM 에이전트를 사용하여 브라우저 모니터링을 추가할 수 있습니다.

브라우저 앱 모니터링

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

코어 웹 바이탈 추적

Google의 코어 웹 바이탈은 사용자가 브라우저 앱을 경험하는 방식을 측정하는 세 가지 메트릭으로 구성되며, 뉴렐릭은 이러한 메트릭을 추적하는 데 도움을 줄 수 있습니다. 뉴렐릭에서는 두 곳에서 코어 웹 바이탈을 확인할 수 있습니다.

• Summary 페이지에는 전체 사이트에 대한 코어 웹 바이탈이 표시됩니다.
• Web vitals 페이지에는 페이지 URL, 장치 유형, 위치 등을 기준으로 핵심 웹 바이탈이 분석되어 표시됩니다.

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

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

그러나 브라우저 모니터링은 초기 페이지 로드 그 이상을 포괄합니다.

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

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

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

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

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

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

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

이러한 툴(및 그 이상)은 팀이 엔드유저의 페이지 로드 경험을 최적화하고 버그를 제거하며 전체 스택에서 더 빠르게 문제를 해결하는 데 도움을 줍니다.

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

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

1. 계정이 없다면, 먼저 뉴렐릭 계정을 신청합니다.
2. 브라우저 에이전트를 설치합니다.
3. one.newrelic.com으로 이동하여 브라우저 앱을 선택합니다.
4. 브라우저 모니터링 요약 페이지에서 코어 웹 바이탈과 기타 요약 데이터를 확인한 다음 페이지 로드 타이밍 세부 정보 및 기타 UI 데이터를 세부적으로 분석합니다.