@flareapp/vue 1.0.1 → 2.0.0

package/dist/index.d.mts

@@ -1,28 +1,176 @@
-import { flare } from '@flareapp/js';
+import * as vue from "vue";
+import { ComponentPublicInstance, Plugin, PropType } from "vue";
 
-function flareVue(app) {
-    const initialErrorHandler = app.config.errorHandler;
-
-    app.config.errorHandler = (error, vm, info) => {
-        const componentName =
-            vm && vm.$options && vm.$options.name
-                ? vm.$options.name
-                : 'AnonymousComponent';
-
-        const context = {
-            vue: { info, componentName },
-        };
-
-        flare.report(error, context, { vue: { vm, info } });
-
-        if (typeof initialErrorHandler === 'function') {
-            initialErrorHandler(error, vm, info);
-
-            return;
-        }
-
-        throw error;
-    };
-}
-
-export { flareVue };
+//#region src/types.d.ts
+type ErrorOrigin = 'setup' | 'render' | 'lifecycle' | 'event' | 'watcher' | 'unknown';
+type ComponentHierarchyFrame = {
+  component: string;
+  file: string | null;
+  props?: Record<string, unknown>;
+};
+type RouteParamValue = string | string[];
+type RouteQueryValue = string | null;
+type RouteContext = {
+  name: string | null;
+  path: string;
+  fullPath: string;
+  params: Record<string, RouteParamValue>;
+  query: Record<string, RouteQueryValue | RouteQueryValue[]>;
+  hash: string;
+  matched: string[];
+};
+type FlareVueContext = {
+  vue: {
+    info: string;
+    errorOrigin: ErrorOrigin;
+    componentName: string;
+    componentProps?: Record<string, unknown>;
+    componentHierarchy: string[];
+    componentHierarchyFrames: ComponentHierarchyFrame[];
+    route?: RouteContext;
+  };
+};
+type FlareVueWarningContext = {
+  vue: {
+    type: 'warning';
+    info: string;
+    componentName: string;
+    componentTrace: string;
+    route?: RouteContext;
+  };
+};
+type FlareErrorBoundaryHookParams = {
+  error: Error;
+  instance: ComponentPublicInstance | null;
+  info: string;
+};
+type FlareVueOptions = {
+  captureWarnings?: boolean;
+  attachProps?: boolean;
+  propsMaxDepth?: number;
+  propsDenylist?: RegExp;
+  replaceDefaultDenylist?: boolean;
+  beforeEvaluate?: (params: FlareErrorBoundaryHookParams) => void;
+  beforeSubmit?: (params: FlareErrorBoundaryHookParams & {
+    context: FlareVueContext;
+  }) => FlareVueContext;
+  afterSubmit?: (params: FlareErrorBoundaryHookParams & {
+    context: FlareVueContext;
+  }) => void;
+};
+type FlareErrorBoundaryFallbackProps = {
+  error: Error;
+  componentProps?: Record<string, unknown>;
+  componentHierarchy: string[];
+  componentHierarchyFrames: ComponentHierarchyFrame[];
+  resetErrorBoundary: () => void;
+};
+//#endregion
+//#region src/FlareErrorBoundary.d.ts
+declare const FlareErrorBoundary: vue.DefineComponent<vue.ExtractPropTypes<{
+  beforeEvaluate: {
+    type: PropType<(params: FlareErrorBoundaryHookParams) => void>;
+    default: undefined;
+  };
+  beforeSubmit: {
+    type: PropType<(params: FlareErrorBoundaryHookParams & {
+      context: FlareVueContext;
+    }) => FlareVueContext>;
+    default: undefined;
+  };
+  afterSubmit: {
+    type: PropType<(params: FlareErrorBoundaryHookParams & {
+      context: FlareVueContext;
+    }) => void>;
+    default: undefined;
+  };
+  onReset: {
+    type: PropType<(error: Error | null) => void>;
+    default: undefined;
+  };
+  resetKeys: {
+    type: PropType<unknown[]>;
+    default: undefined;
+  };
+  attachProps: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  propsMaxDepth: {
+    type: NumberConstructor;
+    default: number;
+  };
+  propsDenylist: {
+    type: PropType<RegExp>;
+    default: undefined;
+  };
+  replaceDefaultDenylist: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+  [key: string]: any;
+}>[] | null | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+  beforeEvaluate: {
+    type: PropType<(params: FlareErrorBoundaryHookParams) => void>;
+    default: undefined;
+  };
+  beforeSubmit: {
+    type: PropType<(params: FlareErrorBoundaryHookParams & {
+      context: FlareVueContext;
+    }) => FlareVueContext>;
+    default: undefined;
+  };
+  afterSubmit: {
+    type: PropType<(params: FlareErrorBoundaryHookParams & {
+      context: FlareVueContext;
+    }) => void>;
+    default: undefined;
+  };
+  onReset: {
+    type: PropType<(error: Error | null) => void>;
+    default: undefined;
+  };
+  resetKeys: {
+    type: PropType<unknown[]>;
+    default: undefined;
+  };
+  attachProps: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  propsMaxDepth: {
+    type: NumberConstructor;
+    default: number;
+  };
+  propsDenylist: {
+    type: PropType<RegExp>;
+    default: undefined;
+  };
+  replaceDefaultDenylist: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+}>> & Readonly<{}>, {
+  beforeEvaluate: (params: FlareErrorBoundaryHookParams) => void;
+  beforeSubmit: (params: FlareErrorBoundaryHookParams & {
+    context: FlareVueContext;
+  }) => FlareVueContext;
+  afterSubmit: (params: FlareErrorBoundaryHookParams & {
+    context: FlareVueContext;
+  }) => void;
+  onReset: (error: Error | null) => void;
+  resetKeys: unknown[];
+  attachProps: boolean;
+  propsMaxDepth: number;
+  propsDenylist: RegExp;
+  replaceDefaultDenylist: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/flareVue.d.ts
+declare const flareVue: Plugin<[FlareVueOptions?]>;
+//#endregion
+//#region src/constants.d.ts
+declare const DEFAULT_PROPS_DENYLIST: RegExp;
+//#endregion
+export { type ComponentHierarchyFrame, DEFAULT_PROPS_DENYLIST, type ErrorOrigin, FlareErrorBoundary, type FlareErrorBoundaryFallbackProps, type FlareErrorBoundaryHookParams, type FlareVueContext, type FlareVueOptions, type FlareVueWarningContext, type RouteContext, type RouteParamValue, type RouteQueryValue, flareVue };

package/dist/index.mjs

@@ -1,20 +1,442 @@
-// src/index.js
-import { flare } from "@flareapp/js";
-function flareVue(app) {
-  const initialErrorHandler = app.config.errorHandler;
-  app.config.errorHandler = (error, vm, info) => {
-    const componentName = vm && vm.$options && vm.$options.name ? vm.$options.name : "AnonymousComponent";
-    const context = {
-      vue: { info, componentName }
-    };
-    flare.report(error, context, { vue: { vm, info } });
-    if (typeof initialErrorHandler === "function") {
-      initialErrorHandler(error, vm, info);
-      return;
-    }
-    throw error;
-  };
-}
-export {
-  flareVue
+import { flare, redactFullPath, resolveDenylist } from "@flareapp/js";
+import { defineComponent, getCurrentInstance, onErrorCaptured, ref, watch } from "vue";
+
+//#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/convertToError.ts
+function convertToError(error) {
+	if (error instanceof Error) return error;
+	if (typeof error === "string") return new Error(error);
+	return new Error(String(error));
+}
+
+//#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" ? redactFullPath(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/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": {
+		framework: "vue",
+		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": {
+		framework: "vue",
+		vue
+	} };
+}
+const installedApps = /* @__PURE__ */ new WeakSet();
+const flareVue = (app, options) => {
+	if (installedApps.has(app)) return;
+	installedApps.add(app);
+	flare.setSdkInfo({
+		name: "@flareapp/vue",
+		version: PACKAGE_VERSION
+	});
+	flare.setFramework({
+		name: "Vue",
+		version: 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;
+		Promise.resolve(flare.report(errorToReport, vueContextToAttributes(finalContext))).catch(() => {});
+		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: {
+		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 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;
+			Promise.resolve(flare.report(errorToReport, vueContextToAttributes(finalContext))).catch(() => {});
+			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 { DEFAULT_PROPS_DENYLIST, FlareErrorBoundary, flareVue };