@qiu_jun/monitors 0.0.1

package/README.md

@@ -0,0 +1,90 @@
+# @qiu_jun/monitor
+
+前端监控 SDK：采集异常 + 性能指标，上报至异常分析平台（main-server `/api/exception/report`）。
+
+内置 reporter（与 main-server `exception-sdk` 协议对齐），**无外部 SDK 依赖**，可独立打包发布 npm。
+
+## 安装
+
+```bash
+pnpm add @qiu_jun/monitor
+```
+
+## 按需引入（子路径导出）
+
+与异常平台 SDK 相同风格，按场景引入：
+
+```ts
+// 完整 H5 监控（采集 + 上报）
+import { Monitor } from '@qiu_jun/monitor'
+import { Monitor } from '@qiu_jun/monitor/h5'
+
+// 仅 reporter（自定义采集，复用上报协议）
+import { createReporter, makeH5Transport } from '@qiu_jun/monitor/reporter'
+```
+
+## 快速接入
+
+```ts
+import { Monitor } from '@qiu_jun/monitor'
+
+const monitor = new Monitor({
+  endpoint: 'https://your-host/api/exception/report',
+  projectKey: 'your-project-key',
+  release: '1.0.0',  // 客户端版本号 选填
+  environment: 'production', 
+  userId: 'optional-user-id', // 选填
+})
+```
+
+配置 `endpoint` + `projectKey` 后，所有采集数据自动转为异常平台格式并批量上报。
+
+**采样率**：仅在后台「接入项目」里配置 `sampleRate`，客户端无需传。
+
+完整参数说明见 [docs.md](./docs.md)。
+
+## 自动采集
+
+| 采集项 | 异常平台 type | 说明 |
+|---|---|---|
+| JS 错误 | `error` | 含选择器、白屏检测 |
+| Promise 未捕获 | `unhandledrejection` | |
+| 资源加载失败 | `resource` | img/script/css 等 |
+| XHR 失败/超时 | `request` | message 格式 `Request failed [500]: GET /api/...` |
+| FP/FCP/FMP/LCP | `paint` | 指标在 `device` |
+| DOMContentLoaded/load | `timing` | |
+| 长任务 | `longTask` | duration ≥ 100ms 时 level=WARN |
+
+## 手动上报
+
+```ts
+monitor.capture({
+  type: 'custom',
+  level: 'WARN',
+  message: '支付回调超时',
+})
+```
+
+## 构建发布
+
+```bash
+pnpm build   # tsc → dist/*.js + *.d.ts，vite → dist/monitor.umd.js
+npm publish
+```
+
+产物：
+
+| 路径 | 说明 |
+|---|---|
+| `@qiu_jun/monitor` | `dist/index.js` + `dist/index.d.ts` |
+| `@qiu_jun/monitor/h5` | `dist/h5.js` + `dist/h5.d.ts` |
+| `@qiu_jun/monitor/reporter` | `dist/reporter.js` + `dist/reporter.d.ts` |
+| UMD | `dist/monitor.umd.js`（`require` 条件导出） |
+
+## 与 main-server 的关系
+
+- 上报协议对齐 `packages/main-server/src/modules/exception/report/`
+- 异常类 → `exc_issue` + `exc_event`
+- 性能类（paint/timing/longTask）→ `exc_perf_event`
+- reporter 源码位于 `src/exception/`，与 exception-sdk 逻辑等价，便于独立发版
+- **后台对接与展示**：[backend-integration.md](./backend-integration.md)（与 exception 模块 `/api/exception/*` 接口一一对照）

package/dist/exception/index.d.ts

@@ -0,0 +1,3 @@
+export { createReporter, ExcReporter, SDK_VERSION } from './reporter';
+export { makeH5Transport } from './transport';
+export type { ExcEventPayload, ExcSdkOptions, ExcTransport } from './types';

