@superblocksteam/library 2.0.139-next.1 → 2.0.140-next.0

package/dist/lib/index.js

@@ -26,6 +26,222 @@ import { useHotkeys } from "react-hotkeys-hook";
 import ReactDOM from "react-dom";
 import equal from "@superblocksteam/fast-deep-equal/es6/index.js";
 import { compile, middleware, prefixer, serialize, stringify } from "stylis";
+//#region src/lib/tracing/dynamic-import-errors.ts
+/**
+* Diagnostics for transient dynamic `import()` failures in the rendered app.
+*
+* These surface as `TypeError: Failed to fetch dynamically imported module: …`
+* and are otherwise invisible: they are unhandled promise rejections that no
+* existing handler records, and the shared fetch/XHR instrumentation ignores
+* static assets. Without this reporter the only signal is a user complaint
+* (see APPS-1428 / APPS-3097).
+*
+* The reporter emits one structured `console.error`, which the library's
+* `LibraryEarlyConsoleBuffer` ships to OpenTelemetry (service
+* `superblocks-ui-framework`) at ERROR severity with the diagnostic fields as
+* log attributes. It is installed early (before bootstrap) so failures during
+* initial load / generation are buffered and flushed once the OTel logger is
+* initialized.
+*
+* The core failure event is emitted synchronously so it survives an imminent
+* page unload. On top of that it re-fetches the failed module URL (see
+* `probeModuleUrl`) and emits a separate, correlated `dynamic_import_probe`
+* event with the HTTP status the browser's `import()` rejection hides — the
+* field that distinguishes a missing chunk (404, stale build) from an
+* unreachable dev server (502/error, disconnected/torn-down edit session) from
+* a serving-config issue (200 with wrong content).
+*/
+const DYNAMIC_IMPORT_ERROR_PATTERNS = [
+	"Failed to fetch dynamically imported module",
+	"error loading dynamically imported module",
+	"Importing a module script failed"
+];
+const DEFAULT_DEDUP_WINDOW_MS = 5e3;
+const DEFAULT_PROBE_TIMEOUT_MS = 3e3;
+function isDynamicImportError(message) {
+	if (!message) return false;
+	return DYNAMIC_IMPORT_ERROR_PATTERNS.some((pattern) => message.includes(pattern));
+}
+function extractModuleUrl(message) {
+	return message.match(/dynamically imported module:\s*(\S+)/i)?.[1];
+}
+function extractVersionToken(moduleUrl) {
+	if (!moduleUrl) return void 0;
+	try {
+		return new URL(moduleUrl).searchParams.get("t") ?? void 0;
+	} catch {
+		return;
+	}
+}
+function detectMode(href) {
+	try {
+		const { hostname } = new URL(href);
+		if (hostname === "localhost" || hostname.startsWith("127.")) return "local";
+		if (hostname.includes(".edit.")) return "edit";
+		return "deployed";
+	} catch {
+		return "deployed";
+	}
+}
+function safePathname(href) {
+	try {
+		return new URL(href).pathname;
+	} catch {
+		return;
+	}
+}
+/**
+* Whether the customer app shell has rendered, computed the same way as
+* `edit-mode/error-capture`: the edit-mode global if set, otherwise the
+* `#sb-provider-root` element (rendered by `<App>` in every mode). The DOM
+* check keeps this meaningful in deployed mode, where the edit-mode global is
+* never set.
+*/
+function detectAppRendered(win) {
+	if (win.__SB_PROVIDER_RENDERED_EDIT_MODE__ === true) return true;
+	return !!win.document?.getElementById?.("sb-provider-root");
+}
+/**
+* Re-fetch the module URL that `import()` failed on, to capture the HTTP
+* outcome the browser's rejection message hides. This is the field that
+* separates the leading APPS-1428 hypotheses:
+*
+* - `404` — the chunk is genuinely gone: stale build / version skew (the tab's
+*   module graph references a hash the server no longer has).
+* - `502`/`503`/`504`, or a rejected fetch recorded as `error` — the origin is
+*   unreachable: in edit mode this is the per-session dev server behind the
+*   `*.edit.superblocks.com` proxy being disconnected / torn down (inactivity)
+*   / restarting. Note `navigator.onLine` stays `true` here, so the probe is
+*   the only way to see it.
+* - `200` — the asset is served but was unusable (content-type / SPA-fallback
+*   HTML), i.e. a serving-config problem, not a missing asset.
+*
+* Uses GET (not HEAD): dev servers such as Vite may not route HEAD for module
+* URLs and would misreport an existing chunk as 404. `no-store` bypasses the
+* cache so we observe the real current state. Bounded by an abort timeout and
+* never throws.
+*/
+async function probeModuleUrl(url, fetchImpl, timeoutMs) {
+	const controller = typeof AbortController !== "undefined" ? new AbortController() : void 0;
+	const timer = controller ? setTimeout(() => controller.abort(), timeoutMs) : void 0;
+	try {
+		const res = await fetchImpl(url, {
+			method: "GET",
+			cache: "no-store",
+			signal: controller?.signal
+		});
+		return {
+			status: res.status,
+			ok: res.ok
+		};
+	} catch (e) {
+		return { error: e instanceof Error ? `${e.name}: ${e.message}` : String(e) };
+	} finally {
+		if (timer !== void 0) clearTimeout(timer);
+	}
+}
+function buildDynamicImportFailureAttributes(input) {
+	const failedModuleUrl = extractModuleUrl(input.message);
+	return {
+		event: "dynamic_import_failure",
+		"dynamic_import.failed_module_url": failedModuleUrl,
+		"dynamic_import.version_token": extractVersionToken(failedModuleUrl),
+		"dynamic_import.mode": detectMode(input.href),
+		"dynamic_import.route": safePathname(input.href),
+		"dynamic_import.app_rendered": input.appRendered,
+		"dynamic_import.online": input.online,
+		"dynamic_import.error.name": input.errorName,
+		"dynamic_import.error.message": input.message
+	};
+}
+function buildModuleProbeAttributes(failedModuleUrl, mode, probe) {
+	return {
+		event: "dynamic_import_probe",
+		"dynamic_import.failed_module_url": failedModuleUrl,
+		"dynamic_import.mode": mode,
+		"dynamic_import.probe.status": probe.status,
+		"dynamic_import.probe.ok": probe.ok,
+		"dynamic_import.probe.error": probe.error
+	};
+}
+function defaultReport(message, attributes) {
+	console.error(`[dynamic-import-failure] ${message}`, consoleLogAttributes(attributes));
+}
+function createDynamicImportErrorReporter(options = {}) {
+	const report = options.report ?? defaultReport;
+	const now = options.now ?? (() => Date.now());
+	const dedupWindowMs = options.dedupWindowMs ?? DEFAULT_DEDUP_WINDOW_MS;
+	const probeEnabled = options.probe ?? true;
+	const probeTimeoutMs = options.probeTimeoutMs ?? DEFAULT_PROBE_TIMEOUT_MS;
+	const getWindow = options.getWindow ?? (() => window);
+	const lastReportedAt = /* @__PURE__ */ new Map();
+	return {
+		handle(message, errorName) {
+			if (!isDynamicImportError(message)) return false;
+			const win = getWindow();
+			if (!win) return false;
+			const dedupKey = extractModuleUrl(message) ?? message;
+			const timestamp = now();
+			for (const [key, reportedAt] of lastReportedAt) if (timestamp - reportedAt >= dedupWindowMs) lastReportedAt.delete(key);
+			const previous = lastReportedAt.get(dedupKey);
+			if (previous !== void 0 && timestamp - previous < dedupWindowMs) return false;
+			lastReportedAt.set(dedupKey, timestamp);
+			const href = win.location.href;
+			report(message, buildDynamicImportFailureAttributes({
+				message,
+				errorName,
+				href,
+				online: win.navigator.onLine,
+				appRendered: detectAppRendered(win)
+			}));
+			const failedModuleUrl = extractModuleUrl(message);
+			const fetchImpl = options.fetchImpl ?? (typeof win.fetch === "function" ? win.fetch.bind(win) : void 0);
+			if (probeEnabled && failedModuleUrl && fetchImpl) (async () => {
+				try {
+					const probe = await probeModuleUrl(failedModuleUrl, fetchImpl, probeTimeoutMs);
+					report(message, buildModuleProbeAttributes(failedModuleUrl, detectMode(href), probe));
+				} catch {}
+			})();
+			return true;
+		},
+		dedupSize() {
+			return lastReportedAt.size;
+		}
+	};
+}
+/**
+* Install global listeners that report transient dynamic-import failures.
+* Safe to call in non-browser contexts (no-op). Returns an uninstall function.
+*/
+function installDynamicImportErrorReporter(options = {}) {
+	const win = (options.getWindow ?? (() => typeof window === "undefined" ? void 0 : window))();
+	if (!win) return () => {};
+	const reporter = createDynamicImportErrorReporter({
+		...options,
+		getWindow: () => win
+	});
+	const onRejection = (event) => {
+		try {
+			const reason = event?.reason;
+			const message = typeof reason === "string" ? reason : reason?.message;
+			const name = typeof reason === "string" ? void 0 : reason?.name;
+			reporter.handle(message, name);
+		} catch {}
+	};
+	const onError = (event) => {
+		try {
+			const message = event?.error?.message || event?.message;
+			reporter.handle(message, event?.error?.name);
+		} catch {}
+	};
+	win.addEventListener("unhandledrejection", onRejection);
+	win.addEventListener("error", onError);
+	return () => {
+		win.removeEventListener("unhandledrejection", onRejection);
+		win.removeEventListener("error", onError);
+	};
+}
+//#endregion
 //#region src/lib/internal-details/sb-wrapper.tsx
 /**
 * Register a component to be used with the framework.
@@ -7466,6 +7682,11 @@ function useEmitEmbedEvent() {
 //#endregion
 //#region src/lib/index.ts
 LibraryEarlyConsoleBuffer.getInstance().patchEarly();
+try {
+	installDynamicImportErrorReporter();
+} catch (err) {
+	console.error("[internal] Failed to install dynamic import reporter", err);
+}
 registerHtmlElements();
 //#endregion
 export { App, PageNotFound, Prop, Property, PropsCategory, RouteLoadError, Section, Superblocks, SbProvider as SuperblocksProvider, createElement, createTypedExecuteApi, embedStore, executeApi, getAppMode, logoutIntegrations, queryClient, registerComponent, tailwindStylesCategory, useApi, useApiData, useApiStateful, useEmbedEvent, useEmbedProperties, useEmitEmbedEvent, useSuperblocksDataTags, useSuperblocksGroups, useSuperblocksProfiles, useSuperblocksUser, useTypedApi, useTypedApiData };