8747236517

Committed 19 Apr 2024 01:51AM UTC coverage: 63.325% (-0.06%) from 63.389%

Build # 8747236517

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #76 from HuolalaTech/optimize/message-cache

add `messageCapacity` config field

Run Details

1320 of 1465 branches covered (90.1%)

Branch coverage included in aggregate %.

43 of 72 new or added lines in 9 files covered. (59.72%)

1 existing line in 1 file now uncovered.

5307 of 9000 relevant lines covered (58.97%)

31.17 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/page-spy-plugin-data-harbor/src/index.ts

import type {
  SpyMessage,
  OnInitParams,
  OnMountedParams,
  PageSpyPlugin,
  PluginOrder,
} from '@huolala-tech/page-spy-types';
import { isBrowser, isPlainObject, psLog } from 'base/src';
import { strFromU8, zlibSync, strToU8 } from 'fflate';
import type RequestItem from 'base/src/request-item';
import type { InitConfig } from 'page-spy-browser/types';
import { Harbor } from './harbor';
import { DownloadArgs, handleDownload, startDownload } from './utils/download';
import { UploadArgs, handleUpload, startUpload } from './utils/upload';
import { getDeviceId } from './utils';

type DataType = 'console' | 'network' | 'system' | 'storage' | 'rrweb-event';

export type CacheMessageItem = Pick<
  SpyMessage.MessageItem<SpyMessage.DataType, any>,
  'type' | 'data'
> & {
  timestamp: number;
};

interface DataHarborConfig {
  maximum?: number;
  caredData?: Record<DataType, boolean>;
  filename?: () => string;
  onDownload?: (data: CacheMessageItem[]) => void;
}

const minifyData = (d: any) => {
  return strFromU8(zlibSync(strToU8(JSON.stringify(d)), { level: 9 }), true);
};

const makeData = (type: SpyMessage.DataType, data: any) => {
  return {
    type,
    timestamp: Date.now(),
    data: minifyData(data),
  };
};

export default class DataHarborPlugin implements PageSpyPlugin {
  public enforce: PluginOrder = 'pre';

  public name = 'DataHarborPlugin';

  // "Harbor" is an abstraction for scheduling data actions.
  private harbor: Harbor;

  // Specify which types of data to collect.
  private caredData: Record<DataType, boolean> = {
    console: true,
    network: true,
    storage: true,
    system: true,
    'rrweb-event': true,
  };

  private apiBase: string = '';

  private $pageSpyConfig: InitConfig | null = null;

  private filename: DataHarborConfig['filename'] = () => {
    return new Date().toLocaleString();
  };

  private onDownload: DataHarborConfig['onDownload'];

  public static hasInited = false;

  public static hasMounted = false;

  constructor(config: DataHarborConfig = {}) {
    if (isPlainObject(config.caredData)) {
      this.caredData = {
        ...this.caredData,
        ...config.caredData,
      };
    }
    if (typeof config.onDownload === 'function') {
      this.onDownload = config.onDownload;
    }
    if (typeof config.filename === 'function') {
      this.filename = config.filename;
    }
    this.harbor = new Harbor({ maximum: config.maximum });
  }

  public async onInit({ socketStore, config }: OnInitParams<InitConfig>) {
    if (DataHarborPlugin.hasInited) return;
    DataHarborPlugin.hasInited = true;

    this.$pageSpyConfig = config;
    const { api, enableSSL } = config;
    if (!api) {
      psLog.warn(
        "Cannot upload log to PageSpy for miss 'api' configuration. See: ",
        config,
      );
    } else {
      const apiScheme = enableSSL ? 'https://' : 'http://';
      this.apiBase = `${apiScheme}${api}`;
    }

    socketStore.addListener('public-data', async (message) => {
      if (!this.isCaredPublicData(message)) return;

      const data = makeData(message.type, message.data);

      const ok = this.harbor.save(data);
      if (!ok) {
        psLog.warn(`[${this.name}] Save data failed`, data);
      }
    });
  }

  public onMounted({ content }: OnMountedParams) {
    if (DataHarborPlugin.hasMounted) return;
    DataHarborPlugin.hasMounted = true;

    if (isBrowser()) {
      const downloadBtn = handleDownload(this.getParams('download'));
      const uploadBtn = handleUpload(this.getParams('upload'));

      content.insertAdjacentElement('beforeend', downloadBtn);
      content.insertAdjacentElement('beforeend', uploadBtn);
    }
  }

  getParams(type: 'download'): DownloadArgs;
  getParams(type: 'upload'): UploadArgs;
  getParams(type: any) {
    if (type === 'download') {
      return {
        harbor: this.harbor,
        filename: this.filename!,
        customDownload: this.onDownload,
      };
    }
    return {
      harbor: this.harbor,
      uploadUrl: this.apiBase,
      filename: this.filename!,
      debugClient: this.$pageSpyConfig?.clientOrigin!,
      tags: {
        project: this.$pageSpyConfig?.project,
        title: this.$pageSpyConfig?.title,
        deviceId: getDeviceId(),
        userAgent: navigator.userAgent,
      },
    } as UploadArgs;
  }

