@arms/rum-reactnative 0.0.2-bate.1

package/src/collector/resource/api.ts

@@ -0,0 +1,379 @@
+import {
+  find,
+  generateGUID,
+  generateSpanId,
+  generateTraceId,
+  ICollector,
+  IContext,
+  isString,
+  interceptFunction,
+  restoreFunction,
+  isFunction,
+  ITracingHeaders,
+  makeTracingHeaders,
+  matchList,
+  parseTracingOptions,
+  performDraw,
+  RumEvent,
+  RumEventType,
+  RumResourceEvent,
+  ResourceStatus,
+  TraceOption,
+  urlMatch,
+  ITracingOption,
+  PropagatorType,
+} from '@arms/rum-core';
+import { getCurrentTime } from '../../utils/base';
+import { IRNConfig } from '../../types/client';
+import {
+  ApiType,
+  IApiAttr,
+  IApiCache,
+  reviseApiAttr,
+  getResourceName,
+  getResourceSuccessByCode,
+} from '../../utils/api';
+import { RumSession } from '../../utils/session';
+
+declare global {
+  interface XMLHttpRequest {
+    apiAttr: IApiAttr;
+    apiCache: IApiCache;
+  }
+}
+
+export default class ApiCollector implements ICollector {
+  name = 'api-collector';
+
+  private ctx?: IContext;
+  private sendEvent?: (payload: RumEvent) => void;
+  private originFetch: unknown;
+
+  setup(ctx: IContext, sendEvent: (payload: RumEvent) => void) {
+    const collectors = ctx.getConfig().collectors || {};
+    if (!collectors.api) {
+      return;
+    }
+    this.sendEvent = sendEvent;
+    this.ctx = ctx;
+    // this.perfObserver();
+    this.hackXhr();
+    // this.hackFetch();
+  }
+
+  injectTracing(
+    apiAttr: IApiAttr,
+    inject: (tracingHeaders: ITracingHeaders) => void
+  ) {
+    const {
+      tracing = false,
+      pid,
+      version = '1.0.0',
+    } = (this.ctx as IContext).getConfig();
+    const {
+      enable,
+      sample,
+      propagatorTypes,
+      allowedUrls,
+      tracestate,
+      baggage = false,
+    } = parseTracingOptions(tracing as ITracingOption);
+    if (!enable) return;
+    // @ts-ignore
+    const traceOption = find(allowedUrls, (traceOption: TraceOption) =>
+      matchList([traceOption.match], apiAttr.url || '')
+    ) as TraceOption;
+    if (!traceOption) return;
+    let pTypes = traceOption.propagatorTypes;
+    if (pTypes.length === 0) {
+      pTypes = propagatorTypes as PropagatorType[];
+    }
+    // skywalking
+    let isSw8 = false;
+    if (pTypes.indexOf('sw8') > -1) {
+      pTypes = ['sw8'];
+      isSw8 = true;
+    }
+    const session = (this.ctx as IContext).session;
+    const traceId = isSw8 ? generateGUID() : generateTraceId();
+    const spanId = isSw8 ? generateGUID() : generateSpanId();
+    const sampled = performDraw(sample as number);
+    const uid = session.getUserId();
+    const sid = session.getSessionId();
+    const traceContext = tracestate
+      ? `rum=v2&browser&${pid}&${sid}&${uid}`
+      : undefined;
+    const baggageContext = baggage
+      ? `rum=v2,appType=browser,pid=${pid},sid=${sid},uid=${uid}`
+      : undefined;
+
+    const tracingHeaders = makeTracingHeaders(
+      traceId,
+      spanId,
+      sampled,
+      pTypes,
+      {
+        tracestate: traceContext,
+        baggage: baggageContext,
+        appId: pid,
+        appVersion: version,
+        viewName: apiAttr.view?.name,
+        // host: location.host
+      }
+    );
+    if (sampled) {
+      apiAttr.trace_id = traceId;
+      apiAttr.trace_data = JSON.stringify({
+        spanId,
+        sample,
+        sampled,
+        headers: tracingHeaders,
+      });
+    }
+    inject(tracingHeaders);
+  }
+
+  hackXhr() {
+    const oldXHRProto = XMLHttpRequest.prototype;
+    const self = this;
+    interceptFunction(
+      oldXHRProto,
+      'open',
+      function (
+        this: XMLHttpRequest,
+        method: string,
+        url: string | URL,
+        async?: boolean,
+        user?: string,
+        password?: string
+      ) {
+        const filters = (self.ctx as IContext).getConfig().filters || {};
+        const urlStr = String(url);
+        const methodStr = method.toUpperCase();
+        // chrome 对 URL 的最大长度为 8182 个字符
+        if (
+          urlMatch(urlStr, filters.resource) ||
+          methodStr === 'HEAD' ||
+          urlStr.length > 8182
+        )
+          return;
+        this.apiCache = {
+          type: ApiType.XHR,
+          method,
+          url,
+          async,
+          user,
+          password,
+          headers: {},
+        };
+        const baseRumEvent = (
+          (self.ctx as IContext).session as RumSession
+        ).getBaseEvent();
+        this.apiAttr = {
+          ...baseRumEvent,
+          url: urlStr,
+          method: methodStr,
+        } as IApiAttr;
+      },
+      true
+    );
+    interceptFunction(
+      oldXHRProto,
+      'setRequestHeader',
+      function (this: XMLHttpRequest, header: string, value: string) {
+        if (!this.apiCache) return;
+        this.apiCache.headers = {
+          ...this.apiCache.headers,
+          [header]: value,
+        };
+      },
+      true
+    );
+    interceptFunction(
+      oldXHRProto,
+      'send',
+      function (this: XMLHttpRequest, body: any) {
+        if (!this.apiAttr || !this.apiCache) return;
+        let apiAttr = this.apiAttr;
+        this.apiCache.data = body;
+        self.injectTracing(this.apiAttr, (tracingHeaders) => {
+          Object.keys(tracingHeaders).forEach((key) => {
+            tracingHeaders[key] && this.setRequestHeader(key, tracingHeaders[key])
+          });
+        });
+        this.addEventListener('loadend', async () => {
+          const { status, statusText, response } = this;
+          const { evaluateApi } = (self.ctx as IContext).getConfig() as IRNConfig;
+          if (!this.apiAttr) return;
+          apiAttr.status_code = status;
+          apiAttr.message = statusText;
+          const entry = {
+            name: this.apiAttr.url,
+            entryType: ApiType.XHR,
+            duration: getCurrentTime() - apiAttr.timestamp,
+          };
+          if (isFunction(evaluateApi)) {
+            try {
+              let error: Error | undefined;
+              if (apiAttr.success === ResourceStatus.Failed) {
+                error = new Error(ApiType.XHR + ' error');
+              }
+              const attrs = await evaluateApi?.(
+                this.apiCache,
+                response,
+                error,
+                this
+              );
+              this.apiAttr = apiAttr = {
+                ...apiAttr,
+                ...reviseApiAttr(attrs as IApiAttr),
+              };
+            } catch (e) {
+              //
+            }
+          }
+          self.sendAPI(apiAttr, entry);
+        });
+        this.addEventListener('error', () => {
+          this.apiAttr && (this.apiAttr.success = ResourceStatus.Failed);
+        });
+      },
+      true
+    );
+  }
+
+  hackFetch() {
+    const self = this;
+    const originFetch = (this.originFetch = globalThis.fetch);
+    const filters = (this.ctx as IContext).getConfig().filters || {};
+    globalThis.fetch = function (
+      input: Request | URL | string,
+      init: RequestInit = {}
+    ) {
+      const isReq = input instanceof Request;
+      const urlStr = isReq
+        ? input.url
+        : isString(input)
+          ? input
+          : input.toString();
+      let method = init.method;
+      let headers = init.headers;
+      if (isReq) {
+        !method && (method = input.method);
+        !headers && (headers = input.headers);
+      }
+      method = method ? method.toUpperCase() : 'GET';
+      if (!headers) {
+        init.headers = headers = new Headers();
+      }
+      if (
+        urlMatch(urlStr, filters.resource) ||
+        method === 'HEAD' ||
+        init?.mode === 'no-cors' ||
+        urlStr.length > 8182
+      ) {
+        return originFetch.call(global, input, init);
+      }
+      const baseRumEvent = ((self.ctx as IContext).session as RumSession).getBaseEvent();
+      let apiAttr = {
+        ...baseRumEvent,
+        url: urlStr,
+        type: ApiType.FETCH,
+        method,
+      } as IApiAttr;
+      let apiResp: Response;
+      let apiError: Error;
+
+      self.injectTracing(apiAttr, (tracingHeaders) => {
+        Object.keys(tracingHeaders).forEach((key) => {
+          if(!headers) return;
+          if (headers instanceof Headers) {
+            tracingHeaders[key] && headers.set(key, tracingHeaders[key]);
+          } else {
+            // @ts-ignore
+            headers[key] = tracingHeaders[key];
+          }
+        });
+      });
+
+      async function fetchFinally() {
+        const { evaluateApi } = (self.ctx as IContext).getConfig() as IRNConfig;
+        const entry = {
+          name: apiAttr.url,
+          entryType: ApiType.FETCH,
+          duration: getCurrentTime() - apiAttr.timestamp,
+        };
+        if (isFunction(evaluateApi)) {
+          try {
+            const attrs = await evaluateApi?.(
+              { url: input, ...init },
+              apiResp,
+              apiError
+            );
+            apiAttr = { ...apiAttr, ...reviseApiAttr(attrs as IApiAttr) };
+          } catch (e) {
+            //
+          }
+        }
+        self.sendAPI(apiAttr, entry);
+      }
+
+      return originFetch
+        .call(globalThis, input, init)
+        .then((response: Response) => {
+          // @ts-ignore
+          if (response || isFunction(response.clone)) {
+            apiResp = response.clone();
+            const { status, statusText } = apiResp;
+            apiAttr.status_code = status;
+            apiAttr.message = statusText;
+            fetchFinally().then();
+          }
+          return response;
+        })
+        .catch((error: Error) => {
+          apiError = error;
+          apiAttr.message = String(error);
+          apiAttr.success = ResourceStatus.Failed;
+          fetchFinally().then();
+          throw error;
+        });
+    };
+  }
+
+  sendAPI(apiAttr: IApiAttr, entry: any) {
+    const { parseResourceName } = (this.ctx as IContext).getConfig() as IRNConfig;
+    const { url, status_code, view } = apiAttr;
+    const success = getResourceSuccessByCode(status_code as string);
+    const measures = {
+      duration: entry.duration,
+    };
+    const event: RumResourceEvent = {
+      event_type: RumEventType.RESOURCE,
+      url,
+      name: getResourceName(url || '', parseResourceName),
+      success,
+      type: entry.initiatorType || entry.entryType,
+      ...apiAttr,
+      timing_data: JSON.stringify(entry),
+      // Measure
+      ...measures,
+      view,
+    };
+
+    this.sendEvent?.(event);
+  }
+
+  destroy() {
+    this.sendEvent = () => {};
+    // 恢复XHR
+    const oldXHRProto = XMLHttpRequest.prototype;
+    restoreFunction(oldXHRProto, 'open');
+    restoreFunction(oldXHRProto, 'setRequestHeader');
+    restoreFunction(oldXHRProto, 'send');
+    // 恢复 fetch
+    if (this.originFetch) {
+      globalThis.fetch = this.originFetch as any;
+    }
+  }
+}

