프론트엔드 개발 시즈라이온 즐겁게 코딩하고 있으며, 비즈니스와 UI의 별도 개발, 다양한 디자인 패턴, 알고리즘 최적화, 완벽함을 매우 자랑스럽게 생각합니다. 코드작성(노동법세계최초), BUG가 없고, 프로그램이 완벽하고, 호환성 1위, 코드 입력 및 저항이 가능하고, 품질이 높습니다. 퇴근 후 쉽게 출근하여 집에 가서 아기를 돌볼 수 있습니다.
실제로는
사실 개발 환경과 프로덕션 환경이 같지 않고, 아무리 테스트 과정이 완벽해도 테스트를 놓치는 경우가 있기 마련입니다. 사용자의 클라이언트 환경, 네트워크 환경 등 일련의 불확실한 요소의 존재를 고려합니다. 그래서 개발 과정에서 세 가지 주요 원칙을 꼭 기억해야 합니다. (
말도 안 되는 소리만 하고 있어요
)
완벽한 코드는 없고, 발견되지 않은 버그만 있을 뿐입니다
테스트 환경을 절대 믿지 마세요
, 있습니다. 어떤 종류의 테스트 환경도 없습니다. 모든 온라인 상황이 커버됩니다온라인에서 피드백이 없다면 의심하지 마세요. 문제는 아주 깊게 숨겨져 있어야 합니다
매장 포인트 시스템이 무엇인가요?
매장 포인트는 카메라와 같습니다. 도시에서 제품 관점에서 제품에 대한 사용자의 행동 궤적을 모니터링하여 제품 반복 및 프로젝트 안정성의 기반을 제공할 수 있다고 생각하세요.
데이터 수집의 기본 차원은 누구, 언제, 어디서, 어떻게, 무엇입니까
. 프런트 엔드 개발을 위해 페이지 리소스 로딩 성능, 예외 등을 모니터링하고, 페이지 경험 및 상태 지수를 제공하고, 후속 성능 최적화를 위한 기반을 제공하고, 예외 및 발생 시나리오를 적시에 보고할 수 있습니다. 이를 통해 적시에 문제를 수정하고 프로젝트 품질을 향상시킬 수 있습니다.
매장 포인트는 크게 3가지로 나눌 수 있습니다.
추적 없는 매매 포인트
- 페이지 진입 및 퇴장, 이벤트 클릭 등 페이지의 모든 정보가 무차별적으로 수집됩니다. 유용한 정보를 얻으려면 데이터 플러시가 필요합니다
시각적 매립 포인트
- 생성된 페이지 구조를 바탕으로 특정 포인트를 획득하고, 별도로 포인트를 매립하여 분석합니다.
비즈니스 코드에 대한 수동 매립 포인트
- 특정하고 복잡한 업종에 따라 커버할 수 없는 부분을 제거합니다.
코드 매장지
Visual 매장지점
보이지 않는 매장지점
일반적인 시나리오
보이지 않는 매장지점은 커버할 수 없습니다. 그 비즈니스 데이터가 필요한
간단하고 표준화된 페이지 시나리오
간단하고 표준화된 페이지 시나리오,
장점
비즈니스 데이터 명확성
낮은 개발 비용, 운영자가 관련 매장 지점을 직접 구성 가능
구성이 필요 없으며 데이터가 추적할 수 있음
불충분
데이터 추적 불가, 높은 개발 비용
비즈니스 데이터 연결 불가, 데이터 추적 불가
데이터 양이 많아 비즈니스 데이터 연결 불가
대부분의 경우 추적 없는 매설점을 통해 모든 정보 데이터를 수집한 후 시각적 매설점과 협력하여 특정 지점을 구체적으로 찾아내면 대부분의 매설점 정보가 이에 따라 분석될 수 있습니다.
특별한 상황에서는 비즈니스 코드를 더 추가하여 포인트를 수동으로 묻어 특별한 시나리오를 처리할 수 있습니다(대부분의 경우 강력한 비즈니스 및 정상적인 클릭 및 새로 고침 이벤트는 보고해야 하는 정보와 관련이 없습니다)
Bury SDK 개발
Bury Point 데이터 수집 및 분석
이벤트 기본 데이터
이벤트 시간
발생 시 페이지 정보 스냅샷
Page
Page PV, UV
사용자 페이지 길이 stay
페이지 점프 이벤트
페이지가 배경으로 들어갑니다
사용자가 페이지를 떠납니다
사용자 정보
사용자 uid
사용자 기기 지문
기기 정보
ip
포지셔닝
사용자 작업 동작
사용자 클릭
대상 클릭
페이지 AJAX 요청
요청 성공
요청 실패
요청 시간 초과
페이지 오류 보고
리소스 로드 오류 보고
JS 실행 오류 보고
새로운 리소스 로딩 성능
Pictures
Script
페이지 로딩 성능
위 데이터는 3차원
·LEVEL을 통해 숨겨진 이벤트를 정의합니다. 묻힌 데이터LEVEL: 描述埋点数据的日志级别
INFO:一些用户操作,请求成功,资源加载等等正常的数据记录
ERROR: JS报错,接口报错等等错误类型的数据记录
DEBUG: 预留开发人员通过手动调用的方式回传排除bug的数据记录
WARN: 预留开发人员通过手动调用的方式回传非正常用户行为的的数据记录
CATEGORY:描述埋点数据的分类
TRACK: 埋点SDK对象的生命周期管理整个埋点数据。
WILL_MOUNT:sdk对象即将初始化加载,生成一个默认ID,跟踪全部相关事件
DID_MOUNTED:sdk对象初始化完成,主要获取设备指纹等等的异步操作完成
AJAX: AJAX相关数据
ERROR:页面中的异常相关数据
PERFORMANCE: 关于性能相关数据
OPERATION: 用户操作相关数据
EVENT_NAME:具体的事件名称
根据上述的维度,我们可以简单设计如下的架构
根据上图的架构,再进行下面的具体代码开发
代理请求
在浏览器中现在主要有 2 种请求方式,一个是 XMLHttpRequest, 一个是 Fetch。
代理 XMLHttpRequest
function NewXHR() { var realXHR: any = new OldXHR(); // 代理模式里面有提到过
realXHR.id = guid() const oldSend = realXHR.send;
realXHR.send = function (body) {
oldSend.call(this, body) //记录埋点
}
realXHR.addEventListener('load', function () { //记录埋点
}, false);
realXHR.addEventListener('abort', function () { //记录埋点
}, false);
realXHR.addEventListener('error', function () { //记录埋点
}, false);
realXHR.addEventListener('timeout', function () { //记录埋点
}, false); return realXHR;
}复制代码
js 在异步异常时无法通过 onerrorunhandledrejectionINFO: 일부 사용자 작업, 요청 성공, 리소스 로딩 등 일반 데이터 기록
🎜ERROR: JS 오류 보고, 인터페이스 오류 보고 등 데이터 오류 유형 기록🎜🎜DEBUG: 예약된 개발자는 수동 호출을 사용하여 버그를 제거하기 위해 데이터 레코드를 반환할 수 있습니다🎜🎜WARN: 개발자가 수동 호출을 사용하여 반환하도록 예약되어 있습니다. 비정상적인 사용자 행위에 대한 데이터 기록🎜🎜🎜🎜CATEGORY: 매장지 데이터의 분류를 설명합니다.🎜🎜TRACK: 매장지 SDK 객체의 라이프사이클이 전체 매장지 데이터를 관리합니다. 포인트 데이터. 🎜🎜WILL_MOUNT: SDK 객체가 초기화 및 로드되려고 하며 기본 ID가 생성되고 모든 관련 이벤트가 추적됩니다. 🎜🎜DID_MOUNTED: sdk 객체가 완료되었습니다. 주로 비동기적으로 기기 지문을 획득하는 등입니다. 작업 완료🎜🎜🎜🎜AJAX: AJAX 관련 데이터🎜🎜ERROR: 페이지의 예외 관련 데이터🎜🎜 PERFORMANCE: 성능 관련 데이터에 대한 정보 🎜🎜OPERATION: 사용자 작업 관련 데이터🎜🎜🎜🎜EVENT_NAME: 특정 이벤트 이름🎜🎜🎜🎜에 따르면 위의 차원을 사용하면 다음 아키텍처를 간단하게 설계할 수 있습니다🎜🎜
🎜위 그림의 구조에 따라 다음과 같은 구체적인 코드 개발을 진행합니다🎜
현재 브라우저에는 프록시 요청에 대한 두 가지 주요 요청 방법이 있습니다. 하나는 XMLHttpRequest이고 다른 하나는 Fetch입니다. 코드>. 🎜
페이지의 PV, UV를 모니터링합니다🎜🎜페이지에 들어갈 때 알고리즘을 통해 고유한 세션 ID를 이 매립 행위 Global ID로 생성합니다. , 사용자 ID, 장치 지문, 장치 정보를 보고합니다. 사용자가 로그인하지 않은 경우 UV는 기기 지문을 통해 계산되고 PV는 session id를 통해 계산됩니다. 🎜
예외 포착🎜🎜예외는 프로그램의 정상적인 흐름을 방해하는 비정상적인 사고입니다🎜
런타임 오류
🎜 JS에서는 window.onerror 및 window.addEventListener('error', callback)를 통해 런타임 예외를 캡처할 수 있습니다. >window가 사용됩니다. onerror는 호환성이 더 좋습니다. 🎜
🎜여기에서는 주로 스크립트 페이지에 로드된 타사 교차 도메인으로 인해 발생하는 스크립트 오류를 필터링했습니다. 타사 CDN에서 호스팅되는 js 스크립트와 같은 오류를 보고합니다. 이러한 유형의 문제는 해결하기가 더 어렵습니다. 해결 방법은 다음과 같습니다. 🎜🎜🎜다음과 같이 CORS(교차 원본 리소스 공유, 도메인 간 리소스 공유)를 엽니다. 🎜🎜38298927ef9339b85b5e14409c59dfa52cacc6d41bbb37262a98f745aa00fbf0🎜🎜Access-Control-Allow-Origin 수정: * | 도메인 이름 지정🎜🎜🎜🎜 try catch 사용 code >