美团 Logan Web SDK 源码分析

import Logan from 'logan-web';
Logan.initConfig({
	reportUrl: 'https://yourServerAddressToAcceptLogs',
	publicKey: '-----BEGIN PUBLIC KEY-----\n'+
        'MIGeMA0GCSqGSIb3DQEBAQUAA4GMADCBiAKBgG2m5VVtZ4mHml3FB9foDRpDW7Pw\n'+
        'Foa+1eYN777rNmIdnmezQqHWIRVcnTRVjrgGt2ndP2cYT7MgmWpvr8IjgN0PZ6ng\n'+
        'MmKYGpapMqkxsnS/6Q8UZO4PQNlnsK2hSPoIDeJcHxDvo6Nelg+mRHEpD6K+1FIq\n'+
        'zvdwVPCcgK7UbZElAgMBAAE=\n'+
        '-----END PUBLIC KEY-----',
   // ...
});
Logan.logWithEncryption('confidentialLogContent', 1);

import Config from './global-config';
// ...
export function initConfig (globalConfig: GlobalConfig): void {
    Config.set(globalConfig);
}
export default {
  // ...
  initConfig
}

// ...

function validOrBackup (
    param: any,
    type: 'string' | 'number' | 'function',
    backup: any
): any {
    return typeof param === type ? param : backup;
}
export default {
    set: (configOb: GlobalConfig): void => {
        globalConfig = {
            publicKey: validOrBackup(configOb.publicKey, 'string', undefined),
            logTryTimes: validOrBackup(
                configOb.logTryTimes,
                'number',
                DEFAULT_TRY_TIMES
            ),
            reportUrl: validOrBackup(configOb.reportUrl, 'string', undefined),
            // ...
        };
    },
    get: (propertyKey: keyof GlobalConfig): any => {
        // ...
    }
};

import LogManager from './log-manager';

// ...
function standardLog (content: string, logType: number, encryptVersion: LogEncryptMode): never | void {
    try {
  			// 2.类型字段校验
        logParamChecker(logType, LogEncryptMode.PLAIN);
    } catch (e) {
        (Config.get('errorHandler') as Function)(e);
    }
		// 3.存储日志
    logIfLoaded({
        logContent: logContentWrapper(content, logType),
        encryptVersion
    });
}
function logParamChecker (logType: number, encryptVersion: LogEncryptMode): never | void {
    if (typeof logType !== 'number') {
        throw new Error('logType needs to be set');
    }
    if (encryptVersion === LogEncryptMode.RSA) {
        if (!Config.get('publicKey')) {
            throw new Error(
                'publicKey needs to be set before logWithEncryption'
            );
        }
    }
}
function logIfLoaded (logItem: LogConfig): void {
  	// 4.判断当前页面是够加载完成
    if (
        !document.readyState ||
        (document.readyState && document.readyState === 'complete')
    ) {
  			// 5.1 异步存储日志
        logAsync(logItem);
    } else {
      	// 5.2 没有加载完成推送待存储队列
        logQueueBeforeLoad.push(logItem);
    }
}

function onWindowLoad (): void {
    logQueueBeforeLoad.forEach(logItem => {
        logAsync(logItem);
    });
    logQueueBeforeLoad = [];
    window.removeEventListener('load', onWindowLoad);
}
// 5.2.1 页面加载完成遍历 logQueueBeforeLoad 一个个存储日志
window.addEventListener('load', onWindowLoad);
// ...


async function logAsync (logItem: LogConfig): Promise<void> {
    // No need to async import if tryTimes exceeds.
    // 6. 判断是否可以存储日志 
  	// async await 抓取异常需要包裹 try catch
    if (LogManager.canSave()) {
        try {
  					// 7. 异步加载 save-log.ts 并调用传入日志对象
  					// 其中 import 方法依赖 webpack， 被引用的文件会打包成一个单独的 chunk
  					// LogManager.save 及 save-log 的实现逻辑参考下面代码
            const saveLogModule = await import(
                /* webpackChunkName: "save_log" */ './save-log'
            );
            saveLogModule.default(logItem);
        } catch (e) {
            LogManager.errorTrigger();
            await (Config.get('errorHandler') as Function)(e);
        }
    } else {
        await (Config.get('errorHandler') as Function)(new Error(ResultMsg.EXCEED_TRY_TIMES));
    }
}


