Getting an issue

[AthulKKDev]

I am experiencing a problem with a Chrome extension I developed using the extension.js library. The issue I am facing involves the extension capturing errors generated by the browser and causing the website to crash. Is there a solution available to address this issue?###

[cezaraugusto]

hi @AthulKKDev thanks for reporting. could you share a sample repo I can reproduce?

[AthulKKDev]

What i did is i created and script which i'm trying to inject in web page, so the code for that I wrote in content script.

this is my manfest.json file
{ "manifest_version": 3, "version": "1.0", "name": "ufe-debugger", "description": "An extension template using Tailwind. This template includes a new tab override.", "icons": { "16": "public/icons/icon_16.png", "48": "public/icons/icon_48.png" }, "background": { "service_worker": "service-worker.js" }, "action": { "default_title": "Click to open panel" }, "side_panel": { "default_path": "pages/index.html" }, "permissions": [ "sidePanel", "tabs", "storage", "activeTab", "scripting", "runtime", "webNavigation", "webRequest", "contextMenus", "unlimitedStorage", "declarativeContent", "userScripts", "contextMenus" ], "host_permissions": ["<all_urls>"], "content_scripts": [ { "js": ["scripts/content.js"], "matches": ["<all_urls>"], "run_at": "document_idle" } ], "externally_connectable": { "matches": ["<all_urls>"] } }

(function () {
  try {
    // Initial setup
    let ufeErrors, funnelData, products, shopifyCartProducts;
    let isUfePresentDispatched = false;

    // Helper functions (unchanged)
    function isObjectEmpty(obj) {
      return Object.keys(obj).length === 0 && obj.constructor === Object;
    }

    function dispatchEvent(eventName, detail) {
      try {
        const event = new CustomEvent(eventName, { detail });
        document.dispatchEvent(event);
        console.log(`Dispatched ${eventName}`);
      } catch (error) {
        console.error(`Error dispatching ${eventName}:`, error);
      }
    }

    // Check and dispatch events function (with error handling)
    function checkAndDispatchInitialEvents() {
      try {
        if (
          (window.ufe &&
            isObjectEmpty(window.ufe) &&
            !isUfePresentDispatched) ||
          !window.ufe
        ) {
          dispatchEvent(UFE_PRESENT, { isUfeExist: false });
          isUfePresentDispatched = true;
        }

        if (ufeErrors) {
          dispatchEvent(UFE_ERRORS, { ufeErrors });
        } else {
          console.warn(
            "Unable to dispatch ufeErrorsDataAvailableEvent: window.ufe.ufeErrors is not available."
          );
        }

        if (funnelData) {
          dispatchEvent(FUNNEL_DATA, { funnelData });
          dispatchEvent(INPAGE_WIDGET_POSITION, { funnelData });
        } else {
          console.warn(
            "Unable to dispatch funnelDataAvailableEvent: window.ufe.funnelData is not available."
          );
        }

        if (shopifyCartProducts) {
          dispatchEvent(OFFER_PRODUCT_IS_ALREADY_IN_CART, {
            shopifyCartProducts,
            funnelData,
          });
        } else {
          console.warn(
            "Unable to dispatch CHECK_OFFER_PRODUCT_IS_ALREADY_IN_CART: window.ufe.shopifyCartProducts is not available."
          );
        }

        if (products) {
          dispatchEvent(HOMEPAGE_WIDGET_PRODUCTS, { products });
        } else {
          console.warn(
            "Unable to dispatch CHECK_HOMEPAGE_WIDGET_PRODUCTS: window.ufe.products is not available."
          );
        }

        // ... (rest of the checks, each wrapped in try-catch)
      } catch (error) {
        console.error("Error in checkAndDispatchInitialEvents:", error);
      }
    }

    // Modified Proxy setup
    const ufeProxyHandler = {
      set(target, property, value) {
        try {
          target[property] = value;

          // Dispatch events when relevant properties change
          if (isObjectEmpty(target) && !isUfePresentDispatched) {
            dispatchEvent(UFE_PRESENT, { isUfeExist: false });
            isUfePresentDispatched = true;
          }

          // Dispatch events when relevant properties change
          if (property === "ufeErrors") {
            ufeErrors = value;
            dispatchEvent(UFE_ERRORS, { ufeErrors });
          } else if (property === "funnelData") {
            funnelData = value;
            dispatchEvent(FUNNEL_DATA, { funnelData });
            dispatchEvent(INPAGE_WIDGET_POSITION, { funnelData });
          } else if (property === "products") {
            products = value;
            dispatchEvent(HOMEPAGE_WIDGET_PRODUCTS, { products });
          } else if (property === "shopifyCartProducts") {
            shopifyCartProducts = value;
            dispatchEvent(OFFER_PRODUCT_IS_ALREADY_IN_CART, {
              shopifyCartProducts,
              funnelData,
            });
          }

          // ... (rest of the logic, each dispatch wrapped in try-catch)

          return true;
        } catch (error) {
          console.error("Error in ufeProxyHandler:", error);
          return true;
        }
      },
    };

    // Create the proxy with safeguards
    if (typeof window.ufe === "undefined") {
      window.ufe = {};
    }
    window.ufe = new Proxy(window.ufe, ufeProxyHandler);

    // Use a more robust method to ensure the page has loaded
    if (document.readyState === "complete") {
      checkAndDispatchInitialEvents();
    } else {
      window.addEventListener("load", checkAndDispatchInitialEvents);
    }
  } catch (error) {
    console.error("Critical error in inject.js:", error);
  }
})();

// Event listener with error handling
document.addEventListener("updateLocalStorage", function (event) {
  try {
    console.log("Received event: updateLocalStorage", event.detail);
    const { key, value } = event.detail;
    localStorage.setItem(key, value);
    console.log(`Local storage updated: ${key} = ${value}`);
  } catch (error) {
    console.error("Error handling updateLocalStorage event:", error);
  }
});

this is the script I'm injecting into web page, main issue is the web page console error are catching by this extenstion and showing it to the web page like this

NB : I will catch some browser console error only
eg :
render-common-CdJDux62CFl3.js:94 Uncaught Error: Error completing request. A network failure may have prevented the request from completing. Error: TypeError: Failed to fetch
at an.produce (common-Bb161KqmCtoV.js:56:11544)