프론트 엔드 로깅 및 모니터링이란 무엇입니까?

프론트 엔드는 운영 환경이 복잡하고 변하기 쉽기 때문에 로그와 모니터링이 필요하며 문제를 재현하기가 어렵습니다. 로그는 문제를 신속하게 찾아 경험을 최적화 할 수 있습니다. 1. 일반적인 로그 유형에는 오류 로그 (JS 오류 보고서, 리소스로드 실패), 동작 로그 (사용자 작동 경로), 성능 로그 (로드 시간, FP, FCP) 및 사용자 정의 로그 (비즈니스 포인트)가 포함됩니다. 2. 프론트 엔드 모니터링을 구현하는 단계에는 예외 포착, 성능 데이터 수집,보고 로그, 중앙 집중식 관리 및 디스플레이가 포함되며 사용자 프로세스를 추적하기위한 고유 식별자를 가져 오는 것이 좋습니다. 3. 실제로 사용하면 과도한 수집, 개인 정보 보호 보호, 잘못된 응집 및 Sourcemap을 결합하여 정보를 구문 분석하여 문제를 정확하게 찾을 수 있도록주의를 기울여야합니다.

프론트 엔드 로그 및 모니터링은 단순히 웹 페이지 나 응용 프로그램을 사용할 때 사용자의 행동 데이터를 녹화하고 실시간으로 프론트 엔드 실행 상태를 실시간으로 관찰하여 개발자가 문제를 신속하게 발견하고 경험을 최적화 할 수 있도록 도와줍니다. 백엔드와 같은 서버에 집중되지는 않지만 끊임없이 변화하는 클라이언트 환경에 직면하고 더 세심한 전략이 필요합니다.

프론트 엔드에 로그와 모니터링이 필요한 이유는 무엇입니까?

프론트 엔드는 사용자의 브라우저에서 실행되며 환경은 복잡하고 변경 가능합니다. 다른 장치, 네트워크 조건, 브라우저 버전 및 사용자 운영 습관조차 문제를 일으킬 수 있습니다. 많은 오류는 특정 시나리오에서만 발생하며 재현하기가 어렵습니다. 현재 로그 수집 및 모니터링 시스템을 통해 "문제가 발생한 이유", "문제가 발생한 사람"및 가능한 빨리 "언제 발생했는지"알 수 있습니다.

예를 들어, 페이지의 흰색 화면과 같은 일반적인 문제, 버튼 클릭에 대한 응답 없음 및 인터페이스 요청 실패. 모니터링하지 않으면 비효율적이고 놓치기 쉬운 사용자 피드백에만 의존 할 수 있습니다. 프론트 엔드 모니터링을 사용하면 이러한 문제를 백그라운드에서 자동으로 기록하고 경고하여 검사 효율을 크게 향상시킬 수 있습니다.

일반적인 로그 유형은 무엇입니까?

1. 오류 로그
   JavaScript 오류 (예 : 꺼짐 예외), 리소스로드 실패 (404, 타임 아웃), 약속 예외 등을 포함 하여이 정보는 코드가 사용자 측에서 정상적으로 실행되는지 여부를 알 수 있습니다.

2. 사용자 행동 로그
   클릭 한 버튼, 방문한 페이지 및 체류 시간 등과 같은 사용자의 작동 경로를 기록하십시오. 이는 제품 분석 및 사용자 경험 최적화에 도움이됩니다.

3. 성능 로그
   예를 들어 첫 번째 화면 로딩 시간, 자원 로딩 시간, FP (첫 번째 페인트), FCP (첫 번째 콘텐츠 페인트) 및 기타 표시기입니다. 페이지 말더듬의 이유를 발견하는 데 도움이됩니다.

4. 사용자 정의 로그
   개발자는 사용자가 특정 프로세스를 완료했는지 여부 등 특정 기능을 몇 번이나 호출 한 것과 같은 비즈니스 요구에 따라 포인트를 적극적으로 묻습니다.

프론트 엔드 모니터링을 구현하는 방법은 무엇입니까?

프론트 엔드 모니터링 구현은 일반적으로 다음 단계가 포함됩니다.

• 예외
  를 잡습니다 window.onerror console.error window.onunhandledrejection

• 성능 데이터 획득
  performance.timing 또는 PerformanceObserver 사용하여 페이지로드의 각 단계에 대한 시간을 얻으십시오.

• 보고서 로그
  일반적으로 로그는 fetch 또는 Beacon API 통해 서버로 전송되며 페이지 성능에 영향을 미치지 않도록주의하십시오.

• 중앙 집중식 관리 및 디스플레이
  Sentry, Datadog, New Relic 또는 자신의 로깅 플랫폼 (ELK, Prometheus Grafana 등)과 같은 타사 도구에 액세스 할 수 있습니다.

작은 세부 사항은 로그를보고 할 때 고유 식별자 (예 : 세션 ID 또는 추적 ID)를 가져 오는 것이 가장 좋습니다. 따라서 사용자는 페이지를 입력하여 오류로 전체 프로세스를 추적 할 수 있습니다.

실제 용도로 무엇에주의를 기울여야합니까?

1. 
   를 과도하게 수집하지 마십시오 너무 자세한 로그는 대역폭을 차지하며 개인 정보 문제를 일으킬 수도 있습니다. 사용자 로그의 10% 만 수집하는 등 샘플링 속도를 설정하는 것이 좋습니다.

2. 개인 정보 보호 규정 준수
   암호, 휴대폰 번호, 주소 등과 같은 민감한 정보를 기록하지 마십시오. 해외 사용자에게는 GDPR, CCPA 및 기타 규정을 준수해야합니다.

3. 오류 중복 제거 및 응집
   동일한 오류가 반복적으로보고 될 수 있으며 화면 범람을 피하기 위해 서버 측에서 집계를 수행해야합니다.

4. Sourcemap과 결합하여 스택
   를 구문 분석합니다 프론트 엔드 코드가 압축되면 오류 메시지의 줄 번호와 함수 이름이 정확하지 않을 수 있습니다. 소스 맵 파일을 사용하면 오류를 원래 코드 위치로 복원하여 쉽게 배치 할 수 있습니다.

기본적으로 그게 다야. 프론트 엔드 로깅 및 모니터링은 복잡해 보이지 않지만 실제 프로젝트의 세부 사항을 쉽게 무시할 수 있으므로 정보가 충분하지 않거나 과도한 중복성이 있습니다. 컬렉션 전략을 합리적으로 설계함으로써 만 가치를 발휘할 수 있습니다.

위 내용은 프론트 엔드 로깅 및 모니터링이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!