/**
 * Save one log locally.
 * @param content Log content.
 * @param logType Log type.
 */
export function log (content: string, logType: number): void {
  	// 1. 日志内容、日志类型（用户自定义）、加密类型
    standardLog(content, logType, LogEncryptMode.PLAIN);
}

export default {
  // ...
  log
}

import Config from './global-config';
let logTryQuota: number = Config.get('logTryTimes') as number;
function errorTrigger (): void {
  	// 发生异常时触发错误技术 重试数量减一
    if (logTryQuota > 0) {
        logTryQuota--;
    }
}

function canSave (): boolean {
  	// 重试错误小于等于 0 时
    return logTryQuota > 0;
}

function resetQuota (): void {
    logTryQuota = Config.get('logTryTimes') as number;
}

export default {
    errorTrigger,
    canSave,
    resetQuota
};

// ...
import Config from './global-config';
import LoganDB from './lib/logan-db';
import LogManager from './log-manager';
import { invokeInQueue } from './logan-operation-queue';

// ...
let LoganDBInstance: LoganDB;
function base64Encode (text: string): string {
    // ...
}

export default async function saveLog (logConfig: LogConfig): Promise<void> {
    try {
  			// 1.是否可以存储
        if (!LogManager.canSave()) {
            throw new Error(ResultMsg.EXCEED_TRY_TIMES);
        }
				// 2.是否支持 IndexedDB
        if (!LoganDB.idbIsSupported()) {
            throw new Error(ResultMsg.DB_NOT_SUPPORT);
        }
        // 3. 初始化 IndexedDB 实例
        if (!LoganDBInstance) {
            LoganDBInstance = new LoganDB(Config.get('dbName') as
                | string
                | undefined);
        }
        if (logConfig.encryptVersion === LogEncryptMode.PLAIN) {
          	// 4. base64 加密 log 内容
            const logStringOb: LogStringOb = {
                l: base64Encode(logConfig.logContent)
            };
          	// 
          	// 5.按照队列顺序依次推入日志内容
            await invokeInQueue(async () => {
                await LoganDBInstance.addLog(
                    JSON.stringify(logStringOb)
                );
            });
        } else if (logConfig.encryptVersion === LogEncryptMode.RSA) {
            const publicKey = Config.get('publicKey');
            const encryptionModule = await import(
                    /* webpackChunkName: "encryption" */ './lib/encryption'
            );
            const cipherOb = encryptionModule.encryptByRSA(
                logConfig.logContent,
                `${publicKey}`
            );
          	// 6. RSA加密
            const logStringOb: LogStringOb = {
                l: cipherOb.cipherText,
                iv: cipherOb.iv,
                k: cipherOb.secretKey,
                v: LogEncryptMode.RSA
            };
          	// 7. 按照队列顺序依次推入日志内容
            await invokeInQueue(async () => {
                await LoganDBInstance.addLog(
                    JSON.stringify(logStringOb)
                );
            });
        } else {
            throw new Error(`encryptVersion ${logConfig.encryptVersion} is not supported.`);
        }
        await (Config.get('succHandler') as Function)(logConfig);
    } catch (e) {
        LogManager.errorTrigger();
        await (Config.get('errorHandler') as Function)(e);
    }
}