package/dist/exception/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeH5Transport = exports.SDK_VERSION = exports.ExcReporter = exports.createReporter = void 0;
+var reporter_1 = require("./reporter");
+Object.defineProperty(exports, "createReporter", { enumerable: true, get: function () { return reporter_1.createReporter; } });
+Object.defineProperty(exports, "ExcReporter", { enumerable: true, get: function () { return reporter_1.ExcReporter; } });
+Object.defineProperty(exports, "SDK_VERSION", { enumerable: true, get: function () { return reporter_1.SDK_VERSION; } });
+var transport_1 = require("./transport");
+Object.defineProperty(exports, "makeH5Transport", { enumerable: true, get: function () { return transport_1.makeH5Transport; } });

package/dist/exception/reporter.d.ts

@@ -0,0 +1,18 @@
+import type { ExcEventPayload, ExcSdkOptions, ExcTransport } from './types';
+export declare const SDK_VERSION = "0.0.1";
+/** 缓冲上报器：攒批 → transport 批量上报 */
+export declare class ExcReporter {
+    private readonly options;
+    private readonly transport;
+    private buffer;
+    private timer;
+    private sending;
+    constructor(options: ExcSdkOptions, transport: ExcTransport);
+    /** 采样 + 入缓冲 */
+    capture(event: ExcEventPayload): void;
+    flush(): Promise<void>;
+    destroy(): void;
+    private ensureTimer;
+    private clearTimer;
+}
+export declare function createReporter(options: ExcSdkOptions, transport: ExcTransport): ExcReporter;

package/dist/exception/reporter.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExcReporter = exports.SDK_VERSION = void 0;
+exports.createReporter = createReporter;
+exports.SDK_VERSION = '0.0.1';
+const DEFAULT_MAX_BATCH = 20;
+const DEFAULT_FLUSH_INTERVAL = 30000;
+const MAX_BUFFER = 100;
+/** 缓冲上报器：攒批 → transport 批量上报 */
+class ExcReporter {
+    constructor(options, transport) {
+        Object.defineProperty(this, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: options
+        });
+        Object.defineProperty(this, "transport", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: transport
+        });
+        Object.defineProperty(this, "buffer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "timer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "sending", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+    }
+    /** 采样 + 入缓冲 */
+    capture(event) {
+        var _a, _b, _c, _d, _e;
+        const sampleRate = (_a = this.options.sampleRate) !== null && _a !== void 0 ? _a : 100;
+        if (sampleRate < 100 && Math.random() * 100 >= sampleRate)
+            return;
+        this.buffer.push({
+            ...event,
+            level: (_b = event.level) !== null && _b !== void 0 ? _b : 'ERROR',
+            occurredAt: (_c = event.occurredAt) !== null && _c !== void 0 ? _c : new Date().toISOString(),
+            sdkVersion: (_d = event.sdkVersion) !== null && _d !== void 0 ? _d : exports.SDK_VERSION,
+        });
+        if (this.buffer.length > MAX_BUFFER)
+            this.buffer = this.buffer.slice(-MAX_BUFFER);
+        if (this.buffer.length >= ((_e = this.options.maxBatch) !== null && _e !== void 0 ? _e : DEFAULT_MAX_BATCH))
+            void this.flush();
+        else
+            this.ensureTimer();
+    }
+    async flush() {
+        if (this.sending || this.buffer.length === 0)
+            return;
+        this.clearTimer();
+        this.sending = true;
+        const events = this.buffer;
+        this.buffer = [];
+        try {
+            await this.transport({ events }, this.options.projectKey);
+        }
+        catch (err) {
+            // 403 key 无效：放弃；其余放回缓冲重试
+            if ((err === null || err === void 0 ? void 0 : err.statusCode) !== 403) {
+                this.buffer = [...events, ...this.buffer].slice(-MAX_BUFFER);
+                this.ensureTimer();
+            }
+        }
+        finally {
+            this.sending = false;
+        }
+    }
+    destroy() {
+        this.clearTimer();
+        void this.flush();
+    }
+    ensureTimer() {
+        var _a;
+        if (this.timer)
+            return;
+        this.timer = setTimeout(() => {
+            this.timer = null;
+            void this.flush();
+        }, (_a = this.options.flushInterval) !== null && _a !== void 0 ? _a : DEFAULT_FLUSH_INTERVAL);
+    }
+    clearTimer() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+            this.timer = null;
+        }
+    }
+}
+exports.ExcReporter = ExcReporter;
+function createReporter(options, transport) {
+    return new ExcReporter(options, transport);
+}

