@guomain/monitor-web 0.1.0

package/web.umd.js

@@ -0,0 +1,717 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.GMMonitor = {}));
+})(this, (function (exports) { 'use strict';
+
+    /**
+     * 默认采集与发送阈值。
+     */
+    const defaultLimits = {
+        maxQueueSize: 50
+    };
+    /**
+     * 创建通用监控实例。
+     * @param config SDK 初始化配置，包含应用标识、上报地址、自定义发送函数、上下文和阈值。
+     */
+    function createMonitor(config) {
+        if (!config.appId) {
+            throw new Error('appId is required');
+        }
+        if (!(config.dsn || config.transport)) {
+            throw new Error('dsn or transport is required');
+        }
+        const mergedLimits = { ...defaultLimits, ...config.limits };
+        const plugins = [];
+        const pluginTeardowns = [];
+        const queue = [];
+        const queuedKeys = new Set();
+        let draining = false;
+        let idleDrainHandle;
+        let started = false;
+        async function defaultTransport(payloads) {
+            if (!config.dsn) {
+                return;
+            }
+            if (typeof navigator !== 'undefined' && typeof navigator.sendBeacon === 'function') {
+                const sent = navigator.sendBeacon(config.dsn, JSON.stringify(payloads));
+                if (sent) {
+                    return;
+                }
+            }
+            // sendBeacon 不可用或返回 false 时回退到 fetch
+            await fetch(config.dsn, {
+                method: 'POST',
+                body: JSON.stringify(payloads),
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+        const setupPlugin = (plugin) => {
+            try {
+                const teardown = plugin.setup(monitor);
+                if (typeof teardown === 'function') {
+                    pluginTeardowns.push(teardown);
+                }
+            }
+            catch (error) {
+                reportSdkError(monitor, error, {
+                    stage: 'plugin',
+                    pluginName: plugin.name
+                });
+            }
+        };
+        const monitor = {
+            config,
+            limits: mergedLimits,
+            start() {
+                if (started) {
+                    return;
+                }
+                started = true;
+                plugins.forEach(plugin => {
+                    setupPlugin(plugin);
+                });
+            },
+            stop() {
+                if (!started) {
+                    return;
+                }
+                started = false;
+                const tasks = pluginTeardowns.splice(0).reverse();
+                tasks.forEach(task => {
+                    task();
+                });
+            },
+            use(plugin) {
+                plugins.push(plugin);
+                if (started) {
+                    setupPlugin(plugin);
+                }
+                return monitor;
+            },
+            capture(event) {
+                if (!started) {
+                    return;
+                }
+                const key = stringifyQueueEvent(event);
+                if (queuedKeys.has(key)) {
+                    return;
+                }
+                if (queue.length >= mergedLimits.maxQueueSize) {
+                    const removed = queue.shift();
+                    if (removed) {
+                        queuedKeys.delete(removed.key);
+                    }
+                }
+                queuedKeys.add(key);
+                queue.push({ event, key });
+                scheduleIdleDrain();
+            },
+            async flush() {
+                await drainQueue();
+            }
+        };
+        async function drainQueue() {
+            if (draining) {
+                return;
+            }
+            cancelIdleDrain();
+            draining = true;
+            try {
+                const batch = queue.splice(0);
+                if (!batch.length) {
+                    return;
+                }
+                batch.forEach(item => {
+                    queuedKeys.delete(item.key);
+                });
+                let context;
+                try {
+                    if (config.context) {
+                        context = typeof config.context === 'function' ? await config.context() : config.context;
+                    }
+                }
+                catch (error) {
+                    reportSdkError(monitor, error, { stage: 'context' });
+                }
+                const payloads = batch.map(({ event }) => ({
+                    ...event,
+                    timestamp: event.timestamp ?? Date.now(),
+                    appId: config.appId,
+                    release: config.release,
+                    context
+                }));
+                try {
+                    await (config.transport ?? defaultTransport)(payloads);
+                }
+                catch (error) {
+                    // transport 失败直接 console.error，不入队重入（避免 sdk-error 走同一故障通道导致风暴）
+                    if (typeof console !== 'undefined' && console.error) {
+                        console.error('[gm-monitor] Transport failed:', error);
+                    }
+                }
+            }
+            finally {
+                draining = false;
+            }
+        }
+        function scheduleIdleDrain() {
+            if (idleDrainHandle !== undefined) {
+                return;
+            }
+            if (typeof requestIdleCallback === 'function') {
+                idleDrainHandle = requestIdleCallback(() => {
+                    idleDrainHandle = undefined;
+                    void drainQueue();
+                });
+                return;
+            }
+            idleDrainHandle = setTimeout(() => {
+                idleDrainHandle = undefined;
+                void drainQueue();
+            }, 16);
+        }
+        function cancelIdleDrain() {
+            if (idleDrainHandle === undefined) {
+                return;
+            }
+            if (typeof cancelIdleCallback === 'function') {
+                cancelIdleCallback(idleDrainHandle);
+            }
+            else {
+                clearTimeout(idleDrainHandle);
+            }
+            idleDrainHandle = undefined;
+        }
+        return monitor;
+    }
+    /**
+     * 把任意错误值归一化为 SDK 事件。
+     * @param type 事件类型，用于标识错误来源。
+     * @param error 原始错误，可以是 Error、字符串或其他未知值。
+     * @param meta 附加 tags 和 extra。
+     */
+    function toErrorEvent(type, error, meta) {
+        if (error instanceof Error) {
+            return {
+                type,
+                message: error.message,
+                stack: error.stack,
+                timestamp: Date.now(),
+                ...meta
+            };
+        }
+        let message;
+        if (typeof error === 'string') {
+            message = error;
+        }
+        else if (error === undefined) {
+            message = 'undefined';
+        }
+        else {
+            try {
+                message = JSON.stringify(error);
+            }
+            catch {
+                message = String(error);
+            }
+        }
+        return {
+            type,
+            message,
+            timestamp: Date.now(),
+            ...meta
+        };
+    }
+    function stringifyQueueEvent(event) {
+        return JSON.stringify({
+            type: event.type,
+            message: event.message,
+            url: event.url,
+            stack: event.stack,
+            filename: event.filename,
+            lineno: event.lineno,
+            colno: event.colno,
+            tags: event.tags,
+            extra: event.extra
+        });
+    }
+    /**
+     * 上报 SDK 自身异常。同名 sdk-error 由 dedup 天然合并，不会风暴。
+     */
+    function reportSdkError(monitor, error, extra) {
+        try {
+            monitor.capture(toErrorEvent('sdk-error', error, { extra }));
+        }
+        catch {
+            // SDK 上报通道自身崩溃时静默吞掉，避免递归。
+            if (typeof console !== 'undefined' && console.error) {
+                console.error('[gm-monitor] SDK internal error:', error);
+            }
+        }
+    }
+
+    /**
+     * 注册浏览器事件并返回清理函数。
+     * @param target 事件目标，目前只处理 window。
+     * @param type 事件类型。
+     * @param listener 事件监听函数。
+     * @param options addEventListener 配置。
+     */
+    function on(target, type, listener, options) {
+        target.addEventListener(type, listener, options);
+        return () => target.removeEventListener(type, listener, options);
+    }
+    /**
+     * 从资源节点读取加载地址。
+     * @param target 触发 error 事件的资源节点。
+     */
+    function getResourceUrl(target) {
+        if (!(target instanceof Element)) {
+            return undefined;
+        }
+        return (target.getAttribute('src') ??
+            target.getAttribute('href') ??
+            target.getAttribute('data') ??
+            undefined);
+    }
+
+    /**
+     * 监听未处理的 Promise rejection。
+     * @param monitor 当前监控实例。
+     */
+    function setupPromiseError(monitor) {
+        return on(window, 'unhandledrejection', event => {
+            monitor.capture(toErrorEvent('promise-error', event.reason));
+        });
+    }
+
+    const requestMonitors = new Set();
+    const xhrInfo = new WeakMap();
+    let originalFetch;
+    let originalOpen;
+    let originalSend;
+    // 全局 transport 执行计数：在任一 monitor 的 transport 调用期间增加，
+    // 用于跳过 transport 自身请求的采集，避免 SDK 自激上报。
+    let activeTransportDepth = 0;
+    /**
+     * 标记一次 transport 调用开始，由 monitor-web 在执行用户 transport 前调用。
+     */
+    function beginTransportScope() {
+        activeTransportDepth += 1;
+    }
+    /**
+     * 标记一次 transport 调用结束。
+     */
+    function endTransportScope() {
+        if (activeTransportDepth > 0) {
+            activeTransportDepth -= 1;
+        }
+    }
+    /**
+     * 安装请求错误监控。
+     * @param monitor 当前监控实例。
+     */
+    function setupRequestError(monitor) {
+        requestMonitors.add(monitor);
+        patchFetch();
+        patchXhr();
+        return () => {
+            requestMonitors.delete(monitor);
+            restoreRequestPatch();
+        };
+    }
+    /**
+     * 对 fetch 做 AOP 包装。
+     */
+    function patchFetch() {
+        if (originalFetch || typeof fetch !== 'function') {
+            return;
+        }
+        originalFetch = fetch;
+        const localFetch = fetch;
+        globalThis.fetch = (async (input, init) => {
+            const info = getFetchInfo(input, init);
+            try {
+                const response = await localFetch(input, init);
+                if (response && !response.ok) {
+                    captureForActiveMonitors({
+                        ...info,
+                        status: response.status,
+                        statusText: response.statusText
+                    });
+                }
+                return response;
+            }
+            catch (error) {
+                captureForActiveMonitors({ ...info, error });
+                throw error;
+            }
+        });
+    }
+    /**
+     * 对 XMLHttpRequest 做 AOP 包装。
+     */
+    function patchXhr() {
+        if (originalOpen || typeof XMLHttpRequest === 'undefined') {
+            return;
+        }
+        const proto = XMLHttpRequest.prototype;
+        originalOpen = proto.open;
+        originalSend = proto.send;
+        proto.open = function open(method, url, ...rest) {
+            xhrInfo.set(this, { method: method.toUpperCase(), url: String(url) });
+            return originalOpen.apply(this, [method, url, ...rest]);
+        };
+        proto.send = function send(...args) {
+            let captured = false;
+            const handleDone = (event) => {
+                if (captured) {
+                    return;
+                }
+                const info = xhrInfo.get(this);
+                if (!info) {
+                    return;
+                }
+                // status === 0 仅在 'error' / 'timeout' 时上报，避免把主动 abort 当成请求错误。
+                if (this.status >= 400 || (this.status === 0 && event.type !== 'loadend')) {
+                    captured = true;
+                    captureForActiveMonitors({
+                        ...info,
+                        status: this.status,
+                        statusText: this.statusText
+                    });
+                }
+            };
+            this.addEventListener('loadend', handleDone, { once: true });
+            this.addEventListener('error', handleDone, { once: true });
+            this.addEventListener('timeout', handleDone, { once: true });
+            return originalSend?.apply(this, args);
+        };
+    }
+    /**
+     * 没有活跃监控实例时还原原生请求方法。
+     */
+    function restoreRequestPatch() {
+        if (requestMonitors.size > 0) {
+            return;
+        }
+        if (originalFetch) {
+            globalThis.fetch = originalFetch;
+            originalFetch = undefined;
+        }
+        if (typeof XMLHttpRequest !== 'undefined' && originalOpen && originalSend) {
+            XMLHttpRequest.prototype.open = originalOpen;
+            XMLHttpRequest.prototype.send = originalSend;
+            originalOpen = undefined;
+            originalSend = undefined;
+        }
+    }
+    /**
+     * 向所有活跃监控实例分发请求错误。
+     * @param info 请求错误信息。
+     */
+    function captureForActiveMonitors(info) {
+        // transport 执行中的请求不入队，避免 SDK 自身上报的请求被采集回送形成自激。
+        if (activeTransportDepth > 0) {
+            return;
+        }
+        requestMonitors.forEach(monitor => {
+            if (!isMonitorDsn(monitor, info.url)) {
+                captureRequestError(monitor, info);
+            }
+        });
+    }
+    /**
+     * 上报单个请求错误事件。
+     * @param monitor 当前监控实例。
+     * @param info 请求错误信息。
+     */
+    function captureRequestError(monitor, info) {
+        monitor.capture({
+            type: 'request-error',
+            message: `Request failed: ${info.method} ${info.url}`,
+            timestamp: Date.now(),
+            url: info.url,
+            extra: { ...info }
+        });
+    }
+    /**
+     * 从 fetch 参数中提取请求方法和地址。
+     * @param input fetch 第一个参数。
+     * @param init fetch 初始化配置。
+     */
+    function getFetchInfo(input, init) {
+        if (input instanceof Request) {
+            return {
+                method: (init?.method ?? input.method ?? 'GET').toUpperCase(),
+                url: input.url
+            };
+        }
+        return {
+            method: (init?.method ?? 'GET').toUpperCase(),
+            url: String(input)
+        };
+    }
+    /**
+     * 判断请求是否为 SDK 自己的上报地址，避免默认 transport 的 fetch 兜底被自采集。
+     * @param monitor 当前监控实例。
+     * @param url 请求地址。
+     */
+    function isMonitorDsn(monitor, url) {
+        const dsn = monitor.config.dsn;
+        if (!dsn) {
+            return false;
+        }
+        return normalizeRequestUrl(url) === normalizeRequestUrl(dsn);
+    }
+    function normalizeRequestUrl(url) {
+        if (typeof URL === 'undefined') {
+            return url;
+        }
+        try {
+            const base = typeof location === 'undefined' ? undefined : location.href;
+            return new URL(url, base).href;
+        }
+        catch {
+            return url;
+        }
+    }
+
+    /**
+     * 监听资源加载错误。
+     * @param monitor 当前监控实例。
+     */
+    function setupResourceError(monitor) {
+        return on(window, 'error', event => {
+            if (event.target === window) {
+                return;
+            }
+            const url = getResourceUrl(event.target);
+            if (!url) {
+                return;
+            }
+            monitor.capture({
+                type: 'resource-error',
+                message: `Resource load failed: ${url}`,
+                url,
+                timestamp: Date.now()
+            });
+        }, true);
+    }
+
+    /**
+     * 监听 JS 运行时错误。
+     * @param monitor 当前监控实例。
+     */
+    function setupRuntimeError(monitor) {
+        return on(window, 'error', event => {
+            if (!('message' in event)) {
+                return;
+            }
+            monitor.capture({
+                type: 'runtime-error',
+                message: event.message,
+                stack: event.error instanceof Error ? event.error.stack : undefined,
+                filename: event.filename,
+                lineno: event.lineno,
+                colno: event.colno,
+                timestamp: Date.now()
+            });
+        }, true);
+    }
+
+    /**
+     * 安装 Web 错误监控能力。
+     * @param monitor 当前监控实例。
+     */
+    function setupWebError(monitor) {
+        const teardowns = [];
+        const setup = [
+            { name: 'runtime', fn: () => setupRuntimeError(monitor) },
+            { name: 'promise', fn: () => setupPromiseError(monitor) },
+            { name: 'resource', fn: () => setupResourceError(monitor) },
+            { name: 'request', fn: () => setupRequestError(monitor) }
+        ];
+        for (const { name, fn } of setup) {
+            try {
+                teardowns.push(fn());
+            }
+            catch {
+                // 单个错误监听器安装失败不影响其他监听器
+                if (typeof console !== 'undefined' && console.warn) {
+                    console.warn(`[gm-monitor] Failed to setup ${name} error listener`);
+                }
+            }
+        }
+        return () => {
+            const cleanupTasks = teardowns.splice(0).reverse();
+            cleanupTasks.forEach(task => {
+                try {
+                    task();
+                }
+                catch {
+                    // 单个清理失败不影响后续
+                }
+            });
+        };
+    }
+
+    /**
+     * 创建 Web 端监控实例。
+     * @param config SDK 初始化配置，包含应用标识、Web 错误开关、Vue app、transport 等。
+     */
+    function createWebMonitor(config) {
+        const monitor = createMonitor({
+            ...config,
+            transport: wrapTransport(config.transport)
+        });
+        const startCore = monitor.start;
+        const stopCore = monitor.stop;
+        const teardowns = [];
+        const ReactBoundary = createReactBoundaryType(monitor);
+        let webStarted = false;
+        monitor.start = () => {
+            if (webStarted) {
+                return;
+            }
+            startCore();
+            try {
+                webStarted = true;
+                if (config.error !== false) {
+                    teardowns.push(setupWebError(monitor));
+                }
+                const teardownVue = setupVue(config, monitor);
+                if (teardownVue) {
+                    teardowns.push(teardownVue);
+                }
+                teardowns.push(setupFlushOnPageUnload(monitor));
+            }
+            catch {
+                webStarted = false;
+                runTeardowns(teardowns);
+                stopCore();
+            }
+        };
+        monitor.stop = () => {
+            if (!webStarted) {
+                stopCore();
+                return;
+            }
+            runTeardowns(teardowns);
+            webStarted = false;
+            stopCore();
+        };
+        monitor.renderReact = (root, element) => {
+            root.render(createReactBoundaryElement(ReactBoundary, element));
+        };
+        return monitor;
+    }
+    /**
+     * 创建 React ErrorBoundary 类型。
+     * @param monitor 当前监控实例，用于在 componentDidCatch 中上报 react-error。
+     */
+    function createReactBoundaryType(monitor) {
+        class MonitorReactBoundary {
+            static getDerivedStateFromError() {
+                return { hasError: true };
+            }
+            constructor(props) {
+                this.state = { hasError: false };
+                this.props = props;
+            }
+            componentDidCatch(error, info) {
+                monitor.capture(toErrorEvent('react-error', error, { extra: { info } }));
+            }
+            render() {
+                return this.state.hasError ? null : this.props.children;
+            }
+        }
+        // React 通过该标记识别 class component，这里避免为了一个边界组件强制引入 React 运行时。
+        Object.defineProperty(MonitorReactBoundary.prototype, 'isReactComponent', {
+            value: {}
+        });
+        return MonitorReactBoundary;
+    }
+    /**
+     * 创建 React element 形态的边界节点。
+     * @param type React ErrorBoundary 类型。
+     * @param children 需要被边界包裹的业务节点。
+     */
+    function createReactBoundaryElement(type, children) {
+        return {
+            $$typeof: Symbol.for('react.element'),
+            type,
+            key: null,
+            ref: null,
+            props: { children },
+            _owner: null
+        };
+    }
+    /**
+     * 接入 Vue 全局错误处理。
+     * @param config SDK 初始化配置，读取其中的 vue.app。
+     * @param monitor 当前监控实例。
+     */
+    function setupVue(config, monitor) {
+        const app = config.vue?.app;
+        if (!app) {
+            return undefined;
+        }
+        const previousHandler = app.config.errorHandler;
+        app.config.errorHandler = (err, instance, info) => {
+            monitor.capture(toErrorEvent('vue-error', err, { extra: { info } }));
+            previousHandler?.(err, instance, info);
+        };
+        return () => {
+            app.config.errorHandler = previousHandler;
+        };
+    }
+    function setupFlushOnPageUnload(monitor) {
+        if (typeof window === 'undefined') {
+            return () => undefined;
+        }
+        const handlePageUnload = () => {
+            void monitor.flush();
+        };
+        window.addEventListener('pagehide', handlePageUnload);
+        window.addEventListener('beforeunload', handlePageUnload);
+        return () => {
+            window.removeEventListener('pagehide', handlePageUnload);
+            window.removeEventListener('beforeunload', handlePageUnload);
+        };
+    }
+    function runTeardowns(teardowns) {
+        const cleanupTasks = teardowns.splice(0).reverse();
+        cleanupTasks.forEach(task => {
+            try {
+                task();
+            }
+            catch {
+                // 单个 teardown 失败不影响后续清理
+            }
+        });
+    }
+    /**
+     * 包装用户 transport：在执行期间标记请求 AOP 跳过自身请求，避免 SDK 自激上报。
+     * 未配置 transport 时返回 undefined，沿用 core 的默认 sendBeacon 路径
+     * （sendBeacon 不经过 fetch 补丁，默认 transport 的 fetch 兜底由 dsn 自排除处理）。
+     */
+    function wrapTransport(transport) {
+        if (!transport) {
+            return undefined;
+        }
+        return async (payloads) => {
+            beginTransportScope();
+            try {
+                await transport(payloads);
+            }
+            finally {
+                endTransportScope();
+            }
+        };
+    }
+
+    exports.createWebMonitor = createWebMonitor;
+
+}));