const loganOperationQueue: PromiseItem[] = [];
let operationRunning: boolean = false;
// ...
async function loganOperationsRecursion (): Promise<void> {
  	// 2. 如果队列数量大于0 同时没有正在进行存储操作则进行下一个存储
    while (loganOperationQueue.length > 0 && !operationRunning) {
      	// push shift 先入先出策略
        const nextOperation = loganOperationQueue.shift() as PromiseItem;
        operationRunning = true;
        try {
            const result = await nextOperation.asyncF();
            nextOperation.resolution(result);
        } catch (e) {
            nextOperation.rejection(e);
        }
        operationRunning = false; /* eslint-disable-line */ // No need to worry require-atomic-updates here.
        loganOperationsRecursion();
    }
}
export function invokeInQueue (asyncF: Function): Promise<any> {
    return new Promise((resolve, reject) => {
        loganOperationQueue.push({
            // 1. asyncF 为上面传入的
          	// await invokeInQueue(async () => {
            //    await LoganDBInstance.addLog(
            //        JSON.stringify(logStringOb)
            //    );
            // });
            asyncF,
            resolution: resolve,
            rejection: reject
        });
        loganOperationsRecursion();
    });
}

request.onsuccess = function (event) {
  db = request.result;
};

// ...

var objectStore
if (!db.objectStoreNames.contains('person')) {
	// 设置 id 为主键索引
  objectStore = db.createObjectStore('person', {keyPath: 'id'})
  // 如果没有合适的字段作为主键则可以自动生成
  objectStore = db.createObjectStore('person', {autoIncrement: true})
  
  // createIndex 创建索引 配置主键等
  objectStore.createIndex('email', 'email', { unique: true });
}

var request = db.transaction(['person'], 'readwrite')
								.objectStore('persion')
								.add({id: 1, name: '张三', email: 'xx@qq.com'})

request.onsuccess = function(event) {
	//...
}

request.onerror = function(event) {
	//...
}

var transaction =  db.transaction('[person]')
var objectStore = transaction.objectStore('person')
var request = objectStore.get(1);

request.onsuccess = function(event) {
	//...
}

request.onerror = function(event) {
	if (request.result) {
    // ...
  } else {
  	// ...
  }
}

var objectStore = db.transaction('person').objectStore('person');

objectStore.openCursor().onsuccess = function(event) {
	var cursor = event.target.result
  
  // 当前其中一条数据
}

var request = db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .delete(1);

npm install --save idb-managed

import { CustomDB } from 'idb-managed';

/* Define db and table structures first. */
let db = new CustomDB({
	dbName: 'DEMO_DB',
	dbVersion: 1,
	itemDuration: 5000 * 3600,
	tables: {
		STUDENTS: {
			primaryKey: 'studentId',
			indexList: [
				{
					indexName: 'name',
					unique: false
				},
				{
					indexName: 'age',
					unique: false
				}
			],
			itemDuration: 1000 * 3600
		},
		OTHER_INFO: {}
	}
});

import { CustomDB, idbIsSupported, deleteDB } from 'idb-managed';
import { dateFormat2Day, M_BYTE, sizeOf, getStartOfDay, dayFormat2Date } from './utils';
// ...
// 默认版本号
const LOGAN_DB_VERSION = 1;
// 默认 db 名称
const LOGAN_DB_NAME = 'logan_web_db';
// 默认日志详情表名称
const LOG_DETAIL_TABLE_NAME = 'logan_detail_table';
// 索引字段
const LOG_DETAIL_REPORTNAME_INDEX = 'logReportName';
// 索引字段
const LOG_DETAIL_CREATETIME_INDEX = 'logCreateTime';
// 默认日志天表名称
const LOG_DAY_TABLE_NAME = 'log_day_table';
// 索引字段
export const LOG_DAY_TABLE_PRIMARY_KEY = 'logDay';
export type FormattedLogReportName = string;
// 日志保留时长（7天）
const DEFAULT_LOG_DURATION = 7 * 24 * 3600 * 1000; // logan-web keeps 7 days logs locally
// 每天日志最大容量（7M）
const DEFAULT_SINGLE_DAY_MAX_SIZE = 7 * M_BYTE; // 7M storage limit for one day
// 每个页最大容量（1M）
const DEFAULT_SINGLE_PAGE_MAX_SIZE = 1 * M_BYTE; // 1M storage limit for one page


