@zhongxiaobing/monitor-react 0.1.0

package/dist/index.js

@@ -0,0 +1,764 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  MonitorErrorBoundary: () => MonitorErrorBoundary,
+  createReactMonitor: () => createReactMonitor,
+  useMonitor: () => useMonitor
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/createReactMonitor.tsx
+var import_react2 = require("react");
+
+// ../monitor-shared/src/utils/uuid.ts
+function createEventId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `evt_${Date.now()}_${Math.random().toString(16).slice(2)}`;
+}
+
+// ../monitor-shared/src/utils/error.ts
+function normalizeError(error) {
+  if (error instanceof Error) {
+    return {
+      name: error.name,
+      message: error.message,
+      stack: error.stack
+    };
+  }
+  if (typeof error === "string") {
+    return {
+      message: error
+    };
+  }
+  if (typeof error === "object" && error !== null && "message" in error && typeof error.message === "string") {
+    const maybeError = error;
+    return {
+      name: typeof maybeError.name === "string" ? maybeError.name : void 0,
+      message: maybeError.message,
+      stack: typeof maybeError.stack === "string" ? maybeError.stack : void 0
+    };
+  }
+  return {
+    message: "Unknown error"
+  };
+}
+
+// ../monitor-shared/src/utils/browser.ts
+function getLocationInfo() {
+  return {
+    url: window.location.href,
+    pathname: window.location.pathname,
+    title: document.title,
+    userAgent: navigator.userAgent
+  };
+}
+
+// ../monitor-transport/src/queue.ts
+var EventQueue = class {
+  constructor() {
+    __publicField(this, "events", []);
+  }
+  add(event) {
+    this.events.push(event);
+  }
+  drain() {
+    const current = [...this.events];
+    this.events = [];
+    return current;
+  }
+  size() {
+    return this.events.length;
+  }
+};
+
+// ../monitor-transport/src/sender.ts
+async function sendEvents(dsn, events) {
+  if (!events.length) return;
+  if (navigator.sendBeacon) {
+    const blob = new Blob([JSON.stringify({ events })], {
+      type: "application/json"
+    });
+    navigator.sendBeacon(dsn, blob);
+    return;
+  }
+  await fetch(dsn, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({ events }),
+    keepalive: true
+  });
+}
+
+// ../monitor-core/src/context.ts
+function createBaseContext(options) {
+  const locationInfo = getLocationInfo();
+  return {
+    appId: options.appId,
+    appName: options.appName,
+    env: options.env,
+    release: options.release,
+    ...locationInfo
+  };
+}
+
+// ../monitor-core/src/plugin-system.ts
+function setupPlugins(plugins, api, options) {
+  const disposers = [];
+  for (const plugin of plugins) {
+    const disposer = plugin.setup({ api, options });
+    if (typeof disposer === "function") {
+      disposers.push(disposer);
+    }
+  }
+  return () => {
+    for (const dispose of disposers) {
+      dispose();
+    }
+  };
+}
+
+// ../monitor-core/src/monitor.ts
+var Monitor = class {
+  constructor(options) {
+    __publicField(this, "queue", new EventQueue());
+    __publicField(this, "options");
+    __publicField(this, "context");
+    __publicField(this, "disposePlugins", null);
+    var _a;
+    this.options = options;
+    this.context = createBaseContext(options);
+    this.disposePlugins = setupPlugins((_a = options.plugins) != null ? _a : [], this, options);
+  }
+  emit(event) {
+    const mergedEvent = {
+      ...this.context,
+      ...event,
+      appId: event.appId || this.context.appId,
+      appName: event.appName || this.context.appName,
+      env: event.env || this.context.env,
+      release: event.release || this.context.release,
+      url: event.url || this.context.url,
+      pathname: event.pathname || this.context.pathname,
+      title: event.title || this.context.title,
+      userAgent: event.userAgent || this.context.userAgent,
+      eventId: event.eventId || createEventId(),
+      timestamp: event.timestamp || Date.now()
+    };
+    const finalEvent = this.options.beforeSend ? this.options.beforeSend(mergedEvent) : mergedEvent;
+    if (!finalEvent) return;
+    this.queue.add(finalEvent);
+    void this.flush();
+  }
+  captureException(error, extra) {
+    const normalized = normalizeError(error);
+    const event = {
+      eventId: "",
+      eventType: "exception",
+      appId: "",
+      env: "",
+      url: "",
+      pathname: "",
+      title: "",
+      timestamp: 0,
+      userAgent: "",
+      extra,
+      error: {
+        name: normalized.name,
+        message: normalized.message,
+        stack: normalized.stack,
+        source: "react"
+      }
+    };
+    this.emit(event);
+  }
+  async flush() {
+    const events = this.queue.drain();
+    await sendEvents(this.options.dsn, events);
+  }
+  destroy() {
+    var _a;
+    (_a = this.disposePlugins) == null ? void 0 : _a.call(this);
+    this.disposePlugins = null;
+  }
+};
+function initMonitor(options) {
+  return new Monitor(options);
+}
+
+// ../monitor-plugin-blank-screen/src/dedupe.ts
+function normalizeScore(score) {
+  return score.toFixed(1);
+}
+function createDedupeKey(input) {
+  return [input.pathname, input.trigger, normalizeScore(input.score)].join("|");
+}
+function createBlankScreenDedupe(windowMs) {
+  const cache = /* @__PURE__ */ new Map();
+  function shouldReport(input) {
+    const now = Date.now();
+    const key = createDedupeKey(input);
+    const lastReportedAt = cache.get(key);
+    if (!lastReportedAt || now - lastReportedAt > windowMs) {
+      cache.set(key, now);
+      return true;
+    }
+    return false;
+  }
+  function cleanup() {
+    const now = Date.now();
+    for (const [key, timestamp] of cache.entries()) {
+      if (now - timestamp > windowMs) {
+        cache.delete(key);
+      }
+    }
+  }
+  return {
+    shouldReport,
+    cleanup
+  };
+}
+
+// ../monitor-plugin-blank-screen/src/root.ts
+function getRootElement(rootSelector) {
+  if (rootSelector) {
+    const customRoot = document.querySelector(rootSelector);
+    if (customRoot) {
+      return customRoot;
+    }
+  }
+  const appRoot = document.querySelector("#app");
+  if (appRoot) {
+    return appRoot;
+  }
+  const reactRoot = document.querySelector("#root");
+  if (reactRoot) {
+    return reactRoot;
+  }
+  return document.body;
+}
+
+// ../monitor-plugin-blank-screen/src/sampler.ts
+var DEFAULT_SAMPLE_POINTS = [
+  [0.5, 0.5],
+  [0.2, 0.2],
+  [0.5, 0.2],
+  [0.8, 0.2],
+  [0.2, 0.5],
+  [0.8, 0.5],
+  [0.2, 0.8],
+  [0.5, 0.8],
+  [0.8, 0.8]
+];
+function getSamplePoints(samplePoints) {
+  return (samplePoints == null ? void 0 : samplePoints.length) ? samplePoints : DEFAULT_SAMPLE_POINTS;
+}
+function sampleElements(points) {
+  const width = window.innerWidth;
+  const height = window.innerHeight;
+  return points.map(([xRatio, yRatio]) => {
+    const x = Math.floor(width * xRatio);
+    const y = Math.floor(height * yRatio);
+    const element = document.elementFromPoint(x, y);
+    return {
+      x,
+      y,
+      element
+    };
+  });
+}
+
+// ../monitor-plugin-blank-screen/src/score.ts
+function matchesIgnoreSelectors(element, ignoreSelectors) {
+  return ignoreSelectors.some((selector) => {
+    try {
+      return element.matches(selector) || !!element.closest(selector);
+    } catch {
+      return false;
+    }
+  });
+}
+function isContainerElement(element, rootElement) {
+  const tagName = element.tagName.toLowerCase();
+  if (tagName === "html" || tagName === "body") {
+    return true;
+  }
+  if (element === rootElement) {
+    return true;
+  }
+  return false;
+}
+function getElementSummary(element) {
+  if (!element) return "null";
+  const tagName = element.tagName.toLowerCase();
+  const id = element.id ? `#${element.id}` : "";
+  const className = typeof element.className === "string" && element.className.trim() ? `.${element.className.trim().split(/\s+/).join(".")}` : "";
+  return `${tagName}${id}${className}`;
+}
+function calculateBlankScore(sampledElements, rootElement, ignoreSelectors) {
+  let blankCount = 0;
+  const domSummary = sampledElements.map(({ element }) => {
+    if (!element) {
+      blankCount += 1;
+      return "null";
+    }
+    if (matchesIgnoreSelectors(element, ignoreSelectors)) {
+      blankCount += 1;
+      return `${getElementSummary(element)}(ignored)`;
+    }
+    if (isContainerElement(element, rootElement)) {
+      blankCount += 1;
+      return `${getElementSummary(element)}(container)`;
+    }
+    return getElementSummary(element);
+  });
+  return {
+    score: sampledElements.length ? blankCount / sampledElements.length : 0,
+    domSummary
+  };
+}
+
+// ../monitor-plugin-blank-screen/src/detect.ts
+function runBlankScreenCheck(options) {
+  const {
+    rootSelector,
+    scoreThreshold = 0.8,
+    samplePoints,
+    ignoreSelectors = []
+  } = options;
+  const rootElement = getRootElement(rootSelector);
+  const points = getSamplePoints(samplePoints);
+  const sampledElements = sampleElements(points);
+  const { score, domSummary } = calculateBlankScore(
+    sampledElements,
+    rootElement,
+    ignoreSelectors
+  );
+  if (score < scoreThreshold) {
+    return null;
+  }
+  return {
+    score,
+    rootSelector,
+    domSummary
+  };
+}
+
+// ../monitor-plugin-blank-screen/src/normalize.ts
+function createBlankScreenEvent({
+  score,
+  rootSelector,
+  domSummary,
+  trigger
+}) {
+  return {
+    eventId: "",
+    eventType: "blank_screen",
+    appId: "",
+    env: "",
+    url: "",
+    pathname: "",
+    title: "",
+    timestamp: 0,
+    userAgent: "",
+    blankScreen: {
+      score,
+      rootSelector,
+      domSummary,
+      readyState: document.readyState,
+      trigger
+    }
+  };
+}
+
+// ../monitor-plugin-blank-screen/src/route-change.ts
+function registerRouteChangeListener(onRouteChange) {
+  const originalPushState = history.pushState;
+  const originalReplaceState = history.replaceState;
+  const handleRouteChange = () => {
+    onRouteChange();
+  };
+  history.pushState = function(...args) {
+    const result = originalPushState.apply(this, args);
+    handleRouteChange();
+    return result;
+  };
+  history.replaceState = function(...args) {
+    const result = originalReplaceState.apply(this, args);
+    handleRouteChange();
+    return result;
+  };
+  window.addEventListener("popstate", handleRouteChange);
+  window.addEventListener("hashchange", handleRouteChange);
+  return () => {
+    history.pushState = originalPushState;
+    history.replaceState = originalReplaceState;
+    window.removeEventListener("popstate", handleRouteChange);
+    window.removeEventListener("hashchange", handleRouteChange);
+  };
+}
+
+// ../monitor-plugin-blank-screen/src/index.ts
+function blankScreenPlugin(options = {}) {
+  const {
+    delayMs = 3e3,
+    detectOnRouteChange = true,
+    routeChangeDelayMs = 2e3,
+    dedupeWindowMs = 1e4
+  } = options;
+  return {
+    name: "blank-screen-plugin",
+    setup({ api }) {
+      if (typeof window === "undefined" || typeof document === "undefined") {
+        return;
+      }
+      const dedupe = createBlankScreenDedupe(dedupeWindowMs);
+      const emitIfNeeded = (trigger) => {
+        dedupe.cleanup();
+        const result = runBlankScreenCheck(options);
+        if (!result) {
+          return;
+        }
+        const pathname = window.location.pathname;
+        const shouldReport = dedupe.shouldReport({
+          pathname,
+          trigger,
+          score: result.score
+        });
+        if (!shouldReport) {
+          return;
+        }
+        api.emit(
+          createBlankScreenEvent({
+            score: result.score,
+            rootSelector: result.rootSelector,
+            domSummary: result.domSummary,
+            trigger
+          })
+        );
+      };
+      const initialTimer = window.setTimeout(() => {
+        emitIfNeeded("initial");
+      }, delayMs);
+      let routeTimer = null;
+      const disposeRouteChange = detectOnRouteChange ? registerRouteChangeListener(() => {
+        if (routeTimer !== null) {
+          window.clearTimeout(routeTimer);
+        }
+        routeTimer = window.setTimeout(() => {
+          emitIfNeeded("route_change");
+        }, routeChangeDelayMs);
+      }) : () => {
+      };
+      return () => {
+        window.clearTimeout(initialTimer);
+        if (routeTimer !== null) {
+          window.clearTimeout(routeTimer);
+        }
+        disposeRouteChange();
+      };
+    }
+  };
+}
+
+// ../monitor-plugin-error/src/normalize.ts
+function createExceptionEvent({
+  error,
+  source
+}) {
+  const normalized = normalizeError(error);
+  return {
+    eventId: "",
+    eventType: "exception",
+    appId: "",
+    env: "",
+    url: "",
+    pathname: "",
+    title: "",
+    timestamp: 0,
+    userAgent: "",
+    error: {
+      name: normalized.name,
+      message: normalized.message,
+      stack: normalized.stack,
+      source
+    }
+  };
+}
+
+// ../monitor-plugin-error/src/unhandledrejection.ts
+function registerUnhandledRejection(api) {
+  const handler = (event) => {
+    const exceptionEvent = createExceptionEvent({
+      error: event.reason,
+      source: "unhandledrejection"
+    });
+    api.emit(exceptionEvent);
+  };
+  window.addEventListener("unhandledrejection", handler);
+  return () => {
+    window.removeEventListener("unhandledrejection", handler);
+  };
+}
+
+// ../monitor-plugin-error/src/onerror.ts
+function registerWindowOnError(api) {
+  const handler = (message, _source, _lineno, _colno, error) => {
+    const targetError = error != null ? error : message;
+    const event = createExceptionEvent({
+      error: targetError,
+      source: "window.onerror"
+    });
+    api.emit(event);
+    return false;
+  };
+  window.onerror = handler;
+  return () => {
+    if (window.onerror === handler) {
+      window.onerror = null;
+    }
+  };
+}
+
+// ../monitor-plugin-error/src/index.ts
+function errorPlugin(options = {}) {
+  const {
+    captureOnError = true,
+    captureUnhandledRejection = true
+  } = options;
+  return {
+    name: "error-plugin",
+    setup({ api }) {
+      const disposers = [];
+      if (captureOnError) {
+        disposers.push(registerWindowOnError(api));
+      }
+      if (captureUnhandledRejection) {
+        disposers.push(registerUnhandledRejection(api));
+      }
+      return () => {
+        for (const dispose of disposers) {
+          dispose();
+        }
+      };
+    }
+  };
+}
+
+// ../monitor-plugin-network/src/normalize.ts
+function createHttpErrorEvent({
+  url,
+  method,
+  status,
+  duration,
+  responseMessage
+}) {
+  return {
+    eventId: "",
+    eventType: "http_error",
+    appId: "",
+    env: "",
+    url: "",
+    pathname: "",
+    title: "",
+    timestamp: 0,
+    userAgent: "",
+    request: {
+      url,
+      method,
+      status,
+      duration,
+      success: false,
+      source: "fetch"
+    },
+    response: {
+      message: responseMessage
+    }
+  };
+}
+
+// ../monitor-plugin-network/src/url.ts
+function resolveUrlObject(url) {
+  return new URL(url, window.location.origin);
+}
+function isMonitorRequest(requestUrl, dsn) {
+  try {
+    const request = resolveUrlObject(requestUrl);
+    const target = resolveUrlObject(dsn);
+    return request.origin === target.origin && request.pathname === target.pathname;
+  } catch {
+    return requestUrl === dsn;
+  }
+}
+
+// ../monitor-plugin-network/src/patch-fetch.ts
+function patchFetch(api, sdkOptions, options) {
+  if (typeof window === "undefined" || typeof window.fetch !== "function") {
+    return () => {
+    };
+  }
+  const originalFetch = window.fetch.bind(window);
+  const {
+    capture5xx = true,
+    captureNetworkError = true
+  } = options;
+  window.fetch = async (input, init) => {
+    const method = ((init == null ? void 0 : init.method) || "GET").toUpperCase();
+    const requestUrl = typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+    if (isMonitorRequest(requestUrl, sdkOptions.dsn)) {
+      return originalFetch(input, init);
+    }
+    const startedAt = Date.now();
+    try {
+      const response = await originalFetch(input, init);
+      const duration = Date.now() - startedAt;
+      if (capture5xx && response.status >= 500) {
+        api.emit(
+          createHttpErrorEvent({
+            url: requestUrl,
+            method,
+            status: response.status,
+            duration,
+            responseMessage: response.statusText
+          })
+        );
+      }
+      return response;
+    } catch (error) {
+      const duration = Date.now() - startedAt;
+      if (captureNetworkError) {
+        api.emit(
+          createHttpErrorEvent({
+            url: requestUrl,
+            method,
+            duration,
+            responseMessage: error instanceof Error ? error.message : "Fetch request failed"
+          })
+        );
+      }
+      throw error;
+    }
+  };
+  return () => {
+    window.fetch = originalFetch;
+  };
+}
+
+// ../monitor-plugin-network/src/index.ts
+function networkPlugin(options = {}) {
+  return {
+    name: "network-plugin",
+    setup({ api, options: sdkOptions }) {
+      const disposeFetch = patchFetch(api, sdkOptions, options);
+      return () => {
+        disposeFetch();
+      };
+    }
+  };
+}
+
+// src/MonitorErrorBoundary.tsx
+var import_react = require("react");
+var MonitorErrorBoundary = class extends import_react.Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "state", {
+      hasError: false
+    });
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error, info) {
+    this.props.monitor.captureException(error, {
+      componentStack: info.componentStack
+    });
+  }
+  render() {
+    var _a;
+    if (this.state.hasError) {
+      return (_a = this.props.fallback) != null ? _a : null;
+    }
+    return this.props.children;
+  }
+};
+
+// src/createReactMonitor.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var MonitorContext = (0, import_react2.createContext)(null);
+function createReactMonitor(options) {
+  var _a;
+  const monitor = initMonitor({
+    ...options,
+    plugins: [
+      ...getDefaultPlugins(options),
+      ...(_a = options.plugins) != null ? _a : []
+    ]
+  });
+  function MonitorRoot({ children, fallback }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonitorContext.Provider, { value: monitor, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonitorErrorBoundary, { monitor, fallback: fallback != null ? fallback : options.fallback, children }) });
+  }
+  function withMonitor(Component2) {
+    return function WrappedComponent(props) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonitorRoot, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component2, { ...props }) });
+    };
+  }
+  return {
+    monitor,
+    MonitorRoot,
+    withMonitor
+  };
+}
+function useMonitor() {
+  const monitor = (0, import_react2.useContext)(MonitorContext);
+  if (!monitor) {
+    throw new Error("useMonitor must be used within MonitorRoot");
+  }
+  return monitor;
+}
+function getDefaultPlugins(options) {
+  var _a;
+  const disabled = new Set((_a = options.disableDefaultPlugins) != null ? _a : []);
+  const plugins = [];
+  if (!disabled.has("error")) {
+    plugins.push(errorPlugin(options.error));
+  }
+  if (!disabled.has("network")) {
+    plugins.push(networkPlugin(options.network));
+  }
+  if (!disabled.has("blankScreen")) {
+    plugins.push(blankScreenPlugin(options.blankScreen));
+  }
+  return plugins;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MonitorErrorBoundary,
+  createReactMonitor,
+  useMonitor
+});
+//# sourceMappingURL=index.js.map