package/dist/exception/transport.d.ts

@@ -0,0 +1,3 @@
+import type { ExcTransport } from './types';
+/** H5 transport：fetch + keepalive（页面卸载时仍可发出） */
+export declare function makeH5Transport(endpoint: string): ExcTransport;

package/dist/exception/transport.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeH5Transport = makeH5Transport;
+/** H5 transport：fetch + keepalive（页面卸载时仍可发出） */
+function makeH5Transport(endpoint) {
+    return async (payload, projectKey) => {
+        const res = await fetch(endpoint, {
+            method: 'POST',
+            headers: { 'content-type': 'application/json', 'X-Project-Key': projectKey },
+            body: JSON.stringify(payload),
+            keepalive: true,
+        });
+        if (!res.ok)
+            throw Object.assign(new Error(`monitor: 上报失败 ${res.status}`), { statusCode: res.status });
+    };
+}

package/dist/exception/types.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 与 main-server packages/exception-sdk/src/types.ts 对齐
+ * monitor 内置 reporter，避免跨仓库 dist 依赖
+ */
+/** SDK 配置 */
+export interface ExcSdkOptions {
+    endpoint: string;
+    projectKey: string;
+    release?: string;
+    environment?: string;
+    sampleRate?: number;
+    maxBatch?: number;
+    flushInterval?: number;
+}
+/** 单条上报事件（对齐服务端 ReportEventDto） */
+export interface ExcEventPayload {
+    type: 'error' | 'unhandledrejection' | 'resource' | 'request' | 'custom' | 'paint' | 'timing' | 'longTask';
+    level?: 'FATAL' | 'ERROR' | 'WARN' | 'INFO';
+    message: string;
+    stack?: string;
+    page?: string;
+    userId?: string;
+    /** 客户端版本号 */
+    release?: string;
+    /** 环境 production | development */
+    environment?: string;
+    sdkVersion?: string;
+    occurredAt?: string;
+    device?: Record<string, any>;
+}
+export type ExcTransport = (payload: {
+    events: ExcEventPayload[];
+}, projectKey: string) => Promise<void>;

package/dist/exception/types.js

@@ -0,0 +1,6 @@
+"use strict";
+/**
+ * 与 main-server packages/exception-sdk/src/types.ts 对齐
+ * monitor 内置 reporter，避免跨仓库 dist 依赖
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/h5.d.ts

@@ -0,0 +1,4 @@
+/** H5 监控入口（按需引入，与主入口能力相同） */
+export { default as Monitor } from './monitor';
+export { default } from './monitor';
+export type * from './interface';

package/dist/h5.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = exports.Monitor = void 0;
+/** H5 监控入口（按需引入，与主入口能力相同） */
+var monitor_1 = require("./monitor");
+Object.defineProperty(exports, "Monitor", { enumerable: true, get: function () { return __importDefault(monitor_1).default; } });
+var monitor_2 = require("./monitor");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(monitor_2).default; } });

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Monitor } from './monitor';
+export type * from './interface';
+export { createReporter, makeH5Transport, ExcReporter, SDK_VERSION } from './exception';
+export type { ExcEventPayload, ExcSdkOptions, ExcTransport } from './exception';

