@dimjs/tracker

tracker

作用在业务侧，定义面对同一个业务多个埋点上报通道的管理模块，业务侧直接对接当前埋点上报器

Usage

import { createTracker, createSensor, createRequest, EActionType } from '@tracker';
import { logger } from '@dimjs/logger';

type TUser = {
  name?: string;
  identity_uid?: string;
  identity_member_id?: string;
};

type TAdaptors = 'sensor' | 'request';
// TAdaptors 声明了后续tracker实例有哪些adaptor可以使用
const tracker = createTracker<TUser, TAdaptors>();

const sensor = createSensor({
  name: 'sensor',
  devToolLog: false,
  consoleLog: false,
  plugins: {
    PageLeave: {},
    PageLoad: {},
    SiteLinker: {
      options: {
        linker: ['ly.com', 'lydigital.cn', 'lydigi.com', 'lylend.com'].map((origin) => ({
          part_url: origin,
          after_hash: false,
        })),
      },
    },
    RegisterProperties: {
      hookRegister(event) {
        if (event === '$WebPageLeave') {
          return {
            page_name: '授信结果',
          };
        }
        return {};
      },
    },
  },
  userConfig: {
    mainKey: 'identity_member_id',
    fields: ['identity_uid'],
  },
  common: {
    type: 'common',
  },
  config: {
    serverUrl: 'https://test-sensor-api.tongcheng.com/sa?project=default',
    showLog: true,
  },
});
const request = createRequest({
  name: 'request',
  consoleLog: true,
  request: async (data) => {
    console.log('----request', data);
    // throw new Error("err1");
  },
  config: {
    transform: (data) => {
      return data;
    },
  },
});

tracker
  .addAdaptors({
    sensor,
    request,
  })
  .pipe((operator) => {
    operator.map((val) => {
      const { action, data } = val;
      if (action === EActionType.setCommon) {
        return {
          action,
          data,
        };
      }
      return {
        action,
        data,
      };
    });
  })
  .initAdaptor({
    showLog: true,
    logger,
    error: (err) => {
      console.warn('----request error', err);
    },
  })
  .setUser({
    name: 'lisi',
  })
  .setCommon({
    project_cn: '提💰游',
  });

console.log('----------- 👇 是上报的调用 ----------');

tracker.setUser({
  identity_member_id: 'memberId_1701846561742',
  identity_uid: 'uid_1701846561742',
});

tracker
  .select(['sensor', 'request'])
  .transform((data: object) => {
    return {
      ...data,
      type: 'sensor',
    };
  })
  .track('try1', {
    aa: 'this is aa',
  });

tracker
  .select(sensor)
  .transform((data: object) => {
    return {
      ...data,
      type: 'request',
    };
  })
  .track('try2', {
    bb: 'this is vvv',
  });

// tracker 可以使用全局提供的实例
import { tracker } from '@tracker';

const sensor = {}; // sensor 实例
const request = {}; // sensor 实例

tracker.addAdaptors({
  sensor,
  requestName: request,
});
// 在执行上报相关的动作前 先执行 setUser 和 setCommon -》 initAdaptor 这里是链式操作
// 必须执行了initAdaptor 才会有上报的能力
tracker.setUser({}).setCommon({}).initAdaptor();

// 选择对应的上报器
// select 参数可以是  ['requestName', ''sensor''] | ['requestName'] | ['sensor'] | 'requestName' | 'sensor'
// track 方法可以在 initAdaptor 之前掉用，还是会进行上报

tracker.select('sensor').track('try2', {
  bb: 'this is vvv',
});

// 注意： 这里参数是没有ts 提示的，因为 全局实例已经初始化了，所以这里不会有提示，如果想要提示，可以使用链式操作
// 如下
tracker
  .addAdaptors({
    sensor,
  })
  .initAdaptor()
  .select('sensor'); // <= 这里有提示

调试

使用vite或者webpack等构建器采用alias的能力，在业务项目中进行注入，如下：

resolve: {
  alias: {
    '@dimjs/tracker': path.resolve(__dirname, '../packages/tracker/src/index.ts'),
  },
}

测试

当构建成对应产物，当前项目在 cjs 中，可以通过 ln 或者 npm link 的方式进行链接，然后在业务项目中进行引入，

然后类似于 webpack 需要配置symlinks为false,在 flat 项目也需要配置，

resolve: {
  symlinks: false,
}