Skip to content

R
rip
Commit 440f6b16 authored by aiduck's avatar aiduck
Browse files
Options

合并

parent 20ceeb35
Hide whitespace changes
Inline Side-by-side
Showing with 94 additions and 76 deletions
src/lib/monitor.js
View file @ 440f6b16
import * as rrweb from "rrweb";
import TracksWorker from "./tracks.worker";
import utils from './utils';
export default class Monitor {
rrwebHandler = null;
tracksWorker = new TracksWorker();
constructor() {
this.tracksWorker.onmessage = ({ data: { type, payload } }) => {
switch (type) {
case "localData":
window.localStorage.setItem("rrevents", JSON.stringify(payload));
break;
default:
console.log("monitor unknow action");
constructor(props) {
console.log('初始化');
this.tracksWorker.postMessage({
type: "init",
payload: {
system: props.system,
config: props.config
}
};
});
}
resetRrwebHandler() {
this.rrwebHandler && this.rrwebHandler();
}
/**
* 初始化
* @param {*} event
* @memberof Monitor
*/
init(event) {
this.resetRrwebHandler();
console.log("初始化系统信息");
this.tracksWorker.postMessage({ type: "init", payload: event });
}
/**
* 录制
* @memberof Monitor
......
src/lib/reporter.js
View file @ 440f6b16
// 数据维护,上报
import utils from './utils';
import Counter from "./counter";
import { dataWrapper, log } from './utils';
class Reporter {
system = ''; //系统名
system = ''; // 系统名
config = {
env: 'prod',
log: false
}; // 系统配置
environmentUrl = ''; // 环境
userIdentifier = ''; //用户标示
path = ''; // 当前路径
isUploading = false; // 是否在上传cdn
......@@ -16,10 +22,24 @@ class Reporter {
setSystem(system) {
this.system = system;
}
// 设置配置内容
setConfig(config) {
this.config = config;
this.setEnvironment(config.env);
}
// 设置系统环境变量
setEnvironment(env) {
if (env === 'dev') {
this.environmentUrl = 'http://hunter.duibadev.com.cn';
} else if (env === 'prod') {
this.environmentUrl = 'http://hunter.dui88.com.cn';
}
}
// 设置用户标示
setUserIdentifier(userIdentifier) {
this.userIdentifier = userIdentifier;
}
// 设置当前访问路径
setPath(url) {
this.path = url
......@@ -27,12 +47,12 @@ class Reporter {
// 上传CDN
toCDN(payload) {
this.isUploading = true;
let blob = new Blob([JSON.stringify(payload)], {type : 'application/json'});
let formData = new FormData();
let trackId = this.counter.next();
const blob = new Blob([JSON.stringify(payload)], {type : 'application/json'});
const formData = new FormData();
const trackId = this.counter.count;
formData.append('file', blob, `${this.recordKey + trackId}.json`);
try {
fetch(`http://hunter.duibadev.com.cn/upload`, {
fetch(`${this.environmentUrl}/upload`, {
method: 'POST',
credentials: 'include',
body: formData
......@@ -40,17 +60,28 @@ class Reporter {
return res.json();
}).then(res => {
// 如果cache中有数据，说明是多次提交并且数据缓存在了cache中，那么我们全量快照可能在cache[0]
let index = this.bus.findIndex(v => v.track.type === 2 );
console.log(index);
let extra = {
const snapArr = this.cache && this.cache.length > 0 ? this.cache : this.bus;
const snapIndex = snapArr.findIndex((item, index) => {
if (item.track.type === 2) {
return index;
}
});
const extra = {
system: this.system,
userIdentifier: this.userIdentifier,
path: this.path,
recordKey: this.recordKey,
trackId: trackId,
isCdn: true
isCDN: true
}
log(this.config.log, 'type=2定位', snapIndex);
log(this.config.log, 'cnd Url', res.data.url);
// 向cache或者bus中注入
if(this.cache && this.cache.length > 0) {
this.cache[0].splice(snapIndex, 1, dataWrapper(extra, res.data.url));
} else {
this.bus.splice(snapIndex, 1, dataWrapper(extra, res.data.url));
}
this.bus.splice(index, 1, utils.dataWrapper(extra, res.url));
this.isUploading = false;
// 如果cache里面有数据需要上传的，那么先上传
if(this.cache && this.cache.length > 0) {
......@@ -62,47 +93,41 @@ class Reporter {
return res;
});
} catch (e) {
console.log('上传失败，原因：');
console.log(e.message);
log(this.config.log, '上传失败，原因：', e.message);
}
}
toBus(data) {
let extra = {
const extra = {
system: this.system,
userIdentifier: this.userIdentifier,
path: this.path,
recordKey: this.recordKey,
trackId: this.counter.next(),
isCdn: false
isCDN: false
}
this.bus.push(utils.dataWrapper(extra, data));
this.bus.push(dataWrapper(extra, data));
}
// 上传
report(data) {
console.log('上传数据', data);
let reportData = data;
log(this.config.log, '上传数据', data);
const reportData = data;
this.bus = [];
if (this.isUploading) {
console.log('cdn数据正在上传，先将内容存到cache');
log(this.config.log, 'cdn数据正在上传，先将内容存到cache', this.cache);
this.cache.push(reportData);
return;
}
try {
fetch(`http://hunter.duibadev.com.cn/behavior/record`, {
fetch(`${this.environmentUrl}/behavior/record`, {
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
body: JSON.stringify({
tracks: data
})
'Content-Type': 'application/json;charset=utf-8',
body: JSON.stringify({tracks: data})
}).then(res => {
console.log(res);
log(this.config.log, '上传返回的内容', res);
});
} catch (e) {
console.log('上传失败，原因：');
console.log(e.message);
log(this.config.log, '上传失败，原因：', e.message);
}
}
// 重置数据（分条使用）
......
src/lib/tracks.worker.js
View file @ 440f6b16
// 入口，格式化数据，模块管理
import md5 from "md5";
import Reporter from "./reporter";
import { log } from './utils';
const reporter = new Reporter("recordKey");
onmessage = ({ data: { type, payload } }) => {
switch (type) {
case "init":
reporter.setSystem(payload);
reporter.setSystem(payload.system);
reporter.setConfig(payload.config);
log(reporter.config.log, 'init参数', payload);
break;
case "record":
// todo : 数据本地存储
reporter.toBus(payload);
console.log(reporter.bus);
log(reporter.config.log, 'bus', reporter.bus);
// todo : 全量快照上传cdn
log(reporter.config.log, 'track type', payload.type);
if (payload.type === 2) {
reporter.toCDN(payload);
}
......@@ -36,9 +40,9 @@ onmessage = ({ data: { type, payload } }) => {
reporter.setPath(url);
let recordKey = md5(url + email + Date.parse(new Date()));
reporter.reset(recordKey);
console.log(url, "分片id", reporter.recordKey);
log(reporter.config.log, '分片id', reporter.recordKey);
break;
default:
console.log("unknow action");
log(reporter.config.log, 'unknow action', type);
}
};
src/lib/utils.js
View file @ 440f6b16
const utils = {
// 包装event
dataWrapper(extraData, event) {
return {
...extraData,
track: event
}
},
// 判断是否有值
isNothing(value) {
return value === '' || value === undefined || value === null || (typeof value === 'number' && (isNaN(value) || !isFinite(value)));
},
// 拼接URL请求参数
serialize(obj) {
const str = [];
for (let p in obj) {
if (obj.hasOwnProperty(p)) {
str.push(p + '=' + this.isNothing(obj[p]) ? '' : obj[p]);
}
}
return str.join('&');
},
}
/**
* 包装event
* @param {*} extraData
* @param {*} event
*/
export const dataWrapper = (extraData, event) => {
return {
...extraData,
track: event
}
};
export default utils;
\ No newline at end of file
/**
* 是否打印日志
* @param {*} logMes
*/
export const log = (log, logMes, logContent) => {
if( log) {
return console.log(logMes, logContent);
} else {
return;
}
};
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment