前端,react无痕埋点，唯一事件标识bid如何生成比较好？

Question

问题一、 react点击事件如何生成唯一事件标识，如何获取xpath？

问题二、 webpack+react如何在编译过程中，根据组件名+组件结构生成bid?

传统方式：webpack编译后生成的xpath

编译后，浏览器看到的xpath 标识：

/html/body/div[3]/div[2]/div/div[1]/div[3]/p[3]

*[@id="searchPage"]/div[1]/div/div/form/div[2]/button

能否在webapck编译过程中生成 xpath？效果如下

Layout>Search/Icon[1]

参考资料：
美团点评前端无痕埋点实践

Answer 1

无痕埋点的几个核心技术点：

一、获取事件的唯一标识符

使用库完成 ：https://github.com/Autarc/opt...
优点：根据最短路径生成，结合id,class等

二、可视化编辑，阻止页面的跳转

阻止页面跳转的方法

document.addEventListener('click', e => {

// 如果是按住shift的点击，那么保持原有的行为

if (e.shiftKey) {

   return;

}

// 如果是单纯的点击，那么拦截分发

e.preventDefault();

e.stopImmediatePropagation();

// 获取元素的唯一标识，然后让用户进行配置等等

this._selectElement(e.target);
}, true); // useCapture必须为true

页面引用(js sdk)

在head中引入
Mixpanel的实现方案

(function (e, a) {
    if (!a.__SV) {
        var b = window;
        try {
            var c, l, i, j = b.location,
                g = j.hash;
            c = function (a, b) {
                return (l = a.match(RegExp(b + "=([^&]*)"))) ? l[1] : null
            };
            g && c(g, "state") && (i = JSON.parse(decodeURIComponent(c(g, "state"))), "mpeditor" === i.action && (b.sessionStorage.setItem("_mpcehash", g), history.replaceState(i.desiredHash || "", e.title, j.pathname + j.search)))
        } catch (m) {}
        var k, h;
        window.mixpanel = a;
        a._i = [];
        a.init = function (b, c, f) {
            function e(b, a) {
                var c = a.split(".");
                2 == c.length && (b = b[c[0]], a = c[1]);
                b[a] = function () {
                    b.push([a].concat(Array.prototype.slice.call(arguments,
                        0)))
                }
            }
            var d = a;
            "undefined" !== typeof f ? d = a[f] = [] : f = "mixpanel";
            d.people = d.people || [];
            d.toString = function (b) {
                var a = "mixpanel";
                "mixpanel" !== f && (a += "." + f);
                b || (a += " (stub)");
                return a
            };
            d.people.toString = function () {
                return d.toString(1) + ".people (stub)"
            };
            k = "disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");
            for (h = 0; h < k.length; h++) e(d, k[h]);
            a._i.push([b, c, f])
        };
        a.__SV = 1.2;
        b = e.createElement("script");
        b.type = "text/javascript";
        b.async = !0;
        b.src = "undefined" !== typeof MIXPANEL_CUSTOM_LIB_URL ? MIXPANEL_CUSTOM_LIB_URL : "file:" === e.location.protocol && "//cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//) ? "https://cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js" : "//cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js";
        c = e.getElementsByTagName("script")[0];
        c.parentNode.insertBefore(b, c)
    }
})(document, window.mixpanel || []);
mixpanel.init("46042714e64a7536dde6f02af1aec923");