export default class LoganDB {
    public static idbIsSupported = idbIsSupported;
    public static deleteDB = deleteDB;
    private DB: CustomDB;
    constructor(dbName?: string) {
        // 初始化数据库及数据表
        this.DB = new CustomDB({
            dbName: dbName || LOGAN_DB_NAME,
            dbVersion: LOGAN_DB_VERSION,
            tables: {
                [LOG_DETAIL_TABLE_NAME]: {
                    indexList: [
                        {
                            indexName: LOG_DETAIL_REPORTNAME_INDEX,
                            unique: false
                        },
                        {
                            indexName: LOG_DETAIL_CREATETIME_INDEX,
                            unique: false
                        }
                    ]
                },
                [LOG_DAY_TABLE_NAME]: {
                    primaryKey: LOG_DAY_TABLE_PRIMARY_KEY
                }
            }
        });
    }
    // ... logReportNameFormatter  获取 log 名称 ${logDay}_${pageIndex}
    // ... logReportNameParser  分隔 log 名称（_） logDay pageIndex
    // 获取指定天数的日志信息
    async getLogDayInfo (logDay: string): Promise<LoganLogDayItem | null> {
        return ((await this.DB.getItem(
            LOG_DAY_TABLE_NAME,
            logDay
        )) as any) as LoganLogDayItem | null;
    }
    // 获取日期范围的日志
    async getLogDaysInfo (
        fromLogDay: string,
        toLogDay: string
    ): Promise<LoganLogDayItem[]> {
        if (fromLogDay === toLogDay) {
            const result = ((await this.DB.getItem(
                LOG_DAY_TABLE_NAME,
                fromLogDay
            )) as any) as LoganLogDayItem | null;
            return result ? [result] : [];
        } else {
            return ((await this.DB.getItemsInRange({
                tableName: LOG_DAY_TABLE_NAME,
                indexRange: {
                    indexName: LOG_DAY_TABLE_PRIMARY_KEY,
                    lowerIndex: fromLogDay,
                    upperIndex: toLogDay,
                    lowerExclusive: false,
                    upperExclusive: false
                }
            })) as any[]) as LoganLogDayItem[];
        }
    }
    // 根据名称获取日志
    async getLogsByReportName (
        reportName: FormattedLogReportName
    ): Promise<LoganLogItem[]> {
        const logs = ((await this.DB.getItemsInRange({
            tableName: LOG_DETAIL_TABLE_NAME,
            indexRange: {
                indexName: LOG_DETAIL_REPORTNAME_INDEX,
                onlyIndex: reportName
            }
        })) as any[]) as LoganLogItem[];
        return logs;
    }
    // 添加日志
    async addLog (logString: string): Promise<void> {
      	// 1. 计算当前内容大小
        const logSize = sizeOf(logString);
        const now = new Date();
        const today: string = dateFormat2Day(now);
				// 2. 当天的日志内容
        const todayInfo: LoganLogDayItem = (await this.getLogDayInfo(
            today
        )) || {
            [LOG_DAY_TABLE_PRIMARY_KEY]: today,
            totalSize: 0,
            reportPagesInfo: {
                pageSizes: [0]
            }
        };
				// 3. 当天的日志数量大于最大则抛出错误 throw 终止后面的 js 执行
        if (todayInfo.totalSize + logSize > DEFAULT_SINGLE_DAY_MAX_SIZE) {
            throw new Error(ResultMsg.EXCEED_LOG_SIZE_LIMIT);
        }
				// 4. 如果当前没有数据赋值默认值
        if (!todayInfo.reportPagesInfo || !todayInfo.reportPagesInfo.pageSizes) {
            todayInfo.reportPagesInfo = { pageSizes: [0] };
        }
        const currentPageSizesArr = todayInfo.reportPagesInfo.pageSizes;
        const currentPageIndex = currentPageSizesArr.length - 1;
        const currentPageSize = currentPageSizesArr[currentPageIndex];
        const needNewPage =
            currentPageSize > 0 &&
            currentPageSize + logSize > DEFAULT_SINGLE_PAGE_MAX_SIZE;
        const nextPageSizesArr = (function (): number[] {
            const arrCopy = currentPageSizesArr.slice();
          	// 5. 如果当前页超过了一页面的最大容量 新增一页
            if (needNewPage) {
                arrCopy.push(logSize);
            } else {
                arrCopy[currentPageIndex] += logSize;
            }
            return arrCopy;
        })();
				// 6. 添加单条数据
        const logItem: LoganLogItem = {
            [LOG_DETAIL_REPORTNAME_INDEX]: this.logReportNameFormatter(
                today,
                needNewPage ? currentPageIndex + 1 : currentPageIndex
            ),
            [LOG_DETAIL_CREATETIME_INDEX]: +now,
            logSize,
            logString
        };
        const updatedTodayInfo: LoganLogDayItem = {
            [LOG_DAY_TABLE_PRIMARY_KEY]: today,
            totalSize: todayInfo.totalSize + logSize,
            reportPagesInfo: {
                pageSizes: nextPageSizesArr
            }
        };
        // The expire time is the start of the day after 7 days.
				// 7. 添加截止日期并存储
        const durationBeforeExpired =
            DEFAULT_LOG_DURATION - (+new Date() - getStartOfDay(new Date()));
				// 8. addItems 为 idb-manager 数据
        await this.DB.addItems([
            {
                tableName: LOG_DAY_TABLE_NAME,
                item: updatedTodayInfo,
                itemDuration: durationBeforeExpired
            },
            {
                tableName: LOG_DETAIL_TABLE_NAME,
                item: logItem,
                itemDuration: durationBeforeExpired
            }
        ]);
    }
    /**
     * Delete reported pages of logDay, in case that new pages are added after last report.
     */
    // 删除日志
    async incrementalDelete (logDay: string, reportedPageIndexes: number[]): Promise<void> {
      // 获取该天数据  
      const dayInfo: LoganLogDayItem | null = await this.getLogDayInfo(logDay);
        if (dayInfo && dayInfo.reportPagesInfo && dayInfo.reportPagesInfo.pageSizes instanceof Array) {
            // 1. 当前总数组
          	const currentPageSizesArr = dayInfo.reportPagesInfo.pageSizes;
          	// 2. 全部日志大小
            const currentTotalSize = dayInfo.totalSize;
          	// 3. 上报过的日志大小
            const totalReportedSize = currentPageSizesArr.reduce((accSize, currentSize, indexOfPage) => {
                if (reportedPageIndexes.indexOf(indexOfPage) >= 0) {
                    return accSize + currentSize;
                } else {
                    return accSize;
                }
            }, 0);
          	// 4. 如果在最后一页也被上报了 追加 0
            const pageSizesArrayWithNewPage = (function addNewPageIfLastPageIsReported (): number[] {
                // Add a new page with 0 page size if the last page is reported.
                if (reportedPageIndexes.indexOf(currentPageSizesArr.length - 1) >= 0) {
                    return currentPageSizesArr.concat([0]);
                } else {
                    return currentPageSizesArr;
                }
            })();
          	
          	// 5. 如果上报过了 size 设置为 0
            const resetReportedPageSizes = pageSizesArrayWithNewPage.reduce((accSizesArray, currentSize, index) => {
                if (reportedPageIndexes.indexOf(index) >= 0) {
                    return accSizesArray.concat([0]); // Reset to 0 if this page is reported.
                } else {
                    return accSizesArray.concat([currentSize]);
                }
            }, [] as number[]);
            // Update dayInfo with new pageSizeArray and new totalSize
            const updatedDayInfo = {
                ...dayInfo,
                reportPagesInfo: {
                    pageSizes: resetReportedPageSizes
                },
                totalSize: Math.max(currentTotalSize - totalReportedSize, 0)
            };
            // The expire time is the start of the day after 7 days.
            const durationBeforeExpired = DEFAULT_LOG_DURATION - (+new Date() - getStartOfDay(new Date())) - (getStartOfDay(new Date()) - dayFormat2Date(logDay).getTime());
            await this.DB.addItems([
                {
                    tableName: LOG_DAY_TABLE_NAME,
                    item: updatedDayInfo,
                    itemDuration: durationBeforeExpired
                }
            ]);
            // Delete logs of reported pages by iterating reportedPageIndexes.
            for (const pageIndex of reportedPageIndexes) {
                await this.DB.deleteItemsInRange([
                    {
                        tableName: LOG_DETAIL_TABLE_NAME,
                        indexRange: {
                            indexName: LOG_DETAIL_REPORTNAME_INDEX,
                            onlyIndex: this.logReportNameFormatter(logDay, pageIndex)
                        }
                    }
                ]);
            }
        }
    }
}

