FEO breadcrumbs.js

/**
 * Add a breadcrumb to "interactionTrail" array
 * @param  {Event} event
 */
function collectBreadcrumb({ type, target }) {
	const { tagName, attributes = [] } = target;
	const breadcrumb = {
		type,

		// Turn the event target into a descriptive object
		target: Object.assign(
				{ tagName },
				...[...attributes].map(
					({name, value}) => ({[name]: value})
				),
			)
		)
	};

	// For form submission - collect form information
	/form/i.test(tagName) && Object.assign(
		breadcrumb,
		{
			fields: [...target].filter(

				// Don't want sensitive information in our logs
				({name}) => name && /password/i.test(name)
			).map(

				// Turn fields into key-value objects
				({name, value}) => ({[name]: value})
			)
		}
	);

	// I'm using unshift so that the most recent interaction is at the top
	(window.interactionTrail = window.interactionTrail || []).unshift(breadcrumb);
}

['click', 'submit'].forEach(
	type => window.addEventListener(type, collectBreadcrumb)
);