@error-explorer/vue 1.1.1

package/dist/index.js

@@ -0,0 +1,639 @@
+import { ErrorExplorer } from '@error-explorer/browser';
+export { ErrorExplorer } from '@error-explorer/browser';
+import { defineComponent, ref, onErrorCaptured, h, inject, getCurrentInstance, onMounted, onUnmounted } from 'vue';
+
+// src/plugin.ts
+function getComponentName(instance) {
+  if (!instance) return void 0;
+  const options = instance.$.type;
+  return options.name || options.__name || extractNameFromFile(options.__file);
+}
+function extractNameFromFile(file) {
+  if (!file) return void 0;
+  const match = file.match(/([^/\\]+)\.vue$/);
+  return match ? match[1] : void 0;
+}
+function getComponentTrace(instance) {
+  const trace = [];
+  let current = instance;
+  while (current) {
+    const name = getComponentName(current);
+    if (name) {
+      trace.push(name);
+    }
+    current = current.$.parent?.proxy ?? null;
+  }
+  return trace;
+}
+function serializeProps(props, maxDepth) {
+  const serialize = (value, depth) => {
+    if (depth > maxDepth) {
+      return "[Max depth reached]";
+    }
+    if (value === null || value === void 0) {
+      return value;
+    }
+    if (typeof value === "function") {
+      return "[Function]";
+    }
+    if (typeof value === "symbol") {
+      return value.toString();
+    }
+    if (value instanceof Date) {
+      return value.toISOString();
+    }
+    if (value instanceof Error) {
+      return { name: value.name, message: value.message };
+    }
+    if (Array.isArray(value)) {
+      return value.slice(0, 10).map((item) => serialize(item, depth + 1));
+    }
+    if (typeof value === "object") {
+      const serialized = {};
+      const keys = Object.keys(value).slice(0, 20);
+      for (const key of keys) {
+        serialized[key] = serialize(value[key], depth + 1);
+      }
+      return serialized;
+    }
+    return value;
+  };
+  return serialize(props, 0);
+}
+function buildVueContext(instance, info, options) {
+  const context = {
+    info
+  };
+  if (options.captureComponentName !== false && instance) {
+    context.name = getComponentName(instance);
+    const type = instance.$.type;
+    if (type.__file) {
+      context.file = type.__file;
+    }
+    context.trace = getComponentTrace(instance);
+  }
+  if (options.captureComponentProps && instance) {
+    const props = instance.$.props;
+    if (props && Object.keys(props).length > 0) {
+      context.props = serializeProps(props, options.propsDepth ?? 2);
+    }
+  }
+  return context;
+}
+var originalErrorHandler;
+var originalWarnHandler;
+function setupErrorHandler(app, options) {
+  if (options.vueErrorHandler === false) {
+    return;
+  }
+  originalErrorHandler = app.config.errorHandler;
+  app.config.errorHandler = (err, instance, info) => {
+    if (options.beforeVueCapture) {
+      const error2 = err instanceof Error ? err : new Error(String(err));
+      if (!options.beforeVueCapture(error2, instance, info)) {
+        if (originalErrorHandler) {
+          originalErrorHandler(err, instance, info);
+        }
+        return;
+      }
+    }
+    const vueContext = buildVueContext(instance, info, options);
+    ErrorExplorer.addBreadcrumb({
+      type: "error",
+      category: "vue.error",
+      message: err instanceof Error ? err.message : String(err),
+      level: "error",
+      data: {
+        component: vueContext.name,
+        info: vueContext.info
+      }
+    });
+    const error = err instanceof Error ? err : new Error(String(err));
+    ErrorExplorer.captureException(error, {
+      tags: {
+        "vue.component": vueContext.name || "unknown",
+        "vue.info": info
+      },
+      extra: {
+        vue: vueContext
+      }
+    });
+    if (originalErrorHandler) {
+      originalErrorHandler(err, instance, info);
+    }
+    if (options.environment === "development" || import.meta.env?.DEV) {
+      console.error("[Vue Error]", err);
+    }
+  };
+}
+function setupWarnHandler(app, options) {
+  const enableWarn = options.vueWarnHandler ?? (options.environment === "development" || import.meta.env?.DEV);
+  if (!enableWarn) {
+    return;
+  }
+  originalWarnHandler = app.config.warnHandler;
+  app.config.warnHandler = (msg, instance, trace) => {
+    const componentName = getComponentName(instance);
+    ErrorExplorer.addBreadcrumb({
+      type: "debug",
+      category: "vue.warn",
+      message: msg,
+      level: "warning",
+      data: {
+        component: componentName,
+        trace: trace.split("\n").slice(0, 5)
+      }
+    });
+    if (originalWarnHandler) {
+      originalWarnHandler(msg, instance, trace);
+    }
+    if (import.meta.env?.DEV) {
+      console.warn("[Vue Warn]", msg);
+      if (trace) {
+        console.warn(trace);
+      }
+    }
+  };
+}
+function restoreHandlers(app) {
+  if (originalErrorHandler !== void 0) {
+    app.config.errorHandler = originalErrorHandler;
+    originalErrorHandler = void 0;
+  }
+  if (originalWarnHandler !== void 0) {
+    app.config.warnHandler = originalWarnHandler;
+    originalWarnHandler = void 0;
+  }
+}
+function createErrorExplorerPlugin(options = {}) {
+  return {
+    install(app) {
+      if (!ErrorExplorer.isInitialized()) {
+        ErrorExplorer.init(options);
+      }
+      setupErrorHandler(app, options);
+      setupWarnHandler(app, options);
+      app.provide("errorExplorer", ErrorExplorer);
+      app.config.globalProperties.$errorExplorer = ErrorExplorer;
+      ErrorExplorer.addBreadcrumb({
+        type: "navigation",
+        category: "vue.lifecycle",
+        message: "Vue app mounted",
+        level: "info"
+      });
+    }
+  };
+}
+function defaultGetRouteName(route) {
+  if (route.name && typeof route.name === "string") {
+    return route.name;
+  }
+  return route.path || "/";
+}
+function buildRouteData(route, options) {
+  const data = {
+    path: route.path,
+    name: route.name,
+    fullPath: route.fullPath
+  };
+  if (options.trackParams && Object.keys(route.params).length > 0) {
+    data.params = { ...route.params };
+  }
+  if (options.trackQuery && Object.keys(route.query).length > 0) {
+    data.query = { ...route.query };
+  }
+  if (route.meta && Object.keys(route.meta).length > 0) {
+    const safeMeta = {};
+    for (const [key, value] of Object.entries(route.meta)) {
+      if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+        safeMeta[key] = value;
+      }
+    }
+    if (Object.keys(safeMeta).length > 0) {
+      data.meta = safeMeta;
+    }
+  }
+  return data;
+}
+function setupRouterIntegration(router, options = {}) {
+  if (options.trackNavigation === false) {
+    return () => {
+    };
+  }
+  const getRouteName = options.getRouteName || defaultGetRouteName;
+  let navigationStartTime = null;
+  const beforeEachGuard = router.beforeEach((to, from) => {
+    navigationStartTime = performance.now();
+    if (from.name || from.path !== "/") {
+      const shouldAdd = options.beforeNavigationBreadcrumb ? options.beforeNavigationBreadcrumb(from, to) : true;
+      if (shouldAdd) {
+        ErrorExplorer.addBreadcrumb({
+          type: "navigation",
+          category: "router",
+          message: `Navigating from ${getRouteName(from)} to ${getRouteName(to)}`,
+          level: "info",
+          data: {
+            from: buildRouteData(from, options),
+            to: buildRouteData(to, options)
+          }
+        });
+      }
+    }
+    return true;
+  });
+  const afterEachGuard = router.afterEach((to, from, failure) => {
+    const duration = navigationStartTime ? performance.now() - navigationStartTime : void 0;
+    navigationStartTime = null;
+    if (failure) {
+      ErrorExplorer.addBreadcrumb({
+        type: "navigation",
+        category: "router.error",
+        message: `Navigation failed to ${getRouteName(to)}`,
+        level: "error",
+        data: {
+          to: buildRouteData(to, options),
+          error: failure.message,
+          type: failure.type,
+          duration
+        }
+      });
+      if (failure.type !== 4) {
+        ErrorExplorer.captureException(failure, {
+          tags: {
+            "router.error": "navigation_failure",
+            "router.to": getRouteName(to)
+          }
+        });
+      }
+    } else {
+      ErrorExplorer.addBreadcrumb({
+        type: "navigation",
+        category: "router",
+        message: `Navigated to ${getRouteName(to)}`,
+        level: "info",
+        data: {
+          route: buildRouteData(to, options),
+          duration
+        }
+      });
+    }
+  });
+  const errorHandler = router.onError((error) => {
+    ErrorExplorer.addBreadcrumb({
+      type: "error",
+      category: "router.error",
+      message: error.message,
+      level: "error"
+    });
+    ErrorExplorer.captureException(error, {
+      tags: {
+        "router.error": "unhandled"
+      }
+    });
+  });
+  return () => {
+    beforeEachGuard();
+    afterEachGuard();
+    errorHandler();
+  };
+}
+function createRouterIntegration(options = {}) {
+  let cleanup = null;
+  return {
+    /**
+     * Install the router integration
+     */
+    install(router) {
+      cleanup = setupRouterIntegration(router, options);
+    },
+    /**
+     * Uninstall the router integration
+     */
+    uninstall() {
+      if (cleanup) {
+        cleanup();
+        cleanup = null;
+      }
+    }
+  };
+}
+var ErrorBoundary = defineComponent({
+  name: "ErrorBoundary",
+  props: {
+    /**
+     * Whether to capture the error to Error Explorer
+     */
+    capture: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Additional tags to add when capturing
+     */
+    tags: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Additional context to add when capturing
+     */
+    context: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Fallback component to render when an error occurs
+     */
+    fallback: {
+      type: [Object, Function, null],
+      default: null
+    },
+    /**
+     * Whether to stop error propagation
+     */
+    stopPropagation: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: {
+    /**
+     * Emitted when an error is caught
+     */
+    error: (error, info) => true,
+    /**
+     * Emitted when the error state is reset
+     */
+    reset: () => true
+  },
+  setup(props, { slots, emit, expose }) {
+    const error = ref(null);
+    const errorInfo = ref("");
+    const reset = () => {
+      error.value = null;
+      errorInfo.value = "";
+      emit("reset");
+    };
+    onErrorCaptured((err, instance, info) => {
+      const capturedError = err instanceof Error ? err : new Error(String(err));
+      error.value = capturedError;
+      errorInfo.value = info;
+      emit("error", capturedError, info);
+      ErrorExplorer.addBreadcrumb({
+        type: "error",
+        category: "vue.errorBoundary",
+        message: capturedError.message,
+        level: "error",
+        data: {
+          info,
+          component: instance?.$.type ? instance.$.type.name : void 0
+        }
+      });
+      if (props.capture) {
+        ErrorExplorer.captureException(capturedError, {
+          tags: {
+            "errorBoundary": "true",
+            "vue.info": info,
+            ...props.tags
+          },
+          extra: {
+            errorBoundary: {
+              info,
+              context: props.context
+            }
+          }
+        });
+      }
+      return props.stopPropagation;
+    });
+    expose({
+      reset,
+      error
+    });
+    return () => {
+      if (error.value) {
+        if (slots.fallback) {
+          return slots.fallback({
+            error: error.value,
+            info: errorInfo.value,
+            reset
+          });
+        }
+        if (props.fallback) {
+          if (typeof props.fallback === "function") {
+            return props.fallback();
+          }
+          return props.fallback;
+        }
+        return h("div", { class: "error-boundary-fallback" }, [
+          h("p", { style: "color: red;" }, `Error: ${error.value.message}`),
+          h(
+            "button",
+            {
+              onClick: reset,
+              style: "margin-top: 8px; padding: 4px 12px; cursor: pointer;"
+            },
+            "Try Again"
+          )
+        ]);
+      }
+      return slots.default?.();
+    };
+  }
+});
+function withErrorBoundary(Component, options = {}) {
+  return defineComponent({
+    name: `WithErrorBoundary(${Component.name || "Component"})`,
+    setup(_, { attrs, slots }) {
+      return () => h(
+        ErrorBoundary,
+        {
+          capture: options.capture ?? true,
+          tags: options.tags ?? {},
+          context: options.context ?? {},
+          fallback: options.fallback ?? null,
+          onError: options.onError
+        },
+        {
+          default: () => h(Component, attrs, slots)
+        }
+      );
+    }
+  });
+}
+var ErrorExplorerKey = /* @__PURE__ */ Symbol("errorExplorer");
+function useErrorExplorer() {
+  const injected = inject(ErrorExplorerKey, null) || inject("errorExplorer", null);
+  const errorExplorer = injected || ErrorExplorer;
+  return {
+    /**
+     * Check if Error Explorer is initialized
+     */
+    isInitialized: () => errorExplorer.isInitialized(),
+    /**
+     * Capture an exception
+     */
+    captureException: (error, context) => errorExplorer.captureException(error, context),
+    /**
+     * Capture a message
+     */
+    captureMessage: (message, level) => errorExplorer.captureMessage(message, level),
+    /**
+     * Add a breadcrumb
+     */
+    addBreadcrumb: (breadcrumb) => errorExplorer.addBreadcrumb(breadcrumb),
+    /**
+     * Set user context
+     */
+    setUser: (user) => errorExplorer.setUser(user),
+    /**
+     * Clear user context
+     */
+    clearUser: () => errorExplorer.clearUser(),
+    /**
+     * Set a tag
+     */
+    setTag: (key, value) => errorExplorer.setTag(key, value),
+    /**
+     * Set multiple tags
+     */
+    setTags: (tags) => errorExplorer.setTags(tags),
+    /**
+     * Set extra context
+     */
+    setExtra: (extra) => errorExplorer.setExtra(extra),
+    /**
+     * Set named context
+     */
+    setContext: (name, context) => errorExplorer.setContext(name, context),
+    /**
+     * Flush pending events
+     */
+    flush: (timeout) => errorExplorer.flush(timeout),
+    /**
+     * Close the SDK
+     */
+    close: (timeout) => errorExplorer.close(timeout)
+  };
+}
+function useComponentBreadcrumbs() {
+  const instance = getCurrentInstance();
+  const componentName = instance?.type ? instance.type.name || instance.type.__name || "Unknown" : "Unknown";
+  onMounted(() => {
+    ErrorExplorer.addBreadcrumb({
+      type: "debug",
+      category: "vue.lifecycle",
+      message: `${componentName} mounted`,
+      level: "debug"
+    });
+  });
+  onUnmounted(() => {
+    ErrorExplorer.addBreadcrumb({
+      type: "debug",
+      category: "vue.lifecycle",
+      message: `${componentName} unmounted`,
+      level: "debug"
+    });
+  });
+}
+function useActionTracker() {
+  const instance = getCurrentInstance();
+  const componentName = instance?.type ? instance.type.name || instance.type.__name || "Unknown" : "Unknown";
+  return {
+    /**
+     * Track a user action
+     */
+    trackAction: (action, data) => {
+      ErrorExplorer.addBreadcrumb({
+        type: "user-action",
+        category: "action",
+        message: action,
+        level: "info",
+        data: {
+          component: componentName,
+          ...data
+        }
+      });
+    },
+    /**
+     * Track a UI interaction
+     */
+    trackInteraction: (element, action, data) => {
+      ErrorExplorer.addBreadcrumb({
+        type: "user-action",
+        category: `ui.${action}`,
+        message: `${action} on ${element}`,
+        level: "info",
+        data: {
+          component: componentName,
+          element,
+          ...data
+        }
+      });
+    }
+  };
+}
+function useErrorHandler(defaultContext) {
+  const instance = getCurrentInstance();
+  const componentName = instance?.type ? instance.type.name || instance.type.__name || "Unknown" : "Unknown";
+  const handleError = (error, context) => {
+    const err = error instanceof Error ? error : new Error(String(error));
+    ErrorExplorer.captureException(err, {
+      ...defaultContext,
+      ...context,
+      tags: {
+        "vue.component": componentName,
+        ...defaultContext?.tags,
+        ...context?.tags
+      }
+    });
+    return err;
+  };
+  const wrapAsync = (fn, context) => {
+    return async (...args) => {
+      try {
+        return await fn(...args);
+      } catch (error) {
+        handleError(error, context);
+        return void 0;
+      }
+    };
+  };
+  const tryCatch = (fn, context) => {
+    try {
+      return fn();
+    } catch (error) {
+      handleError(error, context);
+      return void 0;
+    }
+  };
+  return {
+    handleError,
+    wrapAsync,
+    tryCatch
+  };
+}
+function useUserContext(user) {
+  const setUserFromValue = (value) => {
+    if (value) {
+      ErrorExplorer.setUser(value);
+    } else {
+      ErrorExplorer.clearUser();
+    }
+  };
+  if (user && typeof user === "object" && "value" in user) {
+    const refValue = user.value;
+    setUserFromValue(refValue);
+  } else {
+    setUserFromValue(user);
+  }
+  return {
+    setUser: (newUser) => ErrorExplorer.setUser(newUser),
+    clearUser: () => ErrorExplorer.clearUser()
+  };
+}
+var src_default = createErrorExplorerPlugin;
+
+export { ErrorBoundary, ErrorExplorerKey, createErrorExplorerPlugin, createRouterIntegration, src_default as default, restoreHandlers, setupRouterIntegration, useActionTracker, useComponentBreadcrumbs, useErrorExplorer, useErrorHandler, useUserContext, withErrorBoundary };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map