package/src/collector/view/perf.ts

@@ -0,0 +1,77 @@
+// import { ICollector, IContext, isArray, RumEvent } from '@arms/rum-core';
+// import { getPerformance } from "../../utils/platform";
+// import { getCurView } from "../../utils/view";
+//
+//
+//
+//
+// export default class PerfCollector implements ICollector {
+//   name = 'perf-collector';
+//   ctx: IContext;
+//   sendEvent: (payload: RumEvent) => void;
+//   perfObserver: any;
+//
+//   setup(ctx: IContext, sendEvent: (payload: RumEvent) => void) {
+//     const {collectors = {}} = ctx.getConfig();
+//     if (collectors.perf === false) {
+//       return;
+//     }
+//     this.ctx = ctx;
+//     this.sendEvent = sendEvent;
+//     const performance = getPerformance();
+//     if (!performance || !performance.createObserver) return;
+//     this.perfObserver = performance.createObserver(this.observerHandler)
+//     this.perfObserver.observe({entryTypes: ['launch', 'navigation', 'render', 'paint', 'resource']});
+//   }
+//
+//   observerHandler = (ev) => {
+//     const entries = isArray(ev) ? ev : ev.getEntries();
+//     const perfData = {
+//       view: getCurView(this.ctx)
+//     };
+//     if (Array.isArray(entries) && entries.length > 0) {
+//       for (let i = 0; i < entries.length; i++) {
+//         const item = entries[i];
+//         if (typeof item.duration === 'number') {
+//           switch (item.name) {
+//             case 'appLaunch':
+//             case 'app-click':
+//               perfData['launch'] = item.duration;
+//               break;
+//             case 'firstPaint':
+//             // case 'first-paint':
+//               perfData['first-paint'] = item.duration;
+//               break;
+//             case 'firstRender':
+//               perfData['first_render'] = item.duration;
+//               break;
+//             case 'firstContentfulPaint':
+//             // case 'first-contentful-paint':
+//               perfData['first_contentful_paint'] = item.duration;
+//               break;
+//             case 'largestContentfulPaint':
+//             // case 'largest-contentful-paint':
+//               perfData['largest_contentful_paint'] = item.duration;
+//               break;
+//             case 'resourceTiming':
+//             case 'resource-timing':
+//               perfData['timing_data'] = JSON.stringify(item);
+//               break;
+//             default:
+//               break;
+//           }
+//         }
+//       }
+//     }
+//
+//     if (!Object.keys(perfData).length) return;
+//     // TODO 处理性能数据
+//     // console.warn('perf-collector: ', perfData);
+//   };
+//
+//   destroy() {
+//     if (this.perfObserver) {
+//       this.perfObserver.disconnect();
+//     }
+//   }
+// }

