Add sentry.io timings and context

Adds search results timing
Adds more context (user and recent query information)

Author: thostetler

src/config/common.config.js

@@ -44,12 +44,14 @@ define([], function () {
 
   require([
     'config/discovery.vars',
+    'config/utils',
     'regenerator-runtime',
     'array-flat-polyfill',
     'polyfill',
     'js/dark-mode-switch',
   ], function (config) {
     // stub here to make sure these load before the main app
+
   });
 
   // set up handlebars helpers

src/config/utils.js

@@ -0,0 +1,42 @@
+define([], function() {
+
+  const DEFAULT_TIMEOUT = 30000;
+
+  /**
+   * Waits for an element to appear in the DOM and be interactive using MutationObserver.
+   * @param {string} selector - The CSS selector of the element to wait for.
+   * @param {number} timeout - The maximum time to wait in milliseconds (default is 5000ms).
+   * @returns {Promise<Element>} - A promise that resolves to the found element.
+   */
+  function waitForElement(selector, timeout = DEFAULT_TIMEOUT) {
+    return new Promise((resolve, reject) => {
+      const observer = new MutationObserver(() => {
+        const element = document.querySelector(selector);
+
+        if (element && element.offsetParent !== null) {
+          observer.disconnect(); // Stop observing once the element is found and interactive
+          resolve(element);
+        }
+      });
+
+      // Start observing the document for changes in the DOM
+      observer.observe(document.body, { childList: true, subtree: true });
+
+      // Set a timeout to stop observing if the element doesn't appear in time
+      setTimeout(() => {
+        observer.disconnect();
+        reject(
+          new Error(
+            `Element with selector "${selector}" was not found within ${timeout}ms.`
+          )
+        );
+      }, timeout);
+    });
+  }
+
+  window.utils = {
+    waitForElement: waitForElement,
+  };
+
+  return window.utils;
+});