sobey-monitor-sdk 1.0.2 → 1.0.4

package/dist/index.esm.js

@@ -287,10 +287,13 @@ class Sender {
     /**
      * 使用 sendBeacon 发送
      * 返回 true 表示成功加入队列，false 表示失败需要降级
+     * sendBeacon 发送的 Content-Type 是 text/plain，需要使用 /beacon 接口
      */
     sendByBeacon(url, payload) {
         try {
-            const success = navigator.sendBeacon(url, payload);
+            // sendBeacon 需要使用 /beacon 接口，因为它发送的是 text/plain
+            const beaconUrl = url.replace(/\/report$/, '/beacon');
+            const success = navigator.sendBeacon(beaconUrl, payload);
             if (!success && config.get().debug) {
                 console.warn('[Monitor] sendBeacon returned false, falling back to fetch');
             }
@@ -1358,6 +1361,223 @@ function installBehaviorMonitor() {
     installInputTracker();
 }
 
+/**
+ * Vue 3 框架集成
+ * 捕获 Vue 组件内的渲染错误
+ */
+/**
+ * Vue 3 错误监控插件
+ *
+ * @example
+ * ```ts
+ * import { createApp } from 'vue';
+ * import { VueMonitorPlugin } from 'sobey-monitor-sdk';
+ *
+ * const app = createApp(App);
+ * app.use(VueMonitorPlugin, {
+ *   appId: 'your-app-id',
+ *   dsn: 'http://your-server/api/report',
+ * });
+ * app.mount('#app');
+ * ```
+ */
+const VueMonitorPlugin = {
+    install(app, options) {
+        if (!options || !options.appId || !options.dsn) {
+            console.warn('[Monitor] VueMonitorPlugin requires appId and dsn in options');
+            return;
+        }
+        // 初始化 SDK（如果尚未初始化）
+        try {
+            monitor.init(options);
+        }
+        catch (e) {
+            // SDK 可能已经初始化，忽略错误
+        }
+        // 保存原有的错误处理器
+        const originalErrorHandler = app.config.errorHandler;
+        // 设置 Vue 错误处理器
+        app.config.errorHandler = (err, instance, info) => {
+            // 提取错误信息
+            const error = err instanceof Error ? err : new Error(String(err));
+            // 获取组件名称
+            let componentName = 'Unknown';
+            if (instance) {
+                componentName = instance.$options?.name ||
+                    instance.$.type?.name ||
+                    instance.$.type?.__name ||
+                    'AnonymousComponent';
+            }
+            // 添加面包屑
+            context.addBreadcrumb({
+                type: 'framework',
+                category: 'vue_error',
+                data: {
+                    componentName,
+                    info,
+                    message: error.message,
+                },
+            });
+            // 上报错误
+            reporter.reportError({
+                type: 'vue_error',
+                message: error.message,
+                stack: error.stack,
+                componentName,
+                lifecycleHook: info,
+            });
+            // 调用原有的错误处理器
+            if (typeof originalErrorHandler === 'function') {
+                originalErrorHandler(err, instance, info);
+            }
+        };
+        // 设置警告处理器（仅在开发模式下）
+        if (options.debug) {
+            const originalWarnHandler = app.config.warnHandler;
+            app.config.warnHandler = (msg, instance, trace) => {
+                // 添加面包屑
+                context.addBreadcrumb({
+                    type: 'console',
+                    category: 'vue_warning',
+                    data: { message: msg },
+                });
+                // 调用原有的警告处理器
+                if (typeof originalWarnHandler === 'function') {
+                    originalWarnHandler(msg, instance, trace);
+                }
+            };
+        }
+        if (options.debug) {
+            console.log('[Monitor] Vue plugin installed');
+        }
+    },
+};
+
+/**
+ * React 框架集成
+ * 提供 ErrorBoundary 组件捕获渲染错误
+ */
+/**
+ * 创建 React 错误边界组件
+ *
+ * @param React - React 库引用
+ * @param config - SDK 配置
+ * @returns ErrorBoundary 组件类
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import ReactDOM from 'react-dom';
+ * import { createReactErrorBoundary } from 'sobey-monitor-sdk';
+ *
+ * const ErrorBoundary = createReactErrorBoundary(React, {
+ *   appId: 'your-app-id',
+ *   dsn: 'http://your-server/api/report',
+ * });
+ *
+ * ReactDOM.render(
+ *   <ErrorBoundary fallback={<h1>Something went wrong</h1>}>
+ *     <App />
+ *   </ErrorBoundary>,
+ *   document.getElementById('root')
+ * );
+ * ```
+ */
+function createReactErrorBoundary(React, config) {
+    if (!config || !config.appId || !config.dsn) {
+        console.warn('[Monitor] createReactErrorBoundary requires appId and dsn in config');
+        // 返回一个空的组件
+        return class EmptyBoundary extends React.Component {
+            render() {
+                return this.props.children;
+            }
+        };
+    }
+    // 初始化 SDK（如果尚未初始化）
+    try {
+        monitor.init(config);
+    }
+    catch (e) {
+        // SDK 可能已经初始化，忽略错误
+    }
+    /**
+     * React 错误边界组件
+     */
+    return class ErrorMonitorBoundary extends React.Component {
+        constructor(props) {
+            super(props);
+            this.state = { hasError: false, error: null };
+        }
+        static getDerivedStateFromError(error) {
+            return { hasError: true, error };
+        }
+        componentDidCatch(error, errorInfo) {
+            // 获取组件堆栈
+            const componentStack = errorInfo?.componentStack || '';
+            // 添加面包屑
+            context.addBreadcrumb({
+                type: 'framework',
+                category: 'react_error',
+                data: {
+                    message: error.message,
+                    componentStack: componentStack.substring(0, 500),
+                },
+            });
+            // 上报错误
+            reporter.reportError({
+                type: 'react_error',
+                message: error.message,
+                stack: error.stack,
+                componentStack,
+            });
+            // 调用自定义错误回调
+            if (typeof this.props.onError === 'function') {
+                this.props.onError(error, errorInfo);
+            }
+            if (config.debug) {
+                console.error('[Monitor] React error caught:', error);
+                console.error('[Monitor] Component stack:', componentStack);
+            }
+        }
+        render() {
+            if (this.state.hasError) {
+                // 显示降级 UI
+                return this.props.fallback || null;
+            }
+            return this.props.children;
+        }
+    };
+}
+/**
+ * React Hook: 用于手动上报错误
+ *
+ * @example
+ * ```tsx
+ * import { useMonitorError } from 'sobey-monitor-sdk';
+ *
+ * function MyComponent() {
+ *   const reportError = useMonitorError();
+ *
+ *   const handleClick = async () => {
+ *     try {
+ *       await riskyOperation();
+ *     } catch (error) {
+ *       reportError(error, { action: 'riskyOperation' });
+ *     }
+ *   };
+ *
+ *   return <button onClick={handleClick}>Click</button>;
+ * }
+ * ```
+ */
+function createUseMonitorError(React) {
+    return function useMonitorError() {
+        return React.useCallback((error, extra) => {
+            monitor.captureError(error, extra);
+        }, []);
+    };
+}
+
 /**
  * 前端监控 SDK
  * @description 错误监控、性能监控、行为监控
@@ -1469,5 +1689,5 @@ class MonitorSDK {
 // 导出单例
 const monitor = new MonitorSDK();
 
-export { monitor as default, monitor };
+export { VueMonitorPlugin, createReactErrorBoundary, createUseMonitorError, monitor as default, monitor };
 //# sourceMappingURL=index.esm.js.map