@servlyadmin/runtime-core 0.1.2 → 0.1.4

package/dist/index.cjs

@@ -211,8 +211,13 @@ var init_registry = __esm({
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AnalyticsCollector: () => AnalyticsCollector,
   DEFAULT_CACHE_CONFIG: () => DEFAULT_CACHE_CONFIG,
   DEFAULT_RETRY_CONFIG: () => DEFAULT_RETRY_CONFIG,
+  LongTaskObserver: () => LongTaskObserver,
+  MemorySampler: () => MemorySampler,
+  SessionManager: () => SessionManager,
+  analytics: () => analytics,
   applyStyles: () => applyStyles,
   batchFetchComponents: () => batchFetchComponents,
   buildClassName: () => buildClassName,
@@ -226,6 +231,7 @@ __export(index_exports, {
   clearStyles: () => clearStyles,
   collectAllDependencies: () => collectAllDependencies,
   compareVersions: () => compareVersions,
+  configureAnalytics: () => configureAnalytics,
   createRegistry: () => createRegistry,
   detectCircularDependencies: () => detectCircularDependencies,
   extractBindingKeys: () => extractBindingKeys,
@@ -236,11 +242,15 @@ __export(index_exports, {
   formatStyleValue: () => formatStyleValue,
   formatVersion: () => formatVersion,
   generateTestCases: () => generateTestCases,
+  getAnalytics: () => getAnalytics,
   getCacheKey: () => getCacheKey,
   getDependencyTree: () => getDependencyTree,
   getFromCache: () => getFromCache,
+  getLongTaskObserver: () => getLongTaskObserver,
   getMemoryCacheSize: () => getMemoryCacheSize,
+  getMemorySampler: () => getMemorySampler,
   getRegistryUrl: () => getRegistryUrl,
+  getSessionManager: () => getSessionManager,
   hasTemplateSyntax: () => hasTemplateSyntax,
   invalidateCache: () => invalidateCache,
   isComponentAvailable: () => isComponentAvailable,
@@ -250,6 +260,10 @@ __export(index_exports, {
   processStyles: () => processStyles,
   render: () => render,
   renderDynamicList: () => renderDynamicList,
+  resetAnalytics: () => resetAnalytics,
+  resetLongTaskObserver: () => resetLongTaskObserver,
+  resetMemorySampler: () => resetMemorySampler,
+  resetSessionManager: () => resetSessionManager,
   resolveBindingPath: () => resolveBindingPath,
   resolveTemplate: () => resolveTemplate,
   resolveTemplateValue: () => resolveTemplateValue,
@@ -266,6 +280,516 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/analyticsTypes.ts
+var DEFAULT_ANALYTICS_CONFIG = {
+  enabled: true,
+  endpoint: "/api/v1/analytics/events",
+  batchSize: 50,
+  flushInterval: 3e4,
+  // 30 seconds
+  sampleRate: 1,
+  environment: "production",
+  debug: false
+};
+var MAX_ERROR_MESSAGE_LENGTH = 1e3;
+var MAX_STACK_TRACE_LENGTH = 500;
+var MAX_QUEUE_SIZE = 500;
+var MAX_RETRY_ATTEMPTS = 3;
+var SESSION_TIMEOUT_MS = 30 * 60 * 1e3;
+var SDK_VERSION = "1.0.0";
+
+// src/sessionManager.ts
+var SESSION_STORAGE_KEY = "servly_analytics_session";
+function generateUUID() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    const v = c === "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+function isSessionStorageAvailable() {
+  try {
+    if (typeof sessionStorage === "undefined") {
+      return false;
+    }
+    const testKey = "__servly_test__";
+    sessionStorage.setItem(testKey, "test");
+    sessionStorage.removeItem(testKey);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function loadSession() {
+  if (!isSessionStorageAvailable()) {
+    return null;
+  }
+  try {
+    const stored = sessionStorage.getItem(SESSION_STORAGE_KEY);
+    if (!stored) {
+      return null;
+    }
+    return JSON.parse(stored);
+  } catch {
+    return null;
+  }
+}
+function saveSession(session) {
+  if (!isSessionStorageAvailable()) {
+    return;
+  }
+  try {
+    sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(session));
+  } catch {
+  }
+}
+function clearSession() {
+  if (!isSessionStorageAvailable()) {
+    return;
+  }
+  try {
+    sessionStorage.removeItem(SESSION_STORAGE_KEY);
+  } catch {
+  }
+}
+function isSessionExpired(session) {
+  const now = Date.now();
+  return now - session.lastActivityAt > SESSION_TIMEOUT_MS;
+}
+var SessionManager = class {
+  constructor() {
+    this.session = null;
+    this.initialize();
+  }
+  /**
+   * Initialize session manager
+   */
+  initialize() {
+    const stored = loadSession();
+    if (stored && !isSessionExpired(stored)) {
+      this.session = stored;
+      this.touch();
+    } else {
+      this.createNewSession();
+    }
+  }
+  /**
+   * Create a new session
+   */
+  createNewSession() {
+    const now = Date.now();
+    this.session = {
+      id: generateUUID(),
+      createdAt: now,
+      lastActivityAt: now
+    };
+    saveSession(this.session);
+  }
+  /**
+   * Get current session ID
+   * Creates new session if expired
+   */
+  getSessionId() {
+    if (!this.session || isSessionExpired(this.session)) {
+      this.createNewSession();
+    }
+    return this.session.id;
+  }
+  /**
+   * Update last activity timestamp
+   */
+  touch() {
+    if (this.session) {
+      this.session.lastActivityAt = Date.now();
+      saveSession(this.session);
+    }
+  }
+  /**
+   * Force create a new session
+   */
+  rotate() {
+    this.createNewSession();
+  }
+  /**
+   * Clear current session
+   */
+  clear() {
+    this.session = null;
+    clearSession();
+  }
+  /**
+   * Get session info (for debugging)
+   */
+  getSessionInfo() {
+    return this.session ? { ...this.session } : null;
+  }
+};
+var sessionManagerInstance = null;
+function getSessionManager() {
+  if (!sessionManagerInstance) {
+    sessionManagerInstance = new SessionManager();
+  }
+  return sessionManagerInstance;
+}
+function resetSessionManager() {
+  if (sessionManagerInstance) {
+    sessionManagerInstance.clear();
+  }
+  sessionManagerInstance = null;
+}
+
+// src/analytics.ts
+var AnalyticsCollector = class {
+  constructor(config) {
+    this.eventQueue = [];
+    this.flushTimer = null;
+    this.isFlushing = false;
+    this.retryDelay = 1e3;
+    this.config = { ...DEFAULT_ANALYTICS_CONFIG, ...config };
+    this.isEnabled = this.config.enabled;
+    this.startFlushTimer();
+  }
+  // ============================================
+  // Configuration
+  // ============================================
+  /**
+   * Configure analytics
+   */
+  configure(config) {
+    this.config = { ...this.config, ...config };
+    this.isEnabled = this.config.enabled;
+    this.stopFlushTimer();
+    if (this.isEnabled) {
+      this.startFlushTimer();
+    }
+  }
+  /**
+   * Disable analytics collection
+   */
+  disable() {
+    this.isEnabled = false;
+    this.stopFlushTimer();
+    this.eventQueue = [];
+  }
+  /**
+   * Enable analytics collection
+   */
+  enable() {
+    this.isEnabled = true;
+    this.startFlushTimer();
+  }
+  /**
+   * Destroy and cleanup
+   */
+  destroy() {
+    this.disable();
+  }
+  // ============================================
+  // Event Tracking
+  // ============================================
+  /**
+   * Track component render
+   */
+  trackRender(componentId, version, duration, metadata) {
+    if (!this.shouldTrack()) {
+      return;
+    }
+    const event = {
+      type: "render",
+      componentId,
+      version,
+      timestamp: Date.now(),
+      sessionId: getSessionManager().getSessionId(),
+      appId: this.config.appId,
+      duration: Math.round(duration),
+      metadata
+    };
+    this.queueEvent(event);
+  }
+  /**
+   * Track component fetch
+   */
+  trackFetch(componentId, version, duration, fromCache, metadata) {
+    if (!this.shouldTrack()) {
+      return;
+    }
+    const event = {
+      type: "fetch",
+      componentId,
+      version,
+      timestamp: Date.now(),
+      sessionId: getSessionManager().getSessionId(),
+      appId: this.config.appId,
+      duration: Math.round(duration),
+      metadata: {
+        cacheHit: fromCache,
+        fetchDuration: Math.round(duration),
+        ...metadata
+      }
+    };
+    this.queueEvent(event);
+  }
+  /**
+   * Track error
+   */
+  trackError(componentId, version, error, context) {
+    if (!this.shouldTrack()) {
+      return;
+    }
+    const errorMessage = this.truncateString(
+      error.message || "Unknown error",
+      MAX_ERROR_MESSAGE_LENGTH
+    );
+    const stackTrace = error.stack ? this.truncateString(error.stack, MAX_STACK_TRACE_LENGTH) : void 0;
+    const event = {
+      type: "error",
+      componentId,
+      version,
+      timestamp: Date.now(),
+      sessionId: getSessionManager().getSessionId(),
+      appId: this.config.appId,
+      metadata: {
+        errorType: context?.errorType || "render",
+        errorMessage,
+        stackTrace,
+        bindingPath: context?.bindingPath,
+        elementId: context?.elementId
+      }
+    };
+    this.queueEvent(event);
+  }
+  // ============================================
+  // Queue Management
+  // ============================================
+  /**
+   * Check if event should be tracked (sampling + enabled)
+   */
+  shouldTrack() {
+    if (!this.isEnabled) {
+      return false;
+    }
+    if (this.config.sampleRate < 1) {
+      return Math.random() < this.config.sampleRate;
+    }
+    return true;
+  }
+  /**
+   * Add event to queue
+   */
+  queueEvent(event) {
+    if (this.eventQueue.length >= MAX_QUEUE_SIZE) {
+      this.eventQueue.shift();
+      this.log("Queue full, dropping oldest event");
+    }
+    this.eventQueue.push({
+      event,
+      retryCount: 0,
+      addedAt: Date.now()
+    });
+    if (this.eventQueue.length >= this.config.batchSize) {
+      this.flush();
+    }
+  }
+  /**
+   * Get current queue size
+   */
+  getQueueSize() {
+    return this.eventQueue.length;
+  }
+  // ============================================
+  // Flush Logic
+  // ============================================
+  /**
+   * Start the flush timer
+   */
+  startFlushTimer() {
+    if (this.flushTimer) {
+      return;
+    }
+    this.flushTimer = setInterval(() => {
+      this.flush();
+    }, this.config.flushInterval);
+  }
+  /**
+   * Stop the flush timer
+   */
+  stopFlushTimer() {
+    if (this.flushTimer) {
+      clearInterval(this.flushTimer);
+      this.flushTimer = null;
+    }
+  }
+  /**
+   * Flush events to server
+   */
+  async flush() {
+    if (this.isFlushing || this.eventQueue.length === 0) {
+      return;
+    }
+    this.isFlushing = true;
+    if (typeof requestIdleCallback !== "undefined") {
+      requestIdleCallback(
+        () => {
+          this.doFlush();
+        },
+        { timeout: 5e3 }
+      );
+    } else {
+      setTimeout(() => {
+        this.doFlush();
+      }, 0);
+    }
+  }
+  /**
+   * Perform the actual flush
+   */
+  async doFlush() {
+    const eventsToSend = this.eventQueue.splice(0, this.config.batchSize);
+    if (eventsToSend.length === 0) {
+      this.isFlushing = false;
+      return;
+    }
+    const request = {
+      events: eventsToSend.map((q) => q.event),
+      clientInfo: {
+        sdkVersion: SDK_VERSION,
+        environment: this.config.environment
+      }
+    };
+    try {
+      const response = await this.sendEvents(request);
+      if (response.success) {
+        this.log(`Flushed ${response.accepted} events`);
+        this.retryDelay = 1e3;
+      } else {
+        this.handleFailedEvents(eventsToSend, response);
+      }
+    } catch (error) {
+      this.handleNetworkError(eventsToSend, error);
+    } finally {
+      this.isFlushing = false;
+    }
+  }
+  /**
+   * Send events to the API
+   */
+  async sendEvents(request) {
+    const headers = {
+      "Content-Type": "application/json"
+    };
+    if (this.config.apiKey) {
+      headers["Authorization"] = `Bearer ${this.config.apiKey}`;
+    }
+    const response = await fetch(this.config.endpoint, {
+      method: "POST",
+      headers,
+      body: JSON.stringify(request)
+    });
+    if (response.status === 429) {
+      const retryAfter = parseInt(response.headers.get("Retry-After") || "60", 10);
+      return {
+        success: false,
+        accepted: 0,
+        rejected: request.events.length,
+        retryAfter
+      };
+    }
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+    return await response.json();
+  }
+  /**
+   * Handle failed events (partial success)
+   */
+  handleFailedEvents(events, response) {
+    const eventsToRetry = events.filter((e) => e.retryCount < MAX_RETRY_ATTEMPTS);
+    eventsToRetry.forEach((e) => {
+      e.retryCount++;
+      this.eventQueue.unshift(e);
+    });
+    const dropped = events.length - eventsToRetry.length;
+    if (dropped > 0) {
+      this.log(`Dropped ${dropped} events after max retries`);
+    }
+    if (response.retryAfter) {
+      this.scheduleRetry(response.retryAfter * 1e3);
+    }
+  }
+  /**
+   * Handle network error
+   */
+  handleNetworkError(events, error) {
+    this.log(`Network error: ${error}`);
+    const eventsToRetry = events.filter((e) => e.retryCount < MAX_RETRY_ATTEMPTS);
+    eventsToRetry.forEach((e) => {
+      e.retryCount++;
+      this.eventQueue.unshift(e);
+    });
+    this.scheduleRetry(this.retryDelay);
+    this.retryDelay = Math.min(this.retryDelay * 2, 3e4);
+  }
+  /**
+   * Schedule a retry flush
+   */
+  scheduleRetry(delayMs) {
+    setTimeout(() => {
+      this.flush();
+    }, delayMs);
+  }
+  // ============================================
+  // Utilities
+  // ============================================
+  /**
+   * Truncate string to max length
+   */
+  truncateString(str, maxLength) {
+    if (str.length <= maxLength) {
+      return str;
+    }
+    return str.substring(0, maxLength - 3) + "...";
+  }
+  /**
+   * Log debug message
+   */
+  log(message) {
+    if (this.config.debug) {
+      console.log(`[Analytics] ${message}`);
+    }
+  }
+};
+var analyticsInstance = null;
+function getAnalytics() {
+  if (!analyticsInstance) {
+    analyticsInstance = new AnalyticsCollector();
+  }
+  return analyticsInstance;
+}
+function configureAnalytics(config) {
+  getAnalytics().configure(config);
+}
+function resetAnalytics() {
+  if (analyticsInstance) {
+    analyticsInstance.destroy();
+  }
+  analyticsInstance = null;
+}
+var analytics = {
+  get instance() {
+    return getAnalytics();
+  },
+  configure: configureAnalytics,
+  trackRender: (componentId, version, duration, metadata) => getAnalytics().trackRender(componentId, version, duration, metadata),
+  trackFetch: (componentId, version, duration, fromCache, metadata) => getAnalytics().trackFetch(componentId, version, duration, fromCache, metadata),
+  trackError: (componentId, version, error, context) => getAnalytics().trackError(componentId, version, error, context),
+  flush: () => getAnalytics().flush(),
+  disable: () => getAnalytics().disable(),
+  enable: () => getAnalytics().enable()
+};
+
 // src/bindings.ts
 var BINDING_SOURCES = [
   "props",
@@ -372,44 +896,64 @@ function resolveTernaryValue(value, context) {
   if (value === "undefined") return void 0;
   return resolveExpression(value, context);
 }
-function resolveTemplate(template, context) {
+function resolveTemplate(template, context, componentId) {
   if (!template || typeof template !== "string") {
     return template;
   }
   if (!hasTemplateSyntax(template)) {
     return template;
   }
-  const singleMatch = template.match(/^\{\{([^}]+)\}\}$/);
-  if (singleMatch) {
-    const value = resolveExpression(singleMatch[1], context);
-    if (value === void 0 || value === null) {
-      return "";
-    }
-    return String(value);
-  }
-  return template.replace(TEMPLATE_REGEX, (match, expression) => {
-    const value = resolveExpression(expression, context);
-    if (value === void 0 || value === null) {
-      return "";
+  try {
+    const singleMatch = template.match(/^\{\{([^}]+)\}\}$/);
+    if (singleMatch) {
+      const value = resolveExpression(singleMatch[1], context);
+      if (value === void 0 || value === null) {
+        return "";
+      }
+      return String(value);
     }
-    if (typeof value === "object") {
-      return JSON.stringify(value);
+    return template.replace(TEMPLATE_REGEX, (match, expression) => {
+      const value = resolveExpression(expression, context);
+      if (value === void 0 || value === null) {
+        return "";
+      }
+      if (typeof value === "object") {
+        return JSON.stringify(value);
+      }
+      return String(value);
+    });
+  } catch (error) {
+    if (componentId) {
+      analytics.trackError(componentId, "latest", error, {
+        errorType: "binding",
+        bindingPath: template
+      });
     }
-    return String(value);
-  });
+    return "";
+  }
 }
-function resolveTemplateValue(template, context) {
+function resolveTemplateValue(template, context, componentId) {
   if (!template || typeof template !== "string") {
     return template;
   }
   if (!hasTemplateSyntax(template)) {
     return template;
   }
-  const singleMatch = template.match(/^\{\{([^}]+)\}\}$/);
-  if (singleMatch) {
-    return resolveExpression(singleMatch[1], context);
+  try {
+    const singleMatch = template.match(/^\{\{([^}]+)\}\}$/);
+    if (singleMatch) {
+      return resolveExpression(singleMatch[1], context);
+    }
+    return resolveTemplate(template, context, componentId);
+  } catch (error) {
+    if (componentId) {
+      analytics.trackError(componentId, "latest", error, {
+        errorType: "binding",
+        bindingPath: template
+      });
+    }
+    return void 0;
   }
-  return resolveTemplate(template, context);
 }
 function isPlainObject(value) {
   return Object.prototype.toString.call(value) === "[object Object]";
@@ -642,6 +1186,162 @@ function updateStyles(element, oldStyles, newStyles) {
   }
 }
 
+// src/memorySampler.ts
+var MemorySampler = class {
+  constructor() {
+    this.isSupported = this.checkSupport();
+  }
+  /**
+   * Check if memory API is available
+   */
+  checkSupport() {
+    if (typeof performance === "undefined") {
+      return false;
+    }
+    const perf = performance;
+    return typeof perf.memory !== "undefined";
+  }
+  /**
+   * Check if memory sampling is available
+   */
+  isAvailable() {
+    return this.isSupported;
+  }
+  /**
+   * Take a memory sample
+   * Returns null if memory API is not available
+   */
+  sample() {
+    if (!this.isSupported) {
+      return null;
+    }
+    const perf = performance;
+    if (!perf.memory) {
+      return null;
+    }
+    return {
+      heapUsedKB: Math.round(perf.memory.usedJSHeapSize / 1024),
+      heapTotalKB: Math.round(perf.memory.totalJSHeapSize / 1024),
+      timestamp: Date.now()
+    };
+  }
+  /**
+   * Calculate heap delta between two samples
+   * Returns the difference in KB (positive = memory increased)
+   */
+  calculateDelta(before, after) {
+    if (!before || !after) {
+      return null;
+    }
+    return after.heapUsedKB - before.heapUsedKB;
+  }
+};
+var memorySamplerInstance = null;
+function getMemorySampler() {
+  if (!memorySamplerInstance) {
+    memorySamplerInstance = new MemorySampler();
+  }
+  return memorySamplerInstance;
+}
+function resetMemorySampler() {
+  memorySamplerInstance = null;
+}
+
+// src/longTaskObserver.ts
+var LongTaskObserver = class {
+  constructor() {
+    this.observer = null;
+    this.longTaskCount = 0;
+    this.isObserving = false;
+    this.isSupported = this.checkSupport();
+  }
+  /**
+   * Check if PerformanceObserver with longtask support is available
+   */
+  checkSupport() {
+    if (typeof PerformanceObserver === "undefined") {
+      return false;
+    }
+    try {
+      const supportedTypes = PerformanceObserver.supportedEntryTypes;
+      return Array.isArray(supportedTypes) && supportedTypes.includes("longtask");
+    } catch {
+      return false;
+    }
+  }
+  /**
+   * Check if long task observation is available
+   */
+  isAvailable() {
+    return this.isSupported;
+  }
+  /**
+   * Start observing long tasks
+   */
+  start() {
+    if (!this.isSupported || this.isObserving) {
+      return;
+    }
+    this.longTaskCount = 0;
+    try {
+      this.observer = new PerformanceObserver((list) => {
+        const entries = list.getEntries();
+        this.longTaskCount += entries.length;
+      });
+      this.observer.observe({ entryTypes: ["longtask"] });
+      this.isObserving = true;
+    } catch {
+      this.isSupported = false;
+    }
+  }
+  /**
+   * Stop observing and return the count of long tasks
+   */
+  stop() {
+    if (!this.isObserving || !this.observer) {
+      return this.longTaskCount;
+    }
+    try {
+      this.observer.disconnect();
+    } catch {
+    }
+    this.observer = null;
+    this.isObserving = false;
+    return this.longTaskCount;
+  }
+  /**
+   * Reset the long task counter
+   */
+  reset() {
+    this.longTaskCount = 0;
+  }
+  /**
+   * Get current count without stopping observation
+   */
+  getCount() {
+    return this.longTaskCount;
+  }
+  /**
+   * Check if currently observing
+   */
+  isActive() {
+    return this.isObserving;
+  }
+};
+var longTaskObserverInstance = null;
+function getLongTaskObserver() {
+  if (!longTaskObserverInstance) {
+    longTaskObserverInstance = new LongTaskObserver();
+  }
+  return longTaskObserverInstance;
+}
+function resetLongTaskObserver() {
+  if (longTaskObserverInstance) {
+    longTaskObserverInstance.stop();
+  }
+  longTaskObserverInstance = null;
+}
+
 // src/renderer.ts
 var COMPONENT_TO_TAG = {
   container: "div",
@@ -895,52 +1595,84 @@ function renderElement(element, tree, context, eventHandlers, elementStates, sta
 }
 function render(options) {
   const { container, elements, context, eventHandlers, componentRegistry, onDependencyNeeded } = options;
-  const tree = buildTree(elements);
+  const startTime = performance.now();
+  const memorySampler = getMemorySampler();
+  const longTaskObserver = getLongTaskObserver();
+  const memoryBefore = memorySampler.sample();
+  longTaskObserver.start();
   const rootElements = elements.filter((el) => !el.parent || el.parent === null);
-  const state = {
-    container,
-    elements,
-    context,
-    eventHandlers,
-    elementStates: /* @__PURE__ */ new Map(),
-    rootElement: null,
-    componentRegistry,
-    onDependencyNeeded,
-    renderingStack: /* @__PURE__ */ new Set()
-  };
-  container.innerHTML = "";
-  if (rootElements.length === 0) {
-    return {
+  const componentId = rootElements[0]?.componentId || "unknown";
+  const version = "latest";
+  try {
+    const tree = buildTree(elements);
+    const state = {
+      container,
+      elements,
+      context,
+      eventHandlers,
+      elementStates: /* @__PURE__ */ new Map(),
       rootElement: null,
+      componentRegistry,
+      onDependencyNeeded,
+      renderingStack: /* @__PURE__ */ new Set()
+    };
+    container.innerHTML = "";
+    if (rootElements.length === 0) {
+      const duration2 = performance.now() - startTime;
+      const longTasks2 = longTaskObserver.stop();
+      analytics.trackRender(componentId, version, duration2, {
+        elementCount: 0,
+        longTaskCount: longTasks2
+      });
+      return {
+        rootElement: null,
+        update: (newContext) => update(state, newContext),
+        destroy: () => destroy(state)
+      };
+    }
+    if (rootElements.length === 1) {
+      state.rootElement = renderElement(
+        rootElements[0],
+        tree,
+        context,
+        eventHandlers,
+        state.elementStates,
+        state
+      );
+      container.appendChild(state.rootElement);
+    } else {
+      const wrapper = document.createElement("div");
+      wrapper.setAttribute("data-servly-wrapper", "true");
+      for (const root of rootElements) {
+        const rootElement = renderElement(root, tree, context, eventHandlers, state.elementStates, state);
+        wrapper.appendChild(rootElement);
+      }
+      state.rootElement = wrapper;
+      container.appendChild(wrapper);
+    }
+    const duration = performance.now() - startTime;
+    const memoryAfter = memorySampler.sample();
+    const longTasks = longTaskObserver.stop();
+    const heapDelta = memorySampler.calculateDelta(memoryBefore, memoryAfter);
+    analytics.trackRender(componentId, version, duration, {
+      elementCount: elements.length,
+      heapDeltaKB: heapDelta ?? void 0,
+      longTaskCount: longTasks,
+      hasEventHandlers: !!eventHandlers && Object.keys(eventHandlers).length > 0,
+      hasDependencies: !!componentRegistry
+    });
+    return {
+      rootElement: state.rootElement,
       update: (newContext) => update(state, newContext),
       destroy: () => destroy(state)
     };
+  } catch (error) {
+    longTaskObserver.stop();
+    analytics.trackError(componentId, version, error, {
+      errorType: "render"
+    });
+    throw error;
   }
-  if (rootElements.length === 1) {
-    state.rootElement = renderElement(
-      rootElements[0],
-      tree,
-      context,
-      eventHandlers,
-      state.elementStates,
-      state
-    );
-    container.appendChild(state.rootElement);
-  } else {
-    const wrapper = document.createElement("div");
-    wrapper.setAttribute("data-servly-wrapper", "true");
-    for (const root of rootElements) {
-      const rootElement = renderElement(root, tree, context, eventHandlers, state.elementStates, state);
-      wrapper.appendChild(rootElement);
-    }
-    state.rootElement = wrapper;
-    container.appendChild(wrapper);
-  }
-  return {
-    rootElement: state.rootElement,
-    update: (newContext) => update(state, newContext),
-    destroy: () => destroy(state)
-  };
 }
 function update(state, newContext) {
   state.context = newContext;
@@ -1399,6 +2131,7 @@ async function fetchComponent(id, options = {}) {
     ...DEFAULT_RETRY_CONFIG,
     ...retryConfig
   };
+  const startTime = performance.now();
   if (!forceRefresh) {
     const cached = getFromCache(id, version, cacheStrategy, cacheConfig);
     if (cached) {
@@ -1406,6 +2139,11 @@ async function fetchComponent(id, options = {}) {
       if (cached.bundle) {
         registry = buildRegistryFromBundle(cached);
       }
+      const duration = performance.now() - startTime;
+      analytics.trackFetch(id, cached.version, duration, true, {
+        cacheHit: true,
+        fetchDuration: Math.round(duration)
+      });
       return {
         data: cached,
         fromCache: true,
@@ -1452,6 +2190,12 @@ async function fetchComponent(id, options = {}) {
           version: entry.resolved || entry.version
         }));
       }
+      const duration = performance.now() - startTime;
+      analytics.trackFetch(id, resolvedVersion, duration, false, {
+        cacheHit: false,
+        fetchDuration: Math.round(duration),
+        dependencyCount: data.dependencies ? Object.keys(data.dependencies).length : 0
+      });
       return {
         data,
         fromCache: false,
@@ -1470,7 +2214,11 @@ async function fetchComponent(id, options = {}) {
       }
     }
   }
-  throw lastError || new Error("Failed to fetch component");
+  const finalError = lastError || new Error("Failed to fetch component");
+  analytics.trackError(id, version, finalError, {
+    errorType: "fetch"
+  });
+  throw finalError;
 }
 async function fetchComponentWithDependencies(id, options = {}) {
   const result = await fetchComponent(id, { ...options, includeBundle: true });
@@ -1952,8 +2700,13 @@ function getSampleValue(def) {
 init_registry();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AnalyticsCollector,
   DEFAULT_CACHE_CONFIG,
   DEFAULT_RETRY_CONFIG,
+  LongTaskObserver,
+  MemorySampler,
+  SessionManager,
+  analytics,
   applyStyles,
   batchFetchComponents,
   buildClassName,
@@ -1967,6 +2720,7 @@ init_registry();
   clearStyles,
   collectAllDependencies,
   compareVersions,
+  configureAnalytics,
   createRegistry,
   detectCircularDependencies,
   extractBindingKeys,
@@ -1977,11 +2731,15 @@ init_registry();
   formatStyleValue,
   formatVersion,
   generateTestCases,
+  getAnalytics,
   getCacheKey,
   getDependencyTree,
   getFromCache,
+  getLongTaskObserver,
   getMemoryCacheSize,
+  getMemorySampler,
   getRegistryUrl,
+  getSessionManager,
   hasTemplateSyntax,
   invalidateCache,
   isComponentAvailable,
@@ -1991,6 +2749,10 @@ init_registry();
   processStyles,
   render,
   renderDynamicList,
+  resetAnalytics,
+  resetLongTaskObserver,
+  resetMemorySampler,
+  resetSessionManager,
   resolveBindingPath,
   resolveTemplate,
   resolveTemplateValue,