/**
 * Save one confidential log locally. Before saving, the log content will be encrypted and it is very hard to crack after then.
 * @param content Log content.
 * @param logType Log type.
 */
export function logWithEncryption (content: string, logType: number): void {
    standardLog(content, logType, LogEncryptMode.RSA);
}

// ...

function reportParamChecker (reportConfig: ReportConfig): never | void {
    if (!reportConfig) {
        throw new Error('reportConfig needs to be an object');
    }
    const dayFormatDesc = 'is not valid, needs to be YYYY-MM-DD format';
    if (!isValidDay(reportConfig.fromDayString)) {
        throw new Error(`fromDayString ${dayFormatDesc}`);
    }
    if (!isValidDay(reportConfig.toDayString)) {
        throw new Error(`toDayString ${dayFormatDesc}`);
    }
    if (reportConfig.fromDayString > reportConfig.toDayString) {
        throw new Error('fromDayString needs to be no bigger than toDayString');
    }
}

/**
 * Report local logs to the server side.
 *
 * @param reportConfig Config for this report.
 * @returns {Promise<ReportResult>} Reject with an Error if anything goes wrong during the report process. Resolve ReportResult if the process is successful.
 */
export async function report (reportConfig: ReportConfig): Promise<ReportResult> {
  	// 参数校验
    reportParamChecker(reportConfig);
    const reportLogModule = await import(
        /* webpackChunkName: "report_log" */ './report-log'
    );
    return await reportLogModule.default(reportConfig);
}
export default {
  // ...
  report
}