package/dist/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SDK_VERSION = exports.ExcReporter = exports.makeH5Transport = exports.createReporter = exports.Monitor = void 0;
+var monitor_1 = require("./monitor");
+Object.defineProperty(exports, "Monitor", { enumerable: true, get: function () { return __importDefault(monitor_1).default; } });
+var exception_1 = require("./exception");
+Object.defineProperty(exports, "createReporter", { enumerable: true, get: function () { return exception_1.createReporter; } });
+Object.defineProperty(exports, "makeH5Transport", { enumerable: true, get: function () { return exception_1.makeH5Transport; } });
+Object.defineProperty(exports, "ExcReporter", { enumerable: true, get: function () { return exception_1.ExcReporter; } });
+Object.defineProperty(exports, "SDK_VERSION", { enumerable: true, get: function () { return exception_1.SDK_VERSION; } });

package/dist/interface/index.d.ts

@@ -0,0 +1,83 @@
+export interface IMonitorOptions {
+    /** 异常平台上报地址，如 https://host/api/exception/report */
+    endpoint: string;
+    /** 接入项目 projectKey（后台「接入项目」创建后获得） */
+    projectKey: string;
+    /** 客户端版本号 */
+    release?: string;
+    /** 环境 production | development */
+    environment?: string;
+    /** reporter 批量阈值，默认 20 */
+    maxBatch?: number;
+    /** reporter 定时 flush 间隔 ms，默认 30000（30 秒） */
+    flushInterval?: number;
+    userId?: string;
+    /** XHR 超时阈值 ms，默认 60000（1 分钟） */
+    timeoutDuration?: number;
+    maxQueueSize?: number;
+}
+export interface BaseLog {
+    title: string;
+    url: string;
+    userAgent: string;
+    browser: string;
+    device: string;
+    os: string;
+}
+export interface ErrorLog {
+    type: "error";
+    errorType: "jsError" | "promiseError" | "loadResourceError" | "xhrError";
+    message: string;
+    filename?: string;
+    position?: string;
+    stack?: string;
+    selector?: string;
+    isWhiteScreen?: boolean;
+    tagName?: string;
+    xhrData?: {
+        eventType: "load" | "error";
+        url: string;
+        method: string;
+        header: Record<string, unknown>;
+        params: string;
+        duration: number;
+        status: number;
+        response: string;
+    };
+}
+export interface PaintLog {
+    type: "paint";
+    FP?: number;
+    FCP?: number;
+    FMP?: number;
+    LCP?: number;
+}
+export interface TimingLog {
+    type: "timing";
+    DOMContentLoadedTime: number;
+    loadTime: number;
+}
+export interface LongTaskLog {
+    type: "longTask";
+    startTime: number;
+    duration: number;
+    eventType?: string;
+    selector?: string;
+}
+export interface RequestLog {
+    type: "xhr" | "fetch";
+    startTime: number;
+    duration: number;
+    msg: string;
+    success?: boolean;
+    status?: number;
+    url?: string;
+    method?: string;
+    /** 请求发生时页面地址（captureRequest 自动填充） */
+    page?: string;
+}
+export interface BatchRequestLog {
+    type: 'batchXHR';
+    requests: RequestLog[];
+}
+export type MonitorTypeLog = ErrorLog | PaintLog | TimingLog | LongTaskLog | RequestLog | BatchRequestLog;

package/dist/interface/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/modules/err.d.ts

@@ -0,0 +1 @@
+export default function onWindowErr(): void;