  onOfflineLog(type: 'download' | 'upload') {
    switch (type) {
      case 'download':
        startDownload(this.getParams('download'));
        break;
      case 'upload':
        startUpload(this.getParams('upload'));
        break;
      default:
        break;
    }
  }

  onReset() {
    this.harbor.clear();
    DataHarborPlugin.hasInited = false;
    DataHarborPlugin.hasMounted = false;
    const node = document.getElementById('data-harbor-plugin-download');
    if (node) {
      node.remove();
    }
  }

  private isCaredPublicData(message: SpyMessage.MessageItem) {
    if (!message) return false;
    const { type } = message;
    switch (type) {
      case 'console':
        if (this.caredData.console) return true;
        return false;
      case 'storage':
        if (this.caredData.storage) return true;
        return false;
      case 'system':
        if (this.caredData.system) return true;
        return false;
      case 'rrweb-event':
        if (this.caredData['rrweb-event']) return true;
        return false;
      case 'network':
        const { url } = message.data as RequestItem;
        const isFetchHarborStockUrl = this.harbor.stock.includes(url);

        if (this.caredData.network && !isFetchHarborStockUrl) return true;
        return false;
      // case DEBUG_MESSAGE_TYPE.DATABASE:
      //   if (['update', 'clear', 'drop'].includes(data.action)) {
      //     if (data.database?.includes(SKIP_PUBLIC_IDB_PREFIX)) {
      //       return false;
      //     }
      //     return true;
      //   }
      //   break;
      default:
        return false;
    }
  }
}

