@jolibox/implement 1.1.4-beta.9 → 1.1.4

package/src/common/report/base-tracker.ts

@@ -1,51 +1,18 @@
 import { context } from '@/common/context';
 import { logger } from '@jolibox/common';
-import { IDevice, IPage, IEventPackage, IEvent, EProject } from '@/common/report/types';
+import { IDevice, IPage, IEventPackage, IEvent, EProject, serializeEventPackage } from '@jolibox/common';
 
-const keysOfPage: (keyof IPage)[] = ['name', 'params'];
-const keysOfEvent: (keyof IEvent)[] = ['name', 'type', 'location', 'target', 'extra', 'timestamp', 'userId'];
-const keysOfDevice: (keyof IDevice)[] = [
-  'platform',
-  'os',
-  'appVersion',
-  'appId',
-  'model',
-  'brand',
-  'uuid',
-  'jsSdkVersion',
-  'extra'
-];
-function serializeObject<T>(obj: T, order: (keyof T)[]): any[] {
-  return order.map((key) => {
-    if (key === 'params' && obj[key]) {
-      const params = obj[key] as Record<string, any>;
-      return Object.keys(params).reduce((acc, k) => {
-        acc[k] = String(params[k]);
-        return acc;
-      }, {} as Record<string, any>);
-    }
-    return obj[key];
-  });
-}
-
-function serializeEvent(event: IEvent): any[] {
-  const location = event.location ? serializeObject(event.location, keysOfPage) : null;
-  const target = event.target ? serializeObject(event.target, keysOfPage) : null;
-
-  // 定义IEvent的序列化顺序
-  return serializeObject({ ...event, location, target }, keysOfEvent);
-}
-
-function serializeEventPackage(eventPackage: IEventPackage): any[] {
-  // 序列化事件数组
-  const events = eventPackage.events.map((event) => serializeEvent(event));
-
-  // 定义IDevice的序列化顺序
-  const device = serializeObject(eventPackage.device, keysOfDevice);
-
-  return [eventPackage.protocolVersion, events, device, eventPackage.project];
+interface ISamplesConfig {
+  samples: {
+    [sampleRate: number]: string[];
+  };
+  cluster: number;
 }
-
+/**
+ * Base class for event tracker, all the event tracker should inherit from this class
+ * Send event to oss reporter
+ * @abstract
+ */
 export abstract class EventTracker {
   deviceInfo: IDevice | null = null;
 
@@ -54,6 +21,7 @@ export abstract class EventTracker {
   abstract doReport<T extends Record<string, unknown>>(event: unknown[], extra?: T): void;
 
   private pastTrackings: boolean[] = [];
+  private samplesConfig: ISamplesConfig | null = null;
 
   private pushPastTracking = (tracking: boolean) => {
     this.pastTrackings.push(tracking);
@@ -62,6 +30,10 @@ export abstract class EventTracker {
     }
   };
 
+  constructor() {
+    this.fetchSamplesConfig();
+  }
+
   public get networkIsOk() {
     // in the past 10 trackings, at least 60% of them are successful
     return (
@@ -70,6 +42,26 @@ export abstract class EventTracker {
     );
   }
 
+  private async fetchSamplesConfig() {
+    const host = context.testMode ? 'https://stg-api.jolibox.com' : 'https://api.jolibox.com';
+    const path = `${host}/api/fe-configs/js-sdk/samples-config`;
+    const samplesConfig = (await (await fetch(path)).json()) as ISamplesConfig;
+    this.samplesConfig = samplesConfig;
+  }
+
+  private checkIsSampled(event: IEvent) {
+    if (!this.samplesConfig) {
+      return false;
+    }
+    const { samples } = this.samplesConfig;
+    for (const [sampleRate, events] of Object.entries(samples)) {
+      if (events.includes(event.name)) {
+        return Math.floor(Math.random() * 101) < parseFloat(sampleRate);
+      }
+    }
+    return false;
+  }
+
   getDevice(): IDevice {
     const { nativeSDKVersion, jssdkVersion } = context.sdkInfo;
     return {
@@ -98,6 +90,10 @@ export abstract class EventTracker {
   }
 
   async trackEvent(event: IEvent, project: EProject, extraInfo?: Record<string, unknown>) {
+    // check if the event is sampled
+    if (this.checkIsSampled(event)) {
+      return;
+    }
     const location = event.location ? event.location : await this.getLocation();
     const target = event.target || null;
     const extra = event.extra || null;

package/src/common/report/errors/index.ts

@@ -1,5 +1,5 @@
 import './report';
-import { APIError, UserCustomError } from '@jolibox/common';
+import { APIError, UserValidateError } from '@jolibox/common';
 
 export function formatErrorCode(method: string, code?: number) {
   return `[${method}]:${code}`;
@@ -13,8 +13,8 @@ export const createAPIError = (
   return new APIError(params?.errMsg ?? error.msg ?? '', error.code, error.type);
 };
 
-export const createUserAPIError = (msg: string) => {
-  return new UserCustomError(msg);
+export const createUserValidateAPIError = (msg: string) => {
+  return new UserValidateError(msg);
 };
 
 export { errorReportEmitter, ErrorData } from './report';

package/src/common/report/errors/report/listeners.ts

@@ -30,8 +30,6 @@ const innerErrorReport = (
   options: ErrorOptions | GlobalErrorOptions = {},
   isFromUser: boolean
 ) => {
-  const priority = (error as BaseError).priority ?? 'P1';
-
   const common = {
     user_id: context.hostUserInfo?.uid ?? '',
     device_id: context.deviceInfo.did ?? '',

package/src/common/report/task-track/index.ts

@@ -22,15 +22,15 @@ export abstract class TaskTracker {
     this.reporter({
       event: 'PLAY_GAME',
       params: {
-        duration: duration / 1000 // second
+        duration
       }
     });
-    this.tracker('PlayGame', { duration: duration / 1000 });
+    this.tracker('PlayGame', { duration });
   });
 
   abstract reporter(point: TaskPoint): void;
   abstract tracker(point: TrackEvent, info: Record<string, unknown> | null): void;
-  constructor(eventEmitter: EventEmitter<{ visible: [boolean] }>, interval?: number) {
+  constructor(readonly eventEmitter: EventEmitter<{ visible: [boolean] }>, interval?: number) {
     this.interval = interval ?? 5 * 1000;
 
     eventEmitter.on('visible', (visible) => {
@@ -43,10 +43,10 @@ export abstract class TaskTracker {
       event: 'OPEN_GAME',
       params: {
         timestamp: Date.now(),
-        duration: duration ?? 0 / 1000 // second
+        duration: duration ?? 0
       }
     });
-    this.tracker('OpenGame', { duration: duration ?? 0 / 1000 });
+    this.tracker('OpenGame', { duration: duration ?? 0 });
     this.timer.start();
   }
 
@@ -55,22 +55,24 @@ export abstract class TaskTracker {
       event: 'CLOSE_GAME',
       params: {
         timestamp: Date.now(),
-        duration: duration / 1000 // second
+        duration
       }
     });
-    this.tracker('CloseGame', { duration: duration / 1000 });
+    this.tracker('CloseGame', { duration });
     this.timer.stop();
   }
 
   private createRAFTimer(callback: (duration: number) => void) {
-    let lastTime = performance.now();
+    let lastTime = Date.now();
     let rafId: number;
+    let intervalId: number;
     let isRunning = false;
     let totalTime = 0;
 
-    const tick = (currentTime: number) => {
+    const tick = () => {
       if (!isRunning) return;
 
+      const currentTime = Date.now();
       const deltaTime = currentTime - lastTime;
       if (deltaTime >= this.interval) {
         if (this.visible) {
@@ -83,19 +85,66 @@ export abstract class TaskTracker {
       rafId = requestAnimationFrame(tick);
     };
 
+    const startInterval = () => {
+      stopRAF();
+      lastTime = Date.now();
+      intervalId = window.setInterval(() => {
+        if (!isRunning) return;
+        const currentTime = Date.now();
+        const deltaTime = currentTime - lastTime;
+        if (deltaTime >= this.interval) {
+          lastTime = currentTime;
+        }
+      }, this.interval) as unknown as number;
+    };
+
+    const startRAF = () => {
+      stopInterval();
+      lastTime = Date.now();
+      rafId = requestAnimationFrame(tick);
+    };
+
+    const stopRAF = () => {
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+        rafId = 0;
+      }
+    };
+
+    const stopInterval = () => {
+      if (intervalId) {
+        clearInterval(intervalId);
+        intervalId = 0;
+      }
+    };
+
+    this.eventEmitter.on('visible', (visible) => {
+      if (!isRunning) return;
+
+      console.log('visible', visible);
+      if (visible) {
+        startRAF();
+      } else {
+        startInterval();
+      }
+    });
+
+    const originVisible = this.visible;
     return {
       start() {
         if (!isRunning) {
           isRunning = true;
-          lastTime = performance.now();
-          rafId = requestAnimationFrame(tick);
+          if (originVisible) {
+            startRAF();
+          } else {
+            startInterval();
+          }
         }
       },
       stop() {
         isRunning = false;
-        if (rafId) {
-          cancelAnimationFrame(rafId);
-        }
+        stopRAF();
+        stopInterval();
       }
     };
   }

package/src/common/report/track.ts

@@ -1,7 +1,7 @@
 import { debounce } from '@jolibox/common';
 import { ReportHandler, Track, TrackPerformance, CommonReportConfig } from './types';
 import { PerformanceType, TrackEvent } from '@jolibox/types';
-import { InternalContextError } from '@jolibox/common';
+import { InternalGlobalJSError } from '@jolibox/common';
 import { reportError } from './errors/report';
 
 // Track system event, wrap common config
@@ -15,7 +15,7 @@ export function createTrack(reportHandler: ReportHandler, common: CommonReportCo
       }
     };
     if (tag == 'globalJsError') {
-      reportError(new InternalContextError(JSON.stringify(data), 'P0')); // window.onerror, 白屏
+      reportError(new InternalGlobalJSError(JSON.stringify(data))); // window.onerror, 白屏
     } else {
       reportHandler('systemLog', data, webviewId);
     }

package/src/common/report/types.ts

@@ -1,4 +1,5 @@
 import { PerformanceType, TrackEvent } from '@jolibox/types';
+import { EProject } from '@jolibox/common';
 
 export interface Track {
   (tag: TrackEvent, info: Record<string, unknown> | null): void;
@@ -25,66 +26,3 @@ export interface CommonReportConfig {
   mp_version: string;
   trace_id?: number;
 }
-
-export enum EventType {
-  System = 1000, // used for web sdk
-  ErrorTrace = 1001, // used for web sdk
-  UserDefined = 1002 // used for web sdk
-}
-
-export interface IPage {
-  name: string;
-  params: Record<string, string | boolean | number | null> | null;
-}
-
-export interface IEvent {
-  name: string;
-  type: EventType; // use a higher ts version to get static analysis
-  location: IPage | null;
-  target: IPage | null;
-  extra: Record<string, string | boolean | number | null> | null;
-  timestamp: number; // in unix timestamp
-  userId: string | null; // 没登陆时为空
-}
-
-export enum EProject {
-  MiniGame = 'mini-game',
-  MiniDrama = 'mini-drama',
-  App = 'app',
-  WebSDK = 'web-sdk',
-  AppSDK = 'app-sdk'
-}
-
-export enum EPlatform {
-  App = 0,
-  H5 = 1,
-  Weapp = 2,
-  Alipay = 3,
-  Gcash = 4,
-  Dana = 5,
-  Umma = 6,
-
-  WebSDK = 1000,
-  AppSDK = 1001,
-
-  Other = 9999
-}
-
-export interface IDevice {
-  platform: EPlatform;
-  os: string; // for app: Android、iOS
-  appVersion: string;
-  appId: string; // for external SDK, "1 - game h5", "2 - drama h5", "3 - game h5 ant",  "4 - drama h5 ant"
-  model: string;
-  brand: string;
-  uuid: string; // 前端生成的唯一标识，用来串整个埋点
-  jsSdkVersion: string | null;
-  extra: Record<string, string | boolean | number | null> | null;
-}
-
-export interface IEventPackage {
-  protocolVersion: string;
-  events: IEvent[];
-  device: IDevice;
-  project: EProject;
-}

package/src/h5/api/ads.ts

@@ -0,0 +1,24 @@
+import { JoliboxAdsImpl } from '@/common/ads';
+import { track } from '../report';
+import { tracker as h5Tracker } from '../report/event-tracker';
+import { createCommands } from '@jolibox/common';
+import JoliboxHttpClient from '../http';
+
+const commands = createCommands();
+const ads = new JoliboxAdsImpl(track, new JoliboxHttpClient(), () => h5Tracker.networkIsOk);
+
+commands.registerCommand('AdsSDK.init', (config) => {
+  ads.init(config);
+});
+
+commands.registerCommand('AdsSDK.adConfig', (params) => {
+  ads.adConfig(params);
+});
+
+commands.registerCommand('AdsSDK.adBreak', (params) => {
+  ads.adBreak(params);
+});
+
+commands.registerCommand('AdsSDK.adUnit', (params) => {
+  ads.adUnit(params);
+});

package/src/h5/api/get-system-info.ts

@@ -13,7 +13,11 @@ const getSystemInfo = () => {
     system: context.deviceInfo.system,
     platform: context.deviceInfo.platform,
     brand: context.deviceInfo.brand,
-    pixelRatio: context.deviceInfo.pixelRatio
+    pixelRatio: context.deviceInfo.pixelRatio,
+    language: context.deviceInfo.lang,
+    version: context.sdkInfo.jssdkVersion,
+    appName: context.hostInfo?.appName,
+    SDKVersion: context.sdkInfo.nativeSDKVersion
   } as ISystemInfo;
 
   const version = context.hostInfo?.version;

package/src/h5/api/index.ts

@@ -2,3 +2,4 @@ import './get-system-info';
 import './lifecycle';
 import './storage';
 import './task';
+import './ads';

package/src/h5/http/index.ts

@@ -25,8 +25,7 @@ export class JoliboxHttpClient implements IHttpClient {
   private xua = xUserAgent();
 
   private getJoliSource = () => {
-    const urlParams = new URLSearchParams(window.location.search);
-    return urlParams.get('joliSource') ?? null;
+    return context.joliSource;
   };
 
   // private getApiBaseURL = () => {
@@ -41,30 +40,29 @@ export class JoliboxHttpClient implements IHttpClient {
 
   async get<T>(
     path: string,
-    {
-      query,
-      headers,
-      timeout
-    }: {
+    configs?: {
       query?: Record<string, string>;
       headers?: Record<string, string>;
       timeout?: number;
     }
   ) {
-    const searchParams = new URLSearchParams(query);
-    const search = searchParams.toString();
+    const { query, timeout } = configs ?? {};
+    let { headers } = configs ?? {};
+    const searchParams = query ? new URLSearchParams(query) : null;
+    const search = searchParams?.toString();
     const url = `${this.baseUrl}${path}${search ? `?${search}` : ''}`;
     const xua = this.xua;
     const joliSource = this.getJoliSource();
     headers = Object.assign(
       {},
-      headers,
+      headers ?? {},
       xua ? { 'x-user-agent': xua } : {},
       joliSource ? { 'x-joli-source': joliSource } : {}
     );
     const response = await fetch(url, {
       method: 'GET',
       headers,
+      credentials: 'include',
       signal: timeoutFn(timeout ?? 30000)
     });
     return (await response.json()) as T;
@@ -72,26 +70,23 @@ export class JoliboxHttpClient implements IHttpClient {
 
   async post<T = any>(
     path: string,
-    {
-      data,
-      query,
-      headers,
-      timeout
-    }: {
+    configs?: {
       data?: any;
       query?: Record<string, string>;
       headers?: Record<string, string>;
       timeout?: number;
     }
   ) {
-    const searchParams = new URLSearchParams(query);
-    const search = searchParams.toString();
+    const { data, query, timeout } = configs ?? {};
+    let { headers } = configs ?? {};
+    const searchParams = query ? new URLSearchParams(query) : null;
+    const search = searchParams?.toString();
     const url = `${this.baseUrl}${path}${search ? `?${search}` : ''}`;
     const xua = this.xua;
     const joliSource = this.getJoliSource();
     headers = Object.assign(
       {},
-      headers,
+      headers ?? {},
       { 'Content-Type': 'application/json' },
       xua ? { 'x-user-agent': xua } : {},
       joliSource ? { 'x-joli-source': joliSource } : {}
@@ -100,8 +95,10 @@ export class JoliboxHttpClient implements IHttpClient {
       method: 'POST',
       headers,
       body: JSON.stringify(data),
-      signal: timeoutFn(timeout ?? 30000)
+      signal: timeoutFn(timeout ?? 30000),
+      credentials: 'include'
     });
+
     const responseContentType = response.headers.get('content-type');
 
     // return blob
@@ -140,11 +137,7 @@ export class JoliboxHttpClient implements IHttpClient {
 
   async put<T>(
     path: string,
-    {
-      data,
-      query,
-      headers
-    }: {
+    configs?: {
       data?: any;
       query?: Record<string, string>;
       headers?: Record<string, string>;
@@ -152,14 +145,16 @@ export class JoliboxHttpClient implements IHttpClient {
     }
   ) {
     try {
-      const searchParams = new URLSearchParams(query);
-      const search = searchParams.toString();
+      const { data, query, timeout } = configs ?? {};
+      let { headers } = configs ?? {};
+      const searchParams = query ? new URLSearchParams(query) : null;
+      const search = searchParams?.toString();
       const url = `${this.baseUrl}${path}${search ? `?${search}` : ''}`;
       const xua = this.xua;
       const joliSource = this.getJoliSource();
       headers = Object.assign(
         {},
-        headers,
+        headers ?? {},
         { 'Content-Type': 'application/json' },
         xua ? { 'x-user-agent': xua } : {},
         joliSource ? { 'x-joli-source': joliSource } : {}
@@ -167,6 +162,7 @@ export class JoliboxHttpClient implements IHttpClient {
       const response = await fetch(url, {
         method: 'PUT',
         headers,
+        credentials: 'include',
         body: JSON.stringify(data ?? {}) // 将数据转换为 JSON 字符串
       });
 

package/src/h5/http/utils/__tests__/xua.test.ts

@@ -1,6 +1,6 @@
 // import { expect, test } from 'jest';
 import { xUserAgent, getAppVersion } from '../../../../common/http/xua';
-import { isValidUUIDV4 } from '../../../../common/http/uuid';
+import { isValidUUIDV4 } from '@jolibox/common';
 
 describe('xua', () => {
   it('test xua', () => {

package/src/h5/http/utils/session.ts

@@ -1,4 +1,4 @@
-import { uuidv4 } from '../../../common/http/uuid';
+import { uuidv4 } from '@jolibox/common';
 
 export const getGameSessionId = () => {
   let sessionId = sessionStorage.getItem('gameSessionId');

package/src/h5/report/errors/index.ts

@@ -5,7 +5,7 @@ import '@/common/report/errors/report/listeners';
 import { BaseError, logger } from '@jolibox/common';
 import { errorReportEmitter } from '@/common/report/errors';
 import { ErrorData } from '@/common/report/errors/report';
-import { IEvent, EventType, EProject } from '@/common/report';
+import { IEvent, EventType, EProject } from '@jolibox/common';
 import { tracker } from '../event-tracker';
 import { context } from '@/common/context';
 

package/src/h5/report/event-tracker.ts

@@ -1,6 +1,6 @@
 import { context } from '@/common/context';
 import { logger } from '@jolibox/common';
-import { EProject, EventTracker, EventType } from '@/common/report';
+import { EventTracker } from '@/common/report';
 import JoliboxHttpClient from '@/h5/http';
 
 export class H5EventTracker extends EventTracker {

package/src/h5/report/index.ts

@@ -1,6 +1,7 @@
 import './errors';
-import { createCommands, EventEmitter, isNumber, isObject, isString } from '@jolibox/common';
-import { CommonReportConfig, createTracks, EProject, EventType, IEvent } from '../../common/report';
+import { createCommands, EventEmitter, isObject, isString } from '@jolibox/common';
+import { EProject, EventType, IEvent } from '@jolibox/common';
+import { CommonReportConfig, createTracks } from '@/common/report';
 import { tracker } from './event-tracker';
 import { H5TaskTracker } from './task-tracker';
 import { context } from '@/common/context';
@@ -31,6 +32,7 @@ const { track, trackPerformance } = createTracks((...args) => {
     mp_id: (_data.mp_id as string) ?? '',
     mp_version: (_data.mp_version as string) ?? ''
   };
+  //TODO: 根据上报重要性做采样
   const eventBody: IEvent = {
     name: data.tag,
     type: EventType.System,

package/src/index.ts

@@ -3,7 +3,6 @@
 import './h5/report';
 //global apis
 import './h5/api';
-import './h5/ads';
 import { config } from './h5/bootstrap';
 
 config();

package/src/native/api/ads.ts

@@ -3,27 +3,51 @@ import { createSyncAPI, registerCanIUse } from './base';
 
 const commands = createCommands();
 
+import { IAdsInitParams, JoliboxAdsImpl, IAdConfigParams, IAdBreakParams, IAdUnitParams } from '@/common/ads';
+import { track } from '../report';
+
+import { innerFetch as fetch } from '../network';
+import { invokeNative } from '../bootstrap/bridge';
+
+const checkNetworkStatus = () => {
+  const { data } = invokeNative('getNetworkStatusSync');
+  return !!data?.isConnected;
+};
+const ads = new JoliboxAdsImpl(
+  track,
+  {
+    get: <T>(url: string, options?: any) =>
+      fetch<T>(url, {
+        method: 'GET',
+        responseType: 'json',
+        appendHostCookie: true,
+        ...options
+      }).then((res) => res.response.data as T)
+  },
+  checkNetworkStatus
+);
+
 const adInit = createSyncAPI('adInit', {
-  implement: (config) => {
-    logger.log('[JoliboxAdsSDK] adInit', config);
+  implement: (config?: IAdsInitParams) => {
+    ads.init(config);
   }
 });
 
 const adConfig = createSyncAPI('adConfig', {
-  implement: (params) => {
-    logger.log('[JoliboxAdsSDK] adConfig', params);
+  implement: (params: IAdConfigParams) => {
+    ads.adConfig(params);
   }
 });
 
 const adBreak = createSyncAPI('adBreak', {
-  implement: (params) => {
-    logger.log('[JoliboxAdsSDK] adBreak', params);
+  implement: (params: IAdBreakParams) => {
+    ads.adBreak(params);
   }
 });
 
 const adUnit = createSyncAPI('adUnit', {
-  implement: (params) => {
-    logger.log('[JoliboxAdsSDK] adUnit', params);
+  implement: (params: IAdUnitParams) => {
+    ads.adUnit(params);
   }
 });