package/dist/modules/err.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = onWindowErr;
+const utils_1 = require("../utils");
+function onWindowErr() {
+    window.addEventListener('error', event => {
+        console.log("error event: ", event);
+        // 监听 JS/CSS 资源文件加载错误
+        const target = event.target;
+        let filename;
+        if (target &&
+            (filename =
+                target.src || target.href)) {
+            // 1、数据建模存储
+            const log = {
+                type: "error",
+                errorType: "loadResourceError", // 错误类型 - JS/CSS 资源加载错误
+                message: `${filename} resource loading fail.`,
+                filename, // 报错的文件
+                tagName: target.tagName, // 资源标签名称
+                // body script
+                selector: (0, utils_1.getSelector)(event.target),
+            };
+            console.log("log: ", log);
+            // 2、上报数据
+            // @ts-ignore
+            this.send(log);
+        }
+        else {
+            // 监听 JS 代码执行出错
+            const lastEvent = (0, utils_1.getLastEvent)(); // 监听到错误后，获取到最后一个交互事件
+            const isWhiteScreen = (0, utils_1.checkWhiteScreen)(); // 检查是否白屏
+            // 1.1、数据建模存储
+            const errorLog = {
+                // kind: "stability", // 监控指标的大类
+                type: "error",
+                errorType: "jsError",
+                message: event.message,
+                filename: event.filename,
+                position: `${event.lineno}:${event.colno}`,
+                stack: (0, utils_1.formatStack)(event.error.stack),
+                selector: lastEvent ? (0, utils_1.getSelector)() : "",
+                isWhiteScreen,
+            };
+            console.log("js error log: ", errorLog);
+            // 1.2、上报数据
+            // @ts-ignore
+            this.send(errorLog);
+        }
+    }, true);
+    // promise
+    window.addEventListener('unhandledrejection', event => {
+        console.log("Promise error event: ", event);
+        const lastEvent = (0, utils_1.getLastEvent)(); // 监听到错误后，获取到最后一个交互事件
+        let message;
+        const reason = event.reason; // Promise 失败的原因
+        let filename;
+        let line = 0;
+        let column = 0;
+        let stack = "";
+        if (typeof event.reason === "string") {
+            // 情况 1、是 Promise reject 抛出的错误（没有办法获取 stack 等信息）
+            message = reason;
+        }
+        else if (typeof reason === "object") {
+            message = reason.message;
+            // 情况 2、是 Promise 中 JS 代码执行出错
+            if (reason.stack) {
+                const matchResult = reason.stack.match(/at\s+(.+):(\d+):(\d+)/);
+                filename = matchResult[1];
+                line = matchResult[2];
+                column = matchResult[3];
+                stack = (0, utils_1.formatStack)(reason.stack);
+            }
+        }
+        // 2.1、数据建模存储
+        const errorLog = {
+            type: "error",
+            errorType: "promiseError", // 错误类型 - Promise 代码错误
+            message,
+            filename,
+            position: `${line}:${column}`,
+            stack,
+            selector: lastEvent ? (0, utils_1.getSelector)() : "",
+        };
+        console.log("promise error log: ", errorLog);
+        // 2.2、上报数据
+        // @ts-ignore
+        this.send(errorLog);
+    }, true);
+}

package/dist/modules/index.d.ts

@@ -0,0 +1,5 @@
+export { default as onWindowErr } from './err';
+export { default as onLongTask } from './longTask';
+export { default as onPaint } from './paint';
+export { default as onTiming } from './timing';
+export { default as onXHR } from './xhr';

package/dist/modules/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.onXHR = exports.onTiming = exports.onPaint = exports.onLongTask = exports.onWindowErr = void 0;
+var err_1 = require("./err");
+Object.defineProperty(exports, "onWindowErr", { enumerable: true, get: function () { return __importDefault(err_1).default; } });
+var longTask_1 = require("./longTask");
+Object.defineProperty(exports, "onLongTask", { enumerable: true, get: function () { return __importDefault(longTask_1).default; } });
+var paint_1 = require("./paint");
+Object.defineProperty(exports, "onPaint", { enumerable: true, get: function () { return __importDefault(paint_1).default; } });
+var timing_1 = require("./timing");
+Object.defineProperty(exports, "onTiming", { enumerable: true, get: function () { return __importDefault(timing_1).default; } });
+var xhr_1 = require("./xhr");
+Object.defineProperty(exports, "onXHR", { enumerable: true, get: function () { return __importDefault(xhr_1).default; } });

package/dist/modules/longTask.d.ts

@@ -0,0 +1 @@
+export default function onLongTask(): void;