1	import type {	×
2	SpyMessage,	×
3	OnInitParams,	×
4	OnMountedParams,	×
5	PageSpyPlugin,	×
6	PluginOrder,	×
7	} from '@huolala-tech/page-spy-types';	×
8	import { isBrowser, isPlainObject, psLog } from 'base/src';	×
9	import { strFromU8, zlibSync, strToU8 } from 'fflate';	×
10	import type RequestItem from 'base/src/request-item';	×
11	import type { InitConfig } from 'page-spy-browser/types';	×
12	import { Harbor } from './harbor';	×
13	import { DownloadArgs, handleDownload, startDownload } from './utils/download';	×
14	import { UploadArgs, handleUpload, startUpload } from './utils/upload';	×
15	import { getDeviceId } from './utils';	×
16		×
17	type DataType = 'console' \| 'network' \| 'system' \| 'storage' \| 'rrweb-event';	×
18		×
19	export type CacheMessageItem = Pick<	×
20	SpyMessage.MessageItem<SpyMessage.DataType, any>,	×
21	'type' \| 'data'	×
22	> & {	×
23	timestamp: number;	×
24	};	×
25		×
26	interface DataHarborConfig {	×
27	maximum?: number;	×
28	caredData?: Record<DataType, boolean>;	×
29	filename?: () => string;	×
30	onDownload?: (data: CacheMessageItem[]) => void;	×
31	}	×
32		×
33	const minifyData = (d: any) => {	×
34	return strFromU8(zlibSync(strToU8(JSON.stringify(d)), { level: 9 }), true);	×
35	};	×
36		×
37	const makeData = (type: SpyMessage.DataType, data: any) => {	×
38	return {	×
39	type,	×
40	timestamp: Date.now(),	×
41	data: minifyData(data),	×
42	};	×
43	};	×
44		×
45	export default class DataHarborPlugin implements PageSpyPlugin {	×
46	public enforce: PluginOrder = 'pre';	×
47		×
48	public name = 'DataHarborPlugin';	×
49		×
50	// "Harbor" is an abstraction for scheduling data actions.	×
51	private harbor: Harbor;	×
52		×
53	// Specify which types of data to collect.	×
54	private caredData: Record<DataType, boolean> = {	×
55	console: true,	×
56	network: true,	×
57	storage: true,	×
58	system: true,	×
59	'rrweb-event': true,	×
60	};	×
61		×
62	private apiBase: string = '';	×
63		×
64	private $pageSpyConfig: InitConfig \| null = null;	×
65		×
66	private filename: DataHarborConfig['filename'] = () => {	×
67	return new Date().toLocaleString();	×
68	};	×
69		×
70	private onDownload: DataHarborConfig['onDownload'];	×
71		×
72	public static hasInited = false;	×
73		×
74	public static hasMounted = false;	×
75		×
76	constructor(config: DataHarborConfig = {}) {	×
77	if (isPlainObject(config.caredData)) {	×
78	this.caredData = {	×
79	...this.caredData,	×
80	...config.caredData,	×
81	};	×
82	}	×
83	if (typeof config.onDownload === 'function') {	×
84	this.onDownload = config.onDownload;	×
85	}	×
86	if (typeof config.filename === 'function') {	×
87	this.filename = config.filename;	×
88	}	×
89	this.harbor = new Harbor({ maximum: config.maximum });	×
90	}	×
91		×
NEW 92	public async onInit({ socketStore, config }: OnInitParams<InitConfig>) {	×
93	if (DataHarborPlugin.hasInited) return;	×
94	DataHarborPlugin.hasInited = true;	×
95		×
96	this.$pageSpyConfig = config;	×
97	const { api, enableSSL } = config;	×
98	if (!api) {	×
99	psLog.warn(	×
100	"Cannot upload log to PageSpy for miss 'api' configuration. See: ",	×
101	config,	×
102	);	×
103	} else {	×
104	const apiScheme = enableSSL ? 'https://' : 'http://';	×
105	this.apiBase = `${apiScheme}${api}`;	×
106	}	×
107		×
108	socketStore.addListener('public-data', async (message) => {	×
109	if (!this.isCaredPublicData(message)) return;	×
110		×
111	const data = makeData(message.type, message.data);	×
112		×
113	const ok = this.harbor.save(data);	×
114	if (!ok) {	×
115	psLog.warn(`[${this.name}] Save data failed`, data);	×
116	}	×
117	});	×
118	}	×
119		×
120	public onMounted({ content }: OnMountedParams) {	×
121	if (DataHarborPlugin.hasMounted) return;	×
122	DataHarborPlugin.hasMounted = true;	×
123		×
124	if (isBrowser()) {	×
125	const downloadBtn = handleDownload(this.getParams('download'));	×
126	const uploadBtn = handleUpload(this.getParams('upload'));	×
127		×
128	content.insertAdjacentElement('beforeend', downloadBtn);	×
129	content.insertAdjacentElement('beforeend', uploadBtn);	×
130	}	×
131	}	×
132		×
133	getParams(type: 'download'): DownloadArgs;	×
134	getParams(type: 'upload'): UploadArgs;	×
135	getParams(type: any) {	×
136	if (type === 'download') {	×
137	return {	×
138	harbor: this.harbor,	×
139	filename: this.filename!,	×
140	customDownload: this.onDownload,	×
141	};	×
142	}	×
143	return {	×
144	harbor: this.harbor,	×
145	uploadUrl: this.apiBase,	×
146	filename: this.filename!,	×
147	debugClient: this.$pageSpyConfig?.clientOrigin!,	×
148	tags: {	×
149	project: this.$pageSpyConfig?.project,	×
150	title: this.$pageSpyConfig?.title,	×
151	deviceId: getDeviceId(),	×
152	userAgent: navigator.userAgent,	×
153	},	×
154	} as UploadArgs;	×
155	}	×
156		×
157	onOfflineLog(type: 'download' \| 'upload') {	×
158	switch (type) {	×
159	case 'download':	×
160	startDownload(this.getParams('download'));	×
161	break;	×
162	case 'upload':	×
163	startUpload(this.getParams('upload'));	×
164	break;	×
165	default:	×
166	break;	×
167	}	×
168	}	×
169		×
170	onReset() {	×
171	this.harbor.clear();	×
172	DataHarborPlugin.hasInited = false;	×
173	DataHarborPlugin.hasMounted = false;	×
174	const node = document.getElementById('data-harbor-plugin-download');	×
175	if (node) {	×
176	node.remove();	×
177	}	×
178	}	×
179		×
180	private isCaredPublicData(message: SpyMessage.MessageItem) {	×
181	if (!message) return false;	×
182	const { type } = message;	×
183	switch (type) {	×
184	case 'console':	×
185	if (this.caredData.console) return true;	×
186	return false;	×
187	case 'storage':	×
188	if (this.caredData.storage) return true;	×
189	return false;	×
190	case 'system':	×
191	if (this.caredData.system) return true;	×
192	return false;	×
193	case 'rrweb-event':	×
194	if (this.caredData['rrweb-event']) return true;	×
195	return false;	×
196	case 'network':	×
197	const { url } = message.data as RequestItem;	×
198	const isFetchHarborStockUrl = this.harbor.stock.includes(url);	×
199		×
200	if (this.caredData.network && !isFetchHarborStockUrl) return true;	×
201	return false;	×
202	// case DEBUG_MESSAGE_TYPE.DATABASE:	×
203	// if (['update', 'clear', 'drop'].includes(data.action)) {	×
204	// if (data.database?.includes(SKIP_PUBLIC_IDB_PREFIX)) {	×
205	// return false;	×
206	// }	×
207	// return true;	×
208	// }	×
209	// break;	×
210	default:	×
211	return false;	×
212	}	×
213	}	×
214	}	×

HuolalaTech / page-spy / 8747236517

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous