요구사항: 개발 제품이 버그가 없다는 보장은 없으며, 테스트 단계에서 문제가 없더라도 운영 환경에 배포되었고, 사용자에게 예상치 못한 상황이 발생할 수 있으며, 프론트엔드 페이지도 마찬가지입니다. 센트리와 버그스내그 모두 매우 좋은 모니터링 제품입니다.
복습
이상 현상 정보를 모니터링한 후, 백엔드 API에 데이터를 어떻게 제출하나요? Navigator.sendBeacon은 특히 로그, 사용자 행동 분석 등 페이지가 언로드될 직전의 소량 데이터를 서버에 전송하는 API입니다.
전통적인 XHR로 데이터를 전송한다면, 프론트엔드의 추적 인터페이스에서 특별한 논리 처리가 필요합니다. navigator.sendBeacon() 메서드메시지를 브라우저 큐에 넣어서 전송이 실패하더라도 프론트엔드에서 오류 메시지가 포착되지 않도록 하세요。
Navigator.sendBeacon 도입
navigator.sendBeacon() 메서드는 소량의 데이터를 담은 HTTP POST 요청을 비동기적으로 웹 서버에 전송합니다. 매개변수: URL, 데이터 (ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData, URL SeearchParams 타입의 데이터)
문서조사:
하이퍼링크 로그인이 보입니다.
하이퍼링크 로그인이 보입니다.
사용 시나리오
페이지 삭제 시 기록: 사용자가 페이지를 떠날 때 페이지 잔류 시간, 클릭 행동, PV, UV 등과 같은 행동 데이터를 기록합니다.
분석 및 모니터링: 사용자 행동 데이터를 분석 서버로 전송하여 웹사이트 성능 모니터링과 사용자 행동 분석에 활용합니다.
상태 보고: 애플리케이션의 상태 또는 오류 정보를 서버에 보고합니다.
테스트
코드는 다음과 같습니다:
Navigator.sendBeacon과 XHR 및 fetch의 유사점과 차이점은 무엇인가요?
유사성
네트워크 요청 전송: 세 가지 방법 모두 클라이언트에서 서버로 데이터를 전송하는 데 사용됩니다.
여러 데이터 형식 지원: 문자열, JSON, 바이너리 데이터 등 다양한 형식으로 데이터를 전송할 수 있습니다.
차이
Navigator.sendBeacon
이 도구는 페이지가 삭제될 때 소량의 데이터를 전송하는 데 사용되며, 기록, 데이터 분석 등에 적합합니다.
데이터 전송은 비동기적이지만, 호출자에게 어떤 정보도 반환하지 않으며 서버의 응답을 처리할 수 없습니다.
브라우저가 닫히거나 페이지가 이동해도 페이지를 삭제했을 때 데이터 전달을 보장하도록 설계되었습니다.
항상 HTTPPOST 요청을 사용하세요.
답변을 처리할 필요가 없고, 사용하기 간단합니다.
XMLHttp요청
처리 응답이 필요한 더 복잡한 AJAX 요청의 경우,
동기식 또는 비동기식 요청이 가능합니다.
서버의 응답을 처리하고 추가 처리(예: JSON 파싱, 상태 코드 처리 등)를 할 수 있습니다.
요청의 여러 단계를 모니터링하기 위해 온로드, 온에러, 온프로그레스 등과 같은 풍부한 이벤트를 제공합니다.
일부 구형 브라우저를 포함한 모든 주요 브라우저에서 널리 지원됩니다.
사용이 더 복잡하며 요청의 여러 단계와 상태를 처리해야 합니다.
가져오다
XMLHttpRequest를 대체하는 현대적인 요청 인터페이스로, 더 간단하고 유연한 요청 및 응답 처리를 지원합니다.
항상 비동기식 요청을 하여 Promise 객체를 반환하세요.
연쇄 처리 응답을 지원하여 JSON 해석, 상태 코드 처리 등을 쉽게 할 수 있습니다.
최신 자바스크립트 개발 습관에 더 부합하는 비동기/대기 구문을 지원합니다.
도메인 간 요청과 CORS(도메인 간 자원 공유)에 대한 더 나은 지원.
요청에 더 많은 옵션(예: 커스텀 헤더, 요청 메서드 등)을 추가할 수 있습니다.
요약
Navigator.sendBeacon은 특히 페이지가 삭제되었을 때 소량의 데이터를 전송할 때 신뢰성을 위해 설계된 API입니다.
단순함, 차단 방지, 신뢰성이라는 장점이 있어 특히 로깅이나 사용자 행동 분석과 같은 시나리오에 적합합니다.
비동기 요청이 이루어지며, 이는 POST 요청입니다.
브라우저 작업 대기열에 배치되었는지만 확인할 수 있으며, 성공적으로 전송되었는지는 알 수 없습니다.
수익 가치에 신경 쓸 필요가 없습니다.
브라우저 호환성 문제는 반드시 확인해야 합니다. |
2025-3-5 09:46:14에 게시됨
|
|
|
|