package/src/collector/view/pv.ts

@@ -0,0 +1,73 @@
+import { ICollector, IContext, isFunction, IViewData, RumEvent, RumEventType, RumViewEvent } from '@arms/rum-core';
+import { IRNConfig, IPage } from "../../types/client";
+import { addNavigateListener, removeNavigateListener } from "../../utils/view";
+import { Route } from "../../types";
+
+export default class PvCollector implements ICollector {
+  name = 'pv-collector';
+  ctx?: IContext;
+  sendEvent?: (payload: RumEvent) => void;
+
+  private prevPage?: IPage;
+
+  private pageMap: { [key: string]: IPage } = {};
+
+  setup(ctx: IContext, sendEvent: (payload: RumEvent) => void) {
+    this.ctx = ctx;
+    this.sendEvent = sendEvent;
+    addNavigateListener(this.onChange)
+  }
+
+  onChange = (route: Route<any>) => {
+    // {"name":"index","path":"/","key":"index-SB2hXmOGNdpiLskG5sXwj"}
+    // {"name":"__root","key":"__root-jPbNqG7-HaM-OUx_FcCUw"}
+    const {key, name, path, params} = route;
+    const page: IPage = {name, path, id: key, params};
+    if (name === "__root" || !('path' in page)) return;
+    this.sendPv(page);
+  }
+
+  sendPv = (page: IPage) => {
+    const prevPage = this.prevPage;
+    const ctx = this.ctx as IContext;
+    if (page.id === prevPage?.id) {
+      // 路由没有发生变化，不发送
+      return;
+    }
+    page.name = this.getViewName(page.path as string, page);
+
+    if (prevPage && prevPage.id in this.pageMap) {
+      delete this.pageMap[prevPage.id];
+      ctx.removeView(prevPage.id)
+    }
+    this.prevPage = page;
+
+    ctx.addView(page as IViewData);
+
+    // 路由回退情况下已经上报
+    if(page.id in this.pageMap) {
+      return;
+    }
+
+    this.pageMap[page.id] = page;
+    this.sendEvent?.({
+      event_type: RumEventType.VIEW,
+      type: 'pv',
+      loading_type: 'initial_load',
+      ...page,
+    } as RumViewEvent);
+  }
+
+  private getViewName(url: string, page: IPage): string | undefined {
+    let { parseViewName } = this.ctx?.getConfig() as IRNConfig;
+    let name = page.name;
+    if (parseViewName && isFunction(parseViewName)) {
+      name = parseViewName(url, page) || name;
+    }
+    return name
+  }
+
+  destroy() {
+    removeNavigateListener(this.onChange);
+  }
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+import armsRum, { ArmsRum } from './shell';
+
+export { ArmsRum };
+export default armsRum;

package/src/plugin.ts

@@ -0,0 +1,41 @@
+import { NativeModules, NativeEventEmitter } from 'react-native';
+import { isString } from "@arms/rum-core";
+import { IRNConfig } from "./types/client";
+import { VERSION } from "./utils/platform";
+import armsRum from './shell';
+
+const RumSdkModule = NativeModules.RumSdkModule;
+
+function initRum(config: IRNConfig) {
+  armsRum.init({
+    ...config,
+    beforeReport(bundle): any {
+      RumSdkModule.sendEvent(JSON.stringify(bundle));
+      return null
+    }
+  })
+}
+
+if (RumSdkModule) {
+  const eventEmitter = new NativeEventEmitter(RumSdkModule);
+  eventEmitter.addListener('rumNativeEvent', (config: IRNConfig) => {
+    if (isString(config)) {
+      try {
+        config = JSON.parse(config);
+      } catch (e) {
+        console.warn('getConfig error', e);
+        return
+      }
+    }
+    if (!config.pid) {
+      config.pid = `react-native@${VERSION}`;
+    }
+    if (!config.endpoint) {
+      config.endpoint = `http://127.0.0.1/?version=${VERSION}`;
+    }
+    initRum(config);
+  });
+  RumSdkModule?.getConfig?.();
+}
+
+export default armsRum

package/src/processor/default-processor.ts

@@ -0,0 +1,22 @@
+import { IContext, IProcessor, IViewData, RumEvent } from '@arms/rum-core';
+import { getCurrentTime } from '../utils/base';
+import { getCurView } from '../utils/view';
+
+export default class DefaultProcessor implements IProcessor {
+  name = 'default-processor';
+
+  process(ctx: IContext) {
+    const event = ctx.getRumEvent();
+    const view = getCurView(ctx) as IViewData;
+    const session_id = ctx.session.getSessionId();
+    const event_id = ctx.session.getEventId();
+    const rumEvent: RumEvent = {
+      timestamp: getCurrentTime(),
+      session_id,
+      event_id,
+      view,
+      ...event,
+    };
+    return rumEvent;
+  }
+}

package/src/processor/session-processor.ts

@@ -0,0 +1,23 @@
+import { debounce, IContext, IProcessor, ONE_SECOND } from '@arms/rum-core';
+
+export default class SessionProcessor implements IProcessor {
+  name = 'session-processor';
+
+  ctx?: IContext;
+
+  setup(ctx: IContext) {
+    this.ctx = ctx;
+    this.update = debounce(this.update, ONE_SECOND);
+    // sdk.onTouchStart(this.update)
+  }
+
+  update = (e?: Event) => {
+    if (e && !e.isTrusted) return;
+    this.ctx?.session.updateSession();
+  }
+
+  process(ctx: IContext) {
+    this.update();
+    return ctx.getRumEvent();
+  }
+}

package/src/reporter/index.ts

@@ -0,0 +1,67 @@
+import {
+  IContext,
+  IReporter,
+  Reporter,
+  RumEventBundle,
+} from '@arms/rum-core';
+import { fixAttrs } from '../utils/platform';
+// @ts-ignore
+import { AppState, NativeEventSubscription } from 'react-native';
+
+/**
+ * rn-app reporter
+ */
+class RNReporter extends Reporter implements IReporter {
+  name = 'rn-reporter';
+
+  private appStateListener?: NativeEventSubscription;
+
+  constructor() {
+    super();
+    // 离开之前 flushEventQueue
+    try {
+      this.appStateListener = AppState.addEventListener('change', this.onAppStateChanged);
+    } catch (error) {
+      //
+      console.info(error)
+    }
+  }
+
+  init(ctx: IContext) {
+    this.ctx = ctx;
+  }
+
+  onAppStateChanged(nextAppState: string) {
+    if (nextAppState === 'background') {
+      // 执行后台操作：暂停动画、保存数据、停止网络请求等
+      this.flushEventQueue();
+    }
+    // else if (nextAppState === 'active') {
+    //   console.warn('RUM:应用回到前台');
+    // }
+  }
+
+  request(ctx: IContext, bundle: RumEventBundle) {
+    const batchedEvents = fixAttrs(bundle);
+    const config = ctx.getConfig();
+    fetch(config.endpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'text/plain',
+      },
+      body: JSON.stringify(batchedEvents)
+    }).then((_res) => {
+      //
+    }).catch(this.catchHandle)
+  }
+
+  catchHandle = (err: any) => {
+    console.warn('[rum] sendRequest fail', err);
+  }
+
+  destroy() {
+    this.appStateListener?.remove();
+  }
+}
+
+export default RNReporter;