export default async function reportLog (
    reportConfig: ReportConfig
): Promise<ReportResult> {
  	// 1. 是否支持 IndexedDB
    if (!LoganDB.idbIsSupported()) {
        throw new Error(ResultMsg.DB_NOT_SUPPORT);
    } else {
      	// 2. 是否存在 IndexedDb 实例
        if (!LoganDBInstance) {
            LoganDBInstance = new LoganDB(Config.get('dbName') as
                | string
                | undefined);
        }
      	// 3. 添加执行队列等待上报 log
        return await invokeInQueue(async () => {
          	// 4. 根据开始结束时间获取日志集合
            const logDaysInfoList: LoganLogDayItem[] = await LoganDBInstance.getLogDaysInfo(
                reportConfig.fromDayString,
                reportConfig.toDayString
            );
          	// 5. 已日期为 key 封装上报内容
            const logReportMap: {
                [key: string]: FormattedLogReportName[];
            } = logDaysInfoList.reduce((acc, logDayInfo: LoganLogDayItem) => {
                return {
                    [logDayInfo[
                        LOG_DAY_TABLE_PRIMARY_KEY
                    ]]: logDayInfo.reportPagesInfo ? logDayInfo.reportPagesInfo.pageSizes.map((i, pageIndex) => {
                        return LoganDBInstance.logReportNameFormatter(
                            logDayInfo[LOG_DAY_TABLE_PRIMARY_KEY],
                            pageIndex
                        );
                    }) : [],
                    ...acc
                };
            }, {});
            const reportResult: ReportResult = {};
            const startDate = dayFormat2Date(reportConfig.fromDayString);
            const endDate = dayFormat2Date(reportConfig.toDayString);
          	// 6. 遍历每天分别上报
          	// 24 * 60 * 60 * 1000
            for (
                let logTime = +startDate;
                logTime <= +endDate;
                logTime += ONE_DAY_TIME_SPAN
            ) {
                const logDay = dateFormat2Day(new Date(logTime));
                if (logReportMap[logDay] && logReportMap[logDay].length > 0) {
                    try {
                      	// 7. 遍历所有上报内容 统一 promise 处理
                        const batchReportResults = await Promise.all(
                            logReportMap[logDay].map(reportName => {
                                return getLogAndSend(reportName, reportConfig);
                            })
                        );
                        reportResult[logDay] = { msg: ResultMsg.REPORT_LOG_SUCC };
                        try {
                          	// 8. 删除已上报的内容
                            const reportedPageIndexes = batchReportResults.filter(reportedPageIndex => reportedPageIndex !== null) as number[];
                            if (reportedPageIndexes.length > 0 && reportConfig.incrementalReport) {
                                // Delete logs of reported pages after report.
                                await LoganDBInstance.incrementalDelete(logDay, reportedPageIndexes);
                            }
                        } catch (e) {
                            // Noop if deletion failed.
                        }
                    } catch (e) {
                        reportResult[logDay] = {
                            msg: ResultMsg.REPORT_LOG_FAIL,
                            desc: e.message || e.stack || JSON.stringify(e)
                        };
                    }
                } else {
                    reportResult[logDay] = { msg: ResultMsg.NO_LOG };
                }
            }
            return reportResult;
        });
    }
}

