@omerdlw/base-framework 1.0.0

package/dist/error/index.js

@@ -0,0 +1,688 @@
+"use client";
+import React, { createContext, useContext, useRef, useCallback, useEffect } from 'react';
+import { usePathname } from 'next/navigation';
+import { Icon as Icon$1 } from '@iconify-icon/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '@radix-ui/react-tooltip';
+import 'clsx';
+import 'tailwind-merge';
+
+// src/error/constants.ts
+var ERROR_MESSAGES = Object.freeze({
+  GLOBAL_TITLE: "Something went wrong",
+  GLOBAL_MSG: "We ran into an unexpected problem. Please try again",
+  MODULE_TITLE: "Something went wrong",
+  MODULE_MSG: "This part of the app isn't working right now. Please try again",
+  COMPONENT_MSG: "This section couldn't be loaded. Please try again",
+  FALLBACK_TITLE: "Something went wrong",
+  FALLBACK_MSG: "This section couldn't be loaded. Please try again"
+});
+var MAX_CONTEXT = 10;
+var MAX_FINGERPRINTS = 100;
+var DEFAULT_DEDUPE_WINDOW = 6e4;
+var ERROR_LISTENER_CONFIG = Object.freeze({
+  maxErrors: 10,
+  throttle: 2e3,
+  ignored: Object.freeze([
+    /ResizeObserver loop/i,
+    /Network request failed/i,
+    /Loading chunk/i,
+    /Unexpected end of input/i,
+    /Failed to fetch/i,
+    /Script error/i,
+    /HTTP\s*404/i
+  ])
+});
+
+// src/error/utils.ts
+var IS_BROWSER = typeof window !== "undefined";
+var HAS_NAVIGATOR = typeof navigator !== "undefined";
+var getRuntimePath = () => typeof window !== "undefined" ? window.location.pathname : null;
+var getUserAgent = () => typeof navigator !== "undefined" ? navigator.userAgent : null;
+function createErrorContext({
+  errorInfo,
+  name,
+  title,
+  variant
+}) {
+  return {
+    componentStack: errorInfo?.componentStack || null,
+    route: getRuntimePath(),
+    userAgent: getUserAgent(),
+    timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+    name: name || title || "ErrorBoundary",
+    variant: variant || "default",
+    source: "ErrorBoundary"
+  };
+}
+function normalizeSampleRate(value) {
+  const sampleRate = Number(value);
+  return Number.isFinite(sampleRate) ? Math.min(1, Math.max(0, sampleRate)) : 1;
+}
+function normalizeDedupeWindow(value) {
+  const dedupeWindow = Number(value);
+  return Number.isFinite(dedupeWindow) ? Math.max(0, dedupeWindow) : DEFAULT_DEDUPE_WINDOW;
+}
+function getBrowserEnvironment(route) {
+  return {
+    route: route || (IS_BROWSER ? window.location.pathname : null),
+    userAgent: HAS_NAVIGATOR ? navigator.userAgent : null,
+    platform: HAS_NAVIGATOR ? navigator.platform : null,
+    language: HAS_NAVIGATOR ? navigator.language : null,
+    online: HAS_NAVIGATOR ? navigator.onLine : true,
+    url: IS_BROWSER ? window.location.href : null
+  };
+}
+function fingerprint(error, context = {}) {
+  const stackTop = typeof context.componentStack === "string" ? context.componentStack.split("\n").find(Boolean) || "" : "";
+  const errObj = error;
+  const errorMessage = (errObj?.message || String(error || "")).slice(0, 100);
+  const errorName = errObj?.name || "UnknownError";
+  const route = context.route || "";
+  return [stackTop, errorMessage, errorName, route].filter(Boolean).join("::");
+}
+function createReport(error, {
+  context = {},
+  tags = {}
+} = {}) {
+  const errObj = error;
+  return {
+    error: {
+      message: errObj?.message || String(error),
+      stack: errObj?.stack || null,
+      name: errObj?.name || "UnknownError"
+    },
+    fingerprint: fingerprint(error, context),
+    timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+    environment: getBrowserEnvironment(context.route),
+    componentStack: context.componentStack || null,
+    context,
+    tags
+  };
+}
+function getErrorMessage(error) {
+  if (!error) return "";
+  if (typeof error === "string") return error.trim();
+  if (error instanceof Error) return error.message.trim();
+  const errObj = error;
+  return String(errObj?.message || errObj?.toString?.() || error).trim();
+}
+function shouldIgnoreError(error) {
+  if (!error) return true;
+  const errWithNotFound = error;
+  if (typeof errWithNotFound?.isNotFound === "function" && errWithNotFound.isNotFound()) {
+    return true;
+  }
+  const message = getErrorMessage(error);
+  return ERROR_LISTENER_CONFIG.ignored.some((pattern) => pattern.test(message));
+}
+
+// src/error/reporter.ts
+var IS_PRODUCTION = process.env.NODE_ENV === "production";
+var IS_BROWSER2 = typeof window !== "undefined";
+var ErrorReporter = class {
+  handlers = [];
+  context = {};
+  tags = {};
+  seen = /* @__PURE__ */ new Set();
+  enabled;
+  sampleRate;
+  beforeSend;
+  dedupeWindow;
+  constructor(options = {}) {
+    this.enabled = options.enabled ?? true;
+    this.sampleRate = normalizeSampleRate(options.sampleRate ?? 1);
+    this.beforeSend = options.beforeSend || null;
+    this.dedupeWindow = normalizeDedupeWindow(
+      options.deduplicateWindow ?? DEFAULT_DEDUPE_WINDOW
+    );
+  }
+  addHandler(handler) {
+    if (typeof handler?.handle === "function") {
+      this.handlers.push(handler);
+    }
+    return this;
+  }
+  removeHandler(name) {
+    this.handlers = this.handlers.filter((handler) => handler.name !== name);
+    return this;
+  }
+  setContext(key, value) {
+    if (Object.hasOwn(this.context, key) || Object.keys(this.context).length < MAX_CONTEXT) {
+      this.context[key] = value;
+    }
+    return this;
+  }
+  setTag(key, value) {
+    this.tags[key] = String(value);
+    return this;
+  }
+  captureError(error, extraContext = {}) {
+    if (!this.enabled || Math.random() > this.sampleRate) return;
+    this.ensureDefaultHandlers();
+    const context = { ...this.context, ...extraContext };
+    let report2 = createReport(error, { context, tags: { ...this.tags } });
+    const dedupeKey = report2.fingerprint;
+    if (this.seen.has(dedupeKey)) return;
+    if (this.seen.size >= MAX_FINGERPRINTS) {
+      const first = this.seen.keys().next().value;
+      if (first) this.seen.delete(first);
+    }
+    this.seen.add(dedupeKey);
+    setTimeout(() => this.seen.delete(dedupeKey), this.dedupeWindow);
+    if (typeof this.beforeSend === "function") {
+      try {
+        const transformed = this.beforeSend(report2);
+        if (!transformed) return;
+        report2 = transformed;
+      } catch {
+      }
+    }
+    this.handlers.forEach((handler) => {
+      try {
+        handler.handle(report2);
+      } catch {
+      }
+    });
+    return report2;
+  }
+  captureMessage(message, level = "info", context = {}) {
+    const error = new Error(message);
+    error.name = "Message";
+    return this.captureError(error, { ...context, level });
+  }
+  ensureDefaultHandlers() {
+    if (this.handlers.length || !IS_BROWSER2) return;
+    this.handlers.push(createConsoleHandler());
+    if (window.Sentry) {
+      const sentryHandler = createSentryHandler(window.Sentry);
+      if (sentryHandler.name === "sentry") {
+        this.handlers.push(sentryHandler);
+      }
+    }
+  }
+};
+var instance = null;
+function getErrorReporter(options = {}) {
+  if (!instance) {
+    instance = new ErrorReporter(options);
+  }
+  return instance;
+}
+function createConsoleHandler() {
+  return {
+    name: "console",
+    handle(report2) {
+      if (IS_PRODUCTION) return;
+      console.error("[ErrorReporter]", {
+        error: report2.error.message,
+        fingerprint: report2.fingerprint,
+        route: report2.environment.route
+      });
+    }
+  };
+}
+function createSentryHandler(Sentry) {
+  const sentryObj = Sentry;
+  if (!sentryObj || typeof sentryObj.captureException !== "function" || typeof sentryObj.withScope !== "function") {
+    return createConsoleHandler();
+  }
+  return {
+    name: "sentry",
+    handle(report2) {
+      sentryObj.withScope((scope) => {
+        if (report2.fingerprint) scope.setFingerprint([report2.fingerprint]);
+        if (report2.user) scope.setUser(report2.user);
+        if (report2.tags && typeof report2.tags === "object") {
+          Object.entries(report2.tags).forEach(
+            ([key, value]) => scope.setTag(key, String(value))
+          );
+        }
+        if (report2.environment)
+          scope.setContext("environment", report2.environment);
+        if (report2.context) scope.setContext("custom", report2.context);
+        if (report2.componentStack)
+          scope.setExtra("componentStack", report2.componentStack);
+        const error = new Error(report2.error.message);
+        error.name = report2.error.name || "Error";
+        error.stack = report2.error.stack || void 0;
+        sentryObj.captureException(error);
+      });
+    }
+  };
+}
+
+// src/utils/report.ts
+var sink = null;
+function report(scope, error, level = "error") {
+  if (sink) {
+    try {
+      sink(scope, error, level);
+      return;
+    } catch {
+    }
+  }
+  if (process.env.NODE_ENV === "production" && typeof window !== "undefined") {
+    return;
+  }
+  console[level](`[${scope}]`, error);
+}
+function setReportSink(next) {
+  sink = next;
+  return () => {
+    if (sink === next) sink = null;
+  };
+}
+
+// src/events.ts
+var EVENT_TYPES = Object.freeze({
+  API_UNAUTHORIZED: "API_UNAUTHORIZED",
+  STATE_CHANGE: "STATE_CHANGE",
+  API_ERROR: "API_ERROR",
+  APP_ERROR: "APP_ERROR"
+});
+var EventEmitter = class {
+  events = /* @__PURE__ */ new Map();
+  debounceTimers = /* @__PURE__ */ new Map();
+  subscribe(event, callback) {
+    if (typeof event !== "string" || !event || typeof callback !== "function") {
+      return () => {
+      };
+    }
+    const listeners = this.events.get(event) || /* @__PURE__ */ new Set();
+    listeners.add(callback);
+    this.events.set(event, listeners);
+    return () => {
+      listeners.delete(callback);
+      if (listeners.size === 0) this.events.delete(event);
+    };
+  }
+  emit(event, payload) {
+    const listeners = this.events.get(event);
+    if (!listeners || listeners.size === 0) return;
+    const snapshot = Array.from(listeners);
+    for (const callback of snapshot) {
+      try {
+        callback(payload);
+      } catch (error) {
+        report(`Event listener (${String(event)})`, error);
+      }
+    }
+  }
+  emitDebounced(event, payload, waitMs = 100) {
+    const existing = this.debounceTimers.get(event);
+    if (existing) clearTimeout(existing);
+    const timer = setTimeout(() => {
+      this.debounceTimers.delete(event);
+      this.emit(event, payload);
+    }, waitMs);
+    this.debounceTimers.set(event, timer);
+  }
+  cancelDebounced(event) {
+    if (event) {
+      const timer = this.debounceTimers.get(event);
+      if (timer) {
+        clearTimeout(timer);
+        this.debounceTimers.delete(event);
+      }
+    } else {
+      for (const timer of this.debounceTimers.values()) {
+        clearTimeout(timer);
+      }
+      this.debounceTimers.clear();
+    }
+  }
+  unsubscribeAll(event) {
+    this.cancelDebounced(event);
+    if (event) this.events.delete(event);
+    else this.events.clear();
+  }
+  hasListeners(event) {
+    return Boolean(this.events.get(event)?.size);
+  }
+  getListenerCount(event) {
+    return this.events.get(event)?.size || 0;
+  }
+  getAllEvents() {
+    return [...this.events.keys()];
+  }
+};
+var GLOBAL_EVENTS_KEY = /* @__PURE__ */ Symbol.for("__base_framework_global_events__");
+var _global = globalThis;
+var globalEvents = _global[GLOBAL_EVENTS_KEY] ?? (_global[GLOBAL_EVENTS_KEY] = new EventEmitter());
+function Icon({
+  className = "center",
+  color,
+  icon,
+  onClick,
+  size = 20,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Icon$1,
+    {
+      className,
+      height: size,
+      icon,
+      onClick,
+      style: { color, ...style },
+      width: size,
+      ...props
+    }
+  );
+}
+Icon.displayName = "Icon";
+function Button({
+  ref,
+  children,
+  className,
+  disabled = false,
+  loading = false,
+  type = "button",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type,
+      disabled: disabled || loading,
+      "aria-busy": loading ? true : void 0,
+      className,
+      ...props,
+      children
+    }
+  );
+}
+Button.displayName = "Button";
+function getOrCreateGlobalContext(name, defaultValue) {
+  const sym = /* @__PURE__ */ Symbol.for(`@omerdlw/base-framework/context/${name}`);
+  const store = globalThis;
+  if (!store[sym]) {
+    store[sym] = createContext(defaultValue);
+  }
+  return store[sym];
+}
+
+// src/theme.tsx
+function defineThemeSpec(id) {
+  return Object.freeze({ id });
+}
+var EMPTY = /* @__PURE__ */ new Map();
+var ThemeContext = getOrCreateGlobalContext("ThemeContext", EMPTY);
+function useTheme(spec) {
+  const config = useContext(ThemeContext).get(spec.id);
+  if (!config) {
+    throw new Error(
+      `Theme "${spec.id}" is missing. Add its theme file to src/config/ and list it in src/config/index.ts.`
+    );
+  }
+  return {
+    slots: config.slots,
+    styles: config.styles ?? {}
+  };
+}
+
+// src/error/theme.ts
+var errorTheme = defineThemeSpec("error");
+
+// src/utils/user-message.ts
+var USER_MESSAGES = Object.freeze({
+  generic: "Something went wrong. Please try again",
+  network: "You appear to be offline. Check your connection and try again",
+  timeout: "That took too long. Please try again",
+  unauthorized: "Your session has expired. Please sign in again",
+  forbidden: "You don't have permission to do that",
+  notFound: "We couldn't find what you were looking for",
+  rateLimited: "Too many attempts. Please wait a moment and try again",
+  server: "We're having trouble on our end. Please try again in a moment"
+});
+var UserError = class extends Error {
+  status;
+  constructor(message, status) {
+    super(message);
+    this.name = "UserError";
+    this.status = status;
+  }
+};
+var NETWORK_FAILURE = /failed to fetch|network|load failed|fetch failed/i;
+function readField(source, field, type) {
+  const value = source?.[field];
+  return typeof value === type ? value : void 0;
+}
+function readPayloadMessage(error) {
+  const payload = error?.payload;
+  const message = readField(payload, "error", "string")?.trim();
+  return message || void 0;
+}
+function toUserMessage(error, { codes, fallback = USER_MESSAGES.generic } = {}) {
+  if (typeof error === "string") return error.trim() || fallback;
+  if (!error || typeof error !== "object") return fallback;
+  if (error instanceof UserError) {
+    if (error.status === 401) return USER_MESSAGES.unauthorized;
+    return error.message || fallback;
+  }
+  if (error.name === "AbortError") return fallback;
+  const code = readField(error, "code", "string");
+  if (code && codes?.[code]) return codes[code];
+  const status = readField(error, "status", "number");
+  if (status === 401) return USER_MESSAGES.unauthorized;
+  if (status === 429) return USER_MESSAGES.rateLimited;
+  if (status === 408 || status === 504) return USER_MESSAGES.timeout;
+  if (status !== void 0 && status >= 500) return USER_MESSAGES.server;
+  if (status !== void 0 && status >= 400) {
+    const authored = readPayloadMessage(error);
+    if (authored) return authored;
+    if (status === 403) return USER_MESSAGES.forbidden;
+    if (status === 404) return USER_MESSAGES.notFound;
+    return fallback;
+  }
+  const isOffline = typeof navigator !== "undefined" && navigator.onLine === false;
+  if (isOffline || NETWORK_FAILURE.test(error.message ?? "") && (error instanceof TypeError || /fetch/i.test(error.name))) {
+    return USER_MESSAGES.network;
+  }
+  return fallback;
+}
+var ActionButton = Button;
+function DefaultErrorFallback({
+  error,
+  message,
+  resetError,
+  title
+}) {
+  const theme = useTheme(errorTheme);
+  return /* @__PURE__ */ jsxs("div", { className: theme.slots.screen, children: [
+    /* @__PURE__ */ jsx("div", { className: theme.slots.icon, children: /* @__PURE__ */ jsx(Icon, { icon: "solar:danger-circle-bold", size: 30 }) }),
+    /* @__PURE__ */ jsx("h3", { className: theme.slots.title, children: message || toUserMessage(error, { fallback: ERROR_MESSAGES.FALLBACK_MSG }) }),
+    /* @__PURE__ */ jsx(
+      ActionButton,
+      {
+        className: theme.slots.retryButton,
+        onClick: resetError,
+        type: "button",
+        children: "Try again"
+      }
+    )
+  ] });
+}
+var ErrorBoundaryCore = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: null,
+      errorInfo: null,
+      hasError: false,
+      lastResetKey: props.resetKey
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return { error, hasError: true };
+  }
+  static getDerivedStateFromProps(props, state) {
+    if (props.resetKey !== state.lastResetKey) {
+      return {
+        error: null,
+        errorInfo: null,
+        hasError: false,
+        lastResetKey: props.resetKey
+      };
+    }
+    return null;
+  }
+  componentDidCatch(error, errorInfo) {
+    this.setState({ errorInfo });
+    const { message, name, onError, silent, title, variant } = this.props;
+    const context = createErrorContext({ errorInfo, name, title, variant });
+    try {
+      onError?.(error, errorInfo, context);
+    } catch (callbackError) {
+      report("ErrorBoundary onError callback", callbackError, "warn");
+    }
+    if (!silent) {
+      globalEvents.emit(EVENT_TYPES.APP_ERROR, {
+        error,
+        errorInfo,
+        message: message || toUserMessage(error),
+        resetError: this.resetError
+      });
+    }
+    try {
+      const reporter = getErrorReporter();
+      reporter?.captureError?.(error, context);
+    } catch (reportingError) {
+      report("ErrorBoundary reporting", reportingError, "warn");
+    }
+  }
+  resetError = () => {
+    this.setState({
+      error: null,
+      errorInfo: null,
+      hasError: false
+    });
+    this.props.onReset?.();
+  };
+  render() {
+    if (!this.state.hasError) return this.props.children;
+    const { fallback, message, title } = this.props;
+    const { error } = this.state;
+    if (typeof fallback === "function") {
+      return fallback({ error, resetError: this.resetError });
+    }
+    if (fallback) {
+      return fallback;
+    }
+    return /* @__PURE__ */ jsx(
+      DefaultErrorFallback,
+      {
+        error,
+        message,
+        resetError: this.resetError,
+        title
+      }
+    );
+  }
+};
+function GlobalError({ children, fallback, onReset }) {
+  const pathname = usePathname();
+  return /* @__PURE__ */ jsx(
+    ErrorBoundaryCore,
+    {
+      fallback,
+      message: ERROR_MESSAGES.GLOBAL_MSG,
+      onReset,
+      resetKey: pathname,
+      title: ERROR_MESSAGES.GLOBAL_TITLE,
+      variant: "full",
+      children
+    }
+  );
+}
+function ModuleError({
+  children,
+  fallback,
+  name,
+  onReset
+}) {
+  return /* @__PURE__ */ jsx(
+    ErrorBoundaryCore,
+    {
+      fallback,
+      message: ERROR_MESSAGES.MODULE_MSG,
+      name,
+      onReset,
+      title: name ? `${name} Error` : ERROR_MESSAGES.MODULE_TITLE,
+      variant: "module",
+      children
+    }
+  );
+}
+function ComponentError({
+  children,
+  fallback,
+  message,
+  onReset
+}) {
+  return /* @__PURE__ */ jsx(
+    ErrorBoundaryCore,
+    {
+      fallback,
+      message: message || ERROR_MESSAGES.COMPONENT_MSG,
+      onReset,
+      variant: "inline",
+      children
+    }
+  );
+}
+function GlobalErrorListener() {
+  const lastError = useRef(0);
+  const count = useRef(0);
+  const shown = useRef(/* @__PURE__ */ new Set());
+  const handleError = useCallback((error, source = "runtime") => {
+    if (shouldIgnoreError(error)) return;
+    const now = Date.now();
+    if (count.current >= ERROR_LISTENER_CONFIG.maxErrors) return;
+    if (now - lastError.current < ERROR_LISTENER_CONFIG.throttle) return;
+    const message = getErrorMessage(error);
+    const key = message || String(error);
+    if (shown.current.has(key)) return;
+    shown.current.add(key);
+    lastError.current = now;
+    count.current += 1;
+    try {
+      const reporter = getErrorReporter();
+      reporter?.captureError?.(error, {
+        globalListener: true,
+        source
+      });
+    } catch (reportingError) {
+      report("GlobalError reporting", reportingError, "warn");
+    }
+    globalEvents.emit(EVENT_TYPES.APP_ERROR, {
+      error,
+      message: toUserMessage(error)
+    });
+  }, []);
+  useEffect(() => {
+    const removeSink = setReportSink((scope, error, level) => {
+      try {
+        getErrorReporter().captureError(error, { level, scope });
+      } catch {
+      }
+    });
+    const onError = (event) => handleError(event.error || event.message, "window.onerror");
+    const onRejection = (event) => handleError(event.reason, "unhandledrejection");
+    window.addEventListener("error", onError);
+    window.addEventListener("unhandledrejection", onRejection);
+    return () => {
+      removeSink();
+      window.removeEventListener("error", onError);
+      window.removeEventListener("unhandledrejection", onRejection);
+    };
+  }, [handleError]);
+  return null;
+}
+
+export { ComponentError, DEFAULT_DEDUPE_WINDOW, ERROR_LISTENER_CONFIG, ERROR_MESSAGES, ErrorBoundaryCore, GlobalError, GlobalErrorListener, MAX_CONTEXT, MAX_FINGERPRINTS, ModuleError, createConsoleHandler, createErrorContext, createReport, createSentryHandler, errorTheme, fingerprint, getBrowserEnvironment, getErrorMessage, getErrorReporter, getRuntimePath, getUserAgent, normalizeDedupeWindow, normalizeSampleRate, shouldIgnoreError };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map