自定义埋点上报扩展如何去做呢

平时做的像行为监控这一类, 除了要去满足自动采集,但是其实最重要的是,要去满足自定义采集扩展

总是会有自定义事件去除触发上报一些自定义的内容.

从架构设计的角度来讲

支持通过注册事件的机制，支持

Click

dbClick

inputChange

stateChange

contentMenu

架构层

首先需要一个事件监听机制自定义事件监听

注册

这个自定义事件监听注册,需要sdk 往外暴露: 本质是去注册事件并去执行即可

js 复制代码

public on(customDataEvent: string, messageHandler: any) {  
this.eventListeners[customDataEvent] = messageHandler;  
}

触发

业务层注册,并行为触发后,执行回调 sdk 层拿到后,回调接受自定义事件

js 复制代码

public triggerEvent(customDataEvent: string ) {  
let event = this.eventListeners[customDataEvent];  
if(event){  
return event();  
}  
return null;  
}

取消

事件注册要注意卸载要及时清除,避免内存泄漏

完整例子

js 复制代码

完整案例
import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Button, Input } from '@wind/wind-ui';

const InputGroup = Input.Group;

export default function SearchComponent() {
const [value, setValue] = useState("");
const valueRef = useRef(value);

// 更新 ref 以保持最新值
useEffect(() => {
valueRef.current = value;
}, [value]);

const onInputChange = (event) => {
setValue(event.target.value);
};

// 搜索按钮点击时的自定义数据回调
const onSearchSubmit = useCallback(() => {
return {
searchValue: valueRef.current,
searchLength: valueRef.current.length,
hasContent: !!valueRef.current.trim(),
searchType: 'keyword'
};
}, []);

// 输入框内容变化时的自定义数据回调
const onInputValueChange = useCallback(() => {
return {
currentValue: valueRef.current,
inputLength: valueRef.current.length,
isEmpty: !valueRef.current.trim()
};
}, []);

useEffect(() => {
// 注册搜索提交事件
window.monitorClient.msgBus.on("onSearchSubmit", onSearchSubmit);
// 注册输入变化事件
window.monitorClient.msgBus.on("onInputValueChange", onInputValueChange);

return () => {
window.monitorClient.msgBus.off("onSearchSubmit", onSearchSubmit);
window.monitorClient.msgBus.off("onInputValueChange", onInputValueChange);
};
}, [onSearchSubmit, onInputValueChange]);

return (

<div className="search-container">
<InputGroup compact data-uc-id="search-group" data-uc-ct="inputgroup">
<Input
style={{ width: '90%' }}
onChange={onInputChange}
value={value}
data-uc-custom-inputChange="onInputValueChange" // 此处仅为示例，实际场景在此使用自定义数据不合理
data-uc-id="eMwPj17YXz"
data-uc-ct="input"
placeholder="请输入搜索关键词"
/>
<Button
style={{ width: '10%' }}
data-uc-custom-click="onSearchSubmit"
data-uc-id="P1gx49Ao1i"
data-uc-ct="button"
>
搜索
</Button>
</InputGroup>
</div>
);
}s