async function getLogAndSend (reportName: string, reportConfig: ReportConfig): Promise<number | null> {
    
  	// 1. 根据名称获取 report 日志内容
  	const logItems = await LoganDBInstance.getLogsByReportName(reportName);
    if (logItems.length > 0) {
        const pageIndex = LoganDBInstance.logReportNameParser(reportName).pageIndex;
        const logItemStrings = logItems
            .map(logItem => {
                return encodeURIComponent(logItem.logString);
            });
        const logReportOb = LoganDBInstance.logReportNameParser(reportName);
        const customXHROpts: ReportXHROpts = typeof reportConfig.xhrOptsFormatter === 'function' ? reportConfig.xhrOptsFormatter(logItemStrings, logReportOb.pageIndex + 1, logReportOb.logDay) : {};
        return await Ajax(
            customXHROpts.reportUrl || reportConfig.reportUrl || (Config.get('reportUrl') as string),
            customXHROpts.data || JSON.stringify({
                client: 'Web',
                webSource: `${reportConfig.webSource || ''}`,
                deviceId: reportConfig.deviceId,
                environment: `${reportConfig.environment || ''}`,
                customInfo: `${reportConfig.customInfo || ''}`,
                logPageNo: logReportOb.pageIndex + 1, // pageNo start from 1,
                fileDate: logReportOb.logDay,
                logArray: logItems
                    .map(logItem => {
                        return encodeURIComponent(logItem.logString);
                    })
                    .toString()
            }),
            customXHROpts.withCredentials ?? false,
            'POST',
            customXHROpts.headers || {
                'Content-Type': 'application/json',
                'Accept': 'application/json,text/javascript'
            }
        ).then((responseText: any) => {
            // ...
          	if (response?.code === 200) {
                // 返回已经上报的 log 索引
                return pageIndex;
            }
        });
    } else {
        // Resolve directly if no logs in current page.
        return Promise.resolve(null);
    }
}