JS error: 'no original function send to wrap'

[runelaenen]

Description

When adding the Web SDK to our website, we get the error message "No original function send to wrap"

Steps to reproduce

1. Add Faro to the project
2. Reload page
3. Check browser console

Expected behavior

There should not be an error.

Actual behavior

There is an error ("No original function send to wrap") in the faro web sdk js

Environment

SDK instrumentations: Grafana Cloud, Web SDK (https://unpkg.com/@grafana/faro-web-sdk@^1.4.0/dist/bundle/faro-web-sdk.iife.js)
Device type: desktop
Device name: MacBook Pro M3 Pro
OS: macOS Ventura
Browser: Chrome 131

Context

[codecapitano]

Hi @runelaenen can you share your Faro config as well?
The error seems to appear when Faro initializes the console instrumentation.
It's basically patching the console object.

Do you know by any chance if you have other libraries running which patch or hook into the console object?
For example a logging library?

Cheers,
Marco

[runelaenen]

Hi Marco,

Thank you for the very fast answer!

can you share your Faro config as well?

We are using Grafana Cloud, not sure where I can find the Faro config. Do you mean this? It's the default code given by Grafana when chosing to use the Web SDK.
I have tried using the NPM package, but that gave the exact same error.

<script>
  (function () {
    var webSdkScript = document.createElement("script");

    // fetch the latest version of the Web-SDK from the CDN
    webSdkScript.src =
      "https://unpkg.com/@grafana/faro-web-sdk@^1.4.0/dist/bundle/faro-web-sdk.iife.js";

    webSdkScript.onload = () => {
      window.GrafanaFaroWebSdk.initializeFaro({
        url: "https://faro-collector-prod-eu-west-2.grafana.net/collect/__KEY HERE__",
        app: {
          name: "__APP NAME HERE__",
          version: "1.0.0",
          environment: "production",
        },
        
      });


      // Load instrumentations at the onLoad event of the web-SDK and after the above configuration.
      // This is important because we need to ensure that the Web-SDK has been loaded and initialized before we add further instruments!
      var webTracingScript = document.createElement("script");

      // fetch the latest version of the Web Tracing package from the CDN
      webTracingScript.src =
        "https://unpkg.com/@grafana/faro-web-tracing@^1.4.0/dist/bundle/faro-web-tracing.iife.js";

      // Initialize, configure (if necessary) and add the the new instrumentation to the already loaded and configured Web-SDK.
      webTracingScript.onload = () => {
        window.GrafanaFaroWebSdk.faro.instrumentations.add(
          new window.GrafanaFaroWebTracing.TracingInstrumentation()
        );
      };

      // Append the Web Tracing script script tag to the HTML page
      document.head.appendChild(webTracingScript);
    };

    // Append the Web-SDK script script tag to the HTML page
    document.head.appendChild(webSdkScript);
  })();
</script>

Do you know by any chance if you have other libraries running which patch or hook into the console object? For example a logging library?

Not as far as I know.

Our website is running on Shopware 6. I have checked (both the Shopware code, as well as our own custom code) and there does not seem to be anything that patched/wraps/... the console object. Of course Shopware comes with it's own external npm dependencies, which I cannot really check.

Is there anything else I can do, run or debug to make finding the cause of the issue easier?

[codecapitano]

Hmm ok tested your config but everything works fine and I can't reproduce the error.

Mind you testing one thing?
If you don't add the web-tracing script (maybe just comment out the code), does the error still appear?

Note:
It's only to try to scope down a possible issue. In production we need web-tracing to get e2e observability for HTTP requests.

[runelaenen]

Hi @codecapitano

Without the webtracing script, it does indeed not give any error.

Logs are also coming into grafana correctly (at first sight). (fyi, they are also coming in in grafana when the error occurs, it just showed a lot of red since there is an error 😬 )

<script>
  (function () {
    var webSdkScript = document.createElement("script");

    // fetch the latest version of the Web-SDK from the CDN
    webSdkScript.src =
      "https://unpkg.com/@grafana/faro-web-sdk@^1.4.0/dist/bundle/faro-web-sdk.iife.js";

    webSdkScript.onload = () => {
      window.GrafanaFaroWebSdk.initializeFaro({
        url: "https://faro-collector-prod-eu-west-2.grafana.net/collect/__KEY__",
        app: {
          name: "Acceptatie",
          version: "1.0.0",
          environment: "production",
        },
        
      });


      /*
      // Load instrumentations at the onLoad event of the web-SDK and after the above configuration.
      // This is important because we need to ensure that the Web-SDK has been loaded and initialized before we add further instruments!
      var webTracingScript = document.createElement("script");

      // fetch the latest version of the Web Tracing package from the CDN
      webTracingScript.src =
        "https://unpkg.com/@grafana/faro-web-tracing@^1.4.0/dist/bundle/faro-web-tracing.iife.js";

      // Initialize, configure (if necessary) and add the the new instrumentation to the already loaded and configured Web-SDK.
      webTracingScript.onload = () => {
        window.GrafanaFaroWebSdk.faro.instrumentations.add(
          new window.GrafanaFaroWebTracing.TracingInstrumentation()
        );
      };

      // Append the Web Tracing script script tag to the HTML page
      document.head.appendChild(webTracingScript);
      */
    };

    // Append the Web-SDK script script tag to the HTML page
    document.head.appendChild(webSdkScript);
  })();
</script>