@flareapp/vue 2.4.0 → 2.5.0

package/dist/FlareErrorBoundary-9LmNTGFB.mjs

@@ -0,0 +1,474 @@
+import { convertToError, redactUrlQuery, resolveDenylist } from "@flareapp/core";
+import { defineComponent, getCurrentInstance, onErrorCaptured, ref, watch } from "vue";
+
+//#region src/resolveFlare.ts
+let defaultProvider = null;
+function isDevMode() {
+	try {
+		return process.env.NODE_ENV !== "production";
+	} catch {
+		return false;
+	}
+}
+function registerDefaultFlare(provider) {
+	if (typeof window !== "undefined" && window.__flare) {
+		const message = "[flare] @flareapp/vue (web root) was imported in a renderer where the Electron bridge is present, pulling the keyed @flareapp/js singleton into the renderer. Import @flareapp/vue/inject and pass the @flareapp/electron/renderer instance instead.";
+		if (isDevMode()) throw new Error(message);
+		console.warn(message);
+	}
+	defaultProvider = provider;
+}
+function resolveFlare(explicit) {
+	if (explicit) return explicit;
+	if (defaultProvider) return defaultProvider();
+	throw new Error("[flare] No Flare instance available. Pass `flare` (e.g. from @flareapp/electron/renderer), or import @flareapp/vue (the package root) to use the @flareapp/js default singleton.");
+}
+
+//#endregion
+//#region src/constants.ts
+const PACKAGE_VERSION = typeof process !== "undefined" && typeof process.env?.PACKAGE_VERSION !== "undefined" ? process.env.PACKAGE_VERSION : "?";
+const MAX_HIERARCHY_DEPTH = 50;
+const DEFAULT_PROPS_DENYLIST = /password|passwd|pwd|token|secret|authorization|\bauth\b|bearer|oauth|credentials?|cookie|api[-_]?key|private[-_]?key|session|csrf|xsrf|\bpin\b|\bssn\b|card[-_]?number|\bcvv\b/i;
+function resolveDenylist$1(custom, replaceDefault = false) {
+	return resolveDenylist(custom, replaceDefault, DEFAULT_PROPS_DENYLIST);
+}
+const MAX_PROP_STRING_LENGTH = 1e3;
+const MAX_PROP_ARRAY_LENGTH = 100;
+const MAX_PROP_OBJECT_KEYS = 100;
+const INFO_TO_ORIGIN = {
+	"setup function": "setup",
+	"render function": "render",
+	"component update": "render",
+	"watcher getter": "watcher",
+	"watcher callback": "watcher",
+	"watcher cleanup function": "watcher",
+	"native event handler": "event",
+	"component event handler": "event",
+	"beforeCreate hook": "lifecycle",
+	"created hook": "lifecycle",
+	"beforeMount hook": "lifecycle",
+	"mounted hook": "lifecycle",
+	"beforeUpdate hook": "lifecycle",
+	"updated hook": "lifecycle",
+	"beforeUnmount hook": "lifecycle",
+	"unmounted hook": "lifecycle",
+	"activated hook": "lifecycle",
+	"deactivated hook": "lifecycle",
+	"errorCaptured hook": "lifecycle",
+	"renderTracked hook": "lifecycle",
+	"renderTriggered hook": "lifecycle",
+	"serverPrefetch hook": "lifecycle",
+	"vnode hook": "lifecycle",
+	"directive hook": "lifecycle",
+	"transition hook": "lifecycle",
+	"ref function": "setup",
+	"async component loader": "setup",
+	"scheduler flush": "render",
+	"app errorHandler": "lifecycle",
+	"app warnHandler": "lifecycle",
+	"app unmount cleanup function": "lifecycle",
+	"0": "setup",
+	"1": "render",
+	"2": "watcher",
+	"3": "watcher",
+	"4": "watcher",
+	"5": "event",
+	"6": "event",
+	"7": "lifecycle",
+	"8": "lifecycle",
+	"9": "lifecycle",
+	"10": "lifecycle",
+	"11": "lifecycle",
+	"12": "setup",
+	"13": "setup",
+	"14": "render",
+	"15": "render",
+	"16": "lifecycle",
+	"sp": "lifecycle",
+	"bc": "lifecycle",
+	"c": "lifecycle",
+	"bm": "lifecycle",
+	"m": "lifecycle",
+	"bu": "lifecycle",
+	"u": "lifecycle",
+	"bum": "lifecycle",
+	"um": "lifecycle",
+	"a": "lifecycle",
+	"da": "lifecycle",
+	"ec": "lifecycle",
+	"rtc": "lifecycle",
+	"rtg": "lifecycle"
+};
+
+//#endregion
+//#region src/getComponentName.ts
+function getComponentName(instance) {
+	if (!instance) return "AnonymousComponent";
+	const options = instance.$options;
+	return options.__name || options.name || "AnonymousComponent";
+}
+
+//#endregion
+//#region src/buildComponentHierarchy.ts
+function buildComponentHierarchy(instance) {
+	const hierarchy = [];
+	let current = instance;
+	while (current && hierarchy.length < MAX_HIERARCHY_DEPTH) {
+		hierarchy.push(getComponentName(current));
+		current = current.$parent;
+	}
+	return hierarchy;
+}
+
+//#endregion
+//#region src/serializeProps.ts
+function serializeProps(value, maxDepth, denylist = DEFAULT_PROPS_DENYLIST) {
+	return serialize(value, 0, maxDepth, /* @__PURE__ */ new WeakSet(), denylist);
+}
+function serialize(value, depth, maxDepth, seen, denylist) {
+	if (value === null) return null;
+	const type = typeof value;
+	if (type === "function") return "[Function]";
+	if (type === "symbol") return "[Symbol]";
+	if (type === "bigint") return value.toString();
+	if (type === "string") return truncateString(value);
+	if (type !== "object") return value;
+	if (seen.has(value)) return "[Circular]";
+	if (Array.isArray(value)) {
+		if (depth > maxDepth) return "[Array]";
+		seen.add(value);
+		const out = (value.length > MAX_PROP_ARRAY_LENGTH ? value.slice(0, MAX_PROP_ARRAY_LENGTH) : value).map((item) => serialize(item, depth + 1, maxDepth, seen, denylist));
+		if (value.length > MAX_PROP_ARRAY_LENGTH) out.push(`[… ${value.length - MAX_PROP_ARRAY_LENGTH} more items]`);
+		seen.delete(value);
+		return out;
+	}
+	if (!isPlainObject(value)) return "[Object]";
+	if (depth > maxDepth) return "[Object]";
+	seen.add(value);
+	const out = {};
+	const keys = Object.keys(value);
+	const limitedKeys = keys.length > MAX_PROP_OBJECT_KEYS ? keys.slice(0, MAX_PROP_OBJECT_KEYS) : keys;
+	for (const key of limitedKeys) {
+		if (denylist.test(key)) {
+			out[key] = "[redacted]";
+			continue;
+		}
+		out[key] = serialize(value[key], depth + 1, maxDepth, seen, denylist);
+	}
+	if (keys.length > MAX_PROP_OBJECT_KEYS) out["…"] = `[${keys.length - MAX_PROP_OBJECT_KEYS} more keys]`;
+	seen.delete(value);
+	return out;
+}
+function truncateString(value) {
+	if (value.length <= MAX_PROP_STRING_LENGTH) return value;
+	return `${value.slice(0, MAX_PROP_STRING_LENGTH)}…[truncated ${value.length - MAX_PROP_STRING_LENGTH} chars]`;
+}
+function isPlainObject(value) {
+	if (value === null || typeof value !== "object") return false;
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === null || prototype === Object.prototype;
+}
+
+//#endregion
+//#region src/buildComponentHierarchyFrames.ts
+function buildComponentHierarchyFrames(instance, options) {
+	const frames = [];
+	let current = instance;
+	while (current && frames.length < MAX_HIERARCHY_DEPTH) {
+		const frameOptions = current.$options;
+		const frame = {
+			component: getComponentName(current),
+			file: frameOptions.__file ?? null
+		};
+		if (options.attachProps && current.$props) frame.props = serializeProps(current.$props, options.propsMaxDepth, options.propsDenylist);
+		frames.push(frame);
+		current = current.$parent;
+	}
+	return frames;
+}
+
+//#endregion
+//#region src/getErrorOrigin.ts
+function getErrorOrigin(info) {
+	return INFO_TO_ORIGIN[info] ?? "unknown";
+}
+
+//#endregion
+//#region src/getRouteContext.ts
+const ROUTE_PARAMS_DEPTH = 2;
+function getRouteContext(router, options = {}) {
+	if (!router || typeof router !== "object" || !("currentRoute" in router)) return null;
+	const currentRouteRef = router.currentRoute;
+	if (!currentRouteRef || typeof currentRouteRef !== "object" || !("value" in currentRouteRef)) return null;
+	const route = currentRouteRef.value;
+	if (!route || typeof route !== "object") return null;
+	const r = route;
+	const name = r.name;
+	const denylist = options.denylist ?? DEFAULT_PROPS_DENYLIST;
+	const params = r.params && typeof r.params === "object" ? r.params : {};
+	const query = r.query && typeof r.query === "object" ? r.query : {};
+	return {
+		name: typeof name === "string" ? name : typeof name === "symbol" ? name.toString() : null,
+		path: typeof r.path === "string" ? r.path : "",
+		fullPath: typeof r.fullPath === "string" ? redactUrlQuery(r.fullPath, denylist) : "",
+		params: serializeProps(params, ROUTE_PARAMS_DEPTH, denylist),
+		query: serializeProps(query, ROUTE_PARAMS_DEPTH, denylist),
+		hash: typeof r.hash === "string" ? r.hash : "",
+		matched: Array.isArray(r.matched) ? r.matched.map((record) => {
+			if (!record || typeof record !== "object") return "unknown";
+			const n = record.name;
+			return typeof n === "string" ? n : typeof n === "symbol" ? n.toString() : "unknown";
+		}) : []
+	};
+}
+
+//#endregion
+//#region src/identify.ts
+const sdkTagged = /* @__PURE__ */ new WeakSet();
+const frameworkTagged = /* @__PURE__ */ new WeakSet();
+function registerVueSdkInfo(flare) {
+	if (sdkTagged.has(flare)) return;
+	sdkTagged.add(flare);
+	flare.setSdkInfo({
+		name: "@flareapp/vue",
+		version: PACKAGE_VERSION
+	});
+}
+function tagVueFramework(flare, appVersion) {
+	if (frameworkTagged.has(flare)) return;
+	frameworkTagged.add(flare);
+	flare.setFramework({
+		name: "Vue",
+		version: appVersion
+	});
+}
+
+//#endregion
+//#region src/flareVue.ts
+function vueContextToAttributes(context) {
+	const vue = {
+		info: context.vue.info,
+		errorOrigin: context.vue.errorOrigin,
+		componentName: context.vue.componentName,
+		componentHierarchy: context.vue.componentHierarchy,
+		componentHierarchyFrames: context.vue.componentHierarchyFrames
+	};
+	if (context.vue.componentProps) vue.componentProps = context.vue.componentProps;
+	if (context.vue.route) vue.route = context.vue.route;
+	return { "context.custom": { vue } };
+}
+function vueWarningContextToAttributes(context) {
+	const vue = {
+		type: context.vue.type,
+		info: context.vue.info,
+		componentName: context.vue.componentName,
+		componentTrace: context.vue.componentTrace
+	};
+	if (context.vue.route) vue.route = context.vue.route;
+	return { "context.custom": { vue } };
+}
+const installedApps = /* @__PURE__ */ new WeakSet();
+const flareVue = (app, options) => {
+	if (installedApps.has(app)) return;
+	const flare = resolveFlare(options?.flare);
+	installedApps.add(app);
+	if (!options?.flare) registerVueSdkInfo(flare);
+	tagVueFramework(flare, app.version);
+	const attachProps = options?.attachProps ?? false;
+	const propsMaxDepth = options?.propsMaxDepth ?? 2;
+	const propsDenylist = resolveDenylist$1(options?.propsDenylist, options?.replaceDefaultDenylist);
+	const initialErrorHandler = app.config.errorHandler;
+	app.config.errorHandler = (error, instance, info) => {
+		const errorToReport = convertToError(error);
+		options?.beforeEvaluate?.({
+			error: errorToReport,
+			instance,
+			info
+		});
+		const errorOrigin = getErrorOrigin(info);
+		const componentName = getComponentName(instance);
+		const componentProps = attachProps && instance?.$props ? serializeProps(instance.$props, propsMaxDepth, propsDenylist) : void 0;
+		const componentHierarchy = buildComponentHierarchy(instance);
+		const componentHierarchyFrames = buildComponentHierarchyFrames(instance, {
+			attachProps,
+			propsMaxDepth,
+			propsDenylist
+		});
+		const route = getRouteContext(app.config.globalProperties.$router, { denylist: propsDenylist });
+		const context = { vue: {
+			info,
+			errorOrigin,
+			componentName,
+			...componentProps && { componentProps },
+			componentHierarchy,
+			componentHierarchyFrames,
+			...route && { route }
+		} };
+		const finalContext = options?.beforeSubmit?.({
+			error: errorToReport,
+			instance,
+			info,
+			context
+		}) ?? context;
+		flare.reportSilently(errorToReport, vueContextToAttributes(finalContext));
+		options?.afterSubmit?.({
+			error: errorToReport,
+			instance,
+			info,
+			context: finalContext
+		});
+		if (typeof initialErrorHandler === "function") {
+			initialErrorHandler(error, instance, info);
+			return;
+		}
+		console.error(error);
+	};
+	if (options?.captureWarnings) {
+		const initialWarnHandler = app.config.warnHandler;
+		app.config.warnHandler = (msg, instance, trace) => {
+			const componentName = getComponentName(instance);
+			const route = getRouteContext(app.config.globalProperties.$router, { denylist: propsDenylist });
+			const context = { vue: {
+				type: "warning",
+				info: msg,
+				componentName,
+				componentTrace: trace,
+				...route && { route }
+			} };
+			Promise.resolve(flare.reportMessage(msg, "warning", vueWarningContextToAttributes(context))).catch(() => {});
+			if (typeof initialWarnHandler === "function") initialWarnHandler(msg, instance, trace);
+		};
+	}
+};
+
+//#endregion
+//#region src/FlareErrorBoundary.ts
+const FlareErrorBoundary = defineComponent({
+	name: "FlareErrorBoundary",
+	props: {
+		flare: {
+			type: Object,
+			default: void 0
+		},
+		beforeEvaluate: {
+			type: Function,
+			default: void 0
+		},
+		beforeSubmit: {
+			type: Function,
+			default: void 0
+		},
+		afterSubmit: {
+			type: Function,
+			default: void 0
+		},
+		onReset: {
+			type: Function,
+			default: void 0
+		},
+		resetKeys: {
+			type: Array,
+			default: void 0
+		},
+		attachProps: {
+			type: Boolean,
+			default: false
+		},
+		propsMaxDepth: {
+			type: Number,
+			default: 2
+		},
+		propsDenylist: {
+			type: RegExp,
+			default: void 0
+		},
+		replaceDefaultDenylist: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(props, { slots }) {
+		const flareInstance = resolveFlare(props.flare);
+		tagVueFramework(flareInstance, getCurrentInstance()?.appContext.app.version);
+		const currentInstance = getCurrentInstance();
+		const error = ref(null);
+		const componentProps = ref(void 0);
+		const componentHierarchy = ref([]);
+		const componentHierarchyFrames = ref([]);
+		const resetErrorBoundary = () => {
+			props.onReset?.(error.value);
+			error.value = null;
+			componentProps.value = void 0;
+			componentHierarchy.value = [];
+			componentHierarchyFrames.value = [];
+		};
+		watch(() => props.resetKeys, (nextKeys, prevKeys) => {
+			if (error.value === null || !nextKeys || !prevKeys) return;
+			const lengthChanged = prevKeys.length !== nextKeys.length;
+			const valuesChanged = nextKeys.some((key, i) => !Object.is(key, prevKeys[i]));
+			if (lengthChanged || valuesChanged) resetErrorBoundary();
+		});
+		onErrorCaptured((currentError, instance, info) => {
+			const errorToReport = convertToError(currentError);
+			props.beforeEvaluate?.({
+				error: errorToReport,
+				instance,
+				info
+			});
+			const resolvedDenylist = resolveDenylist$1(props.propsDenylist, props.replaceDefaultDenylist);
+			const hierarchy = buildComponentHierarchy(instance);
+			const hierarchyFrames = buildComponentHierarchyFrames(instance, {
+				attachProps: props.attachProps,
+				propsMaxDepth: props.propsMaxDepth,
+				propsDenylist: resolvedDenylist
+			});
+			const componentName = getComponentName(instance);
+			error.value = errorToReport;
+			const instanceProps = props.attachProps && instance?.$props ? serializeProps(instance.$props, props.propsMaxDepth, resolvedDenylist) : void 0;
+			const errorOrigin = getErrorOrigin(info);
+			const route = getRouteContext(currentInstance?.appContext.config.globalProperties.$router, { denylist: resolvedDenylist });
+			const context = { vue: {
+				info,
+				errorOrigin,
+				...route && { route },
+				componentName,
+				...instanceProps && { componentProps: instanceProps },
+				componentHierarchy: hierarchy,
+				componentHierarchyFrames: hierarchyFrames
+			} };
+			const finalContext = props.beforeSubmit?.({
+				error: errorToReport,
+				instance,
+				info,
+				context
+			}) ?? context;
+			componentProps.value = finalContext.vue.componentProps;
+			componentHierarchy.value = finalContext.vue.componentHierarchy;
+			componentHierarchyFrames.value = finalContext.vue.componentHierarchyFrames;
+			flareInstance.reportSilently(errorToReport, vueContextToAttributes(finalContext));
+			props.afterSubmit?.({
+				error: errorToReport,
+				instance,
+				info,
+				context: finalContext
+			});
+			return false;
+		});
+		return () => {
+			if (error.value !== null) {
+				if (slots.fallback) return slots.fallback({
+					error: error.value,
+					...componentProps.value && { componentProps: componentProps.value },
+					componentHierarchy: componentHierarchy.value,
+					componentHierarchyFrames: componentHierarchyFrames.value,
+					resetErrorBoundary
+				});
+				return null;
+			}
+			return slots.default?.();
+		};
+	}
+});
+
+//#endregion
+export { registerDefaultFlare as i, flareVue as n, DEFAULT_PROPS_DENYLIST as r, FlareErrorBoundary as t };