package/dist/modules/longTask.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = onLongTask;
+const utils_1 = require("../utils");
+function onLongTask() {
+    if (PerformanceObserver) {
+        const observerLongTask = new PerformanceObserver(list => {
+            list.getEntries().forEach(entry => {
+                // 执行时长大于 100 ms
+                if (entry.duration > 100) {
+                    const lastEvent = (0, utils_1.getLastEvent)();
+                    const log = {
+                        type: "longTask",
+                        startTime: entry.startTime, // 开始时间
+                        duration: entry.duration, // 持续时间
+                        selector: lastEvent ? (0, utils_1.getSelector)() : "",
+                        eventType: lastEvent === null || lastEvent === void 0 ? void 0 : lastEvent.type,
+                    };
+                    console.log("longTask log: ", log);
+                    // @ts-ignore
+                    this.send(log);
+                }
+            });
+        });
+        observerLongTask.observe({ entryTypes: ["longtask"] });
+    }
+}

package/dist/modules/paint.d.ts

@@ -0,0 +1 @@
+export default function onPaint(): void;

package/dist/modules/paint.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = onPaint;
+function onPaint() {
+    if (PerformanceObserver) {
+        let FP = null;
+        let FCP = null;
+        let FMP = null;
+        let LCP = null;
+        // 1、监控性能指标 FP（First Paint） 和 FCP（First Contentful Paint）
+        const observerFPAndFCP = new PerformanceObserver(function (entryList) {
+            const perfEntries = entryList.getEntries();
+            for (const perfEntry of perfEntries) {
+                if (perfEntry.name === "first-paint") {
+                    FP = perfEntry;
+                    console.log("首次像素绘制 时间：", FP === null || FP === void 0 ? void 0 : FP.startTime);
+                }
+                else if (perfEntry.name === "first-contentful-paint") {
+                    FCP = perfEntry;
+                    console.log("首次内容绘制 时间：", FCP === null || FCP === void 0 ? void 0 : FCP.startTime);
+                    observerFPAndFCP.disconnect(); // 得到 FCP 后，断开观察，不再观察了
+                }
+            }
+        });
+        // 观察 paint 相关性能指标
+        observerFPAndFCP.observe({ entryTypes: ["paint"] });
+        // 2、监控性能指标：FMP（First Meaningful Paint）
+        const observerFMP = new PerformanceObserver(entryList => {
+            const perfEntries = entryList.getEntries();
+            FMP = perfEntries[0];
+            console.log("首次有意义元素绘制 时间：", FMP === null || FMP === void 0 ? void 0 : FMP.startTime);
+            observerFMP.disconnect(); // 断开观察，不再观察了
+        });
+        observerFMP.observe({ entryTypes: ["element"] });
+        // 3、创建性能观察者，观察 LCP
+        const observerLCP = new PerformanceObserver(entryList => {
+            const perfEntries = entryList.getEntries();
+            LCP = perfEntries[0];
+            console.log("最大内容绘制 时间：", LCP === null || LCP === void 0 ? void 0 : LCP.startTime, perfEntries);
+        });
+        // 观察页面中最大内容的绘制
+        observerLCP.observe({ entryTypes: ["largest-contentful-paint"] });
+        // 上送性能指标
+        window.addEventListener("load", () => {
+            setTimeout(() => {
+                // 在上报性能指标数据的时候，停止 LCP 的观察。
+                observerLCP.disconnect();
+                const log = {
+                    type: "paint",
+                    FP: FP === null || FP === void 0 ? void 0 : FP.startTime, // FP
+                    FCP: FCP === null || FCP === void 0 ? void 0 : FCP.startTime, // FCP
+                    FMP: FMP === null || FMP === void 0 ? void 0 : FMP.startTime, // FMP
+                    LCP: LCP === null || LCP === void 0 ? void 0 : LCP.startTime, // LCP
+                };
+                console.log("paint log: ", log);
+                // @ts-ignore
+                this.send(log);
+            }, 3000);
+        });
+    }
+}

package/dist/modules/timing.d.ts

@@ -0,0 +1 @@
+export default function onTiming(): void;