grafana / faro-web-sdk

The Grafana Faro Web SDK, part of the Grafana Faro project, is a highly configurable web SDK for real user monitoring (RUM) that instruments browser frontend applications to capture observability signals. Frontend telemetry can then be correlated with backend and infrastructure data for full-stack observability.
https://grafana.com/oss/faro/
Apache License 2.0
688 stars 62 forks source link

Unexpected behaviour using samplingRate lower than 1.0 #613

Closed pablovillasana closed 2 weeks ago

pablovillasana commented 3 weeks ago

Description

Hello!

Im using Grafana faro via CDN (non tracing) for a production site with ~135k visits daily, im also using this property samplingRate on sessionTracking config object, since the volume of logs exceed my budget hehe, apart from that i have no other special config, all default.

The problem is that it doesnt log any session or anything when i any value lowe than 1.0 on that property value, i tried 0.5, 0.05 0.8..., i cant see anything on my dashboard, checkin the site, it seems to be loading everything on the DOM, the script and the rest is present on the client, also i cannot see any errors prompted on console.

Then i try using 1.0 again and it starts to log again. We have cache on the site, that i cleaned and waited a sufficent ammount of time on every try.

 (function () {
  // Create a script tag for loading the library
  var script = document.createElement("script");

  // Initialize the Web-SDK at the onLoad event of the script tag above so it will be called when the library is loaded.
  script.onload = () => {
    window.GrafanaFaroWebSdk.initializeFaro({
      // Mandatory, the URL of the Grafana Cloud collector with embedded application key.
      url: 'myUrl',

      // Mandatory, the identification label(s) of your application
      app: {
        name: 'My app name',
        version: "1.0.0",
      },
      sessionTracking: {
        samplingRate: 0.8
      },
    });
  };

  // Set the source of the script tag to the CDN
  script.src =
    "https://unpkg.com/@grafana/faro-web-sdk@^1.4.0/dist/bundle/faro-web-sdk.iife.js";

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

Steps to reproduce

  1. Config a site via CDN (non tracing)
  2. Set the samplingRate lower than 1.0 on that config
  3. Navigate to the site

Expected behavior

After the config with sampling rate lower than 1.0 it should be keep logging data to the dashboard and see the network requests from faro js on the client

Actual behavior

After the config with sampling rate lower than 1.0 it doesnt log any data to the dashboard and also 0 request out on the client

Environment

codecapitano commented 3 weeks ago

Hi @pablovillasana thansk for reporting.

I tested the session sampling with the Faro demo app and it works as expected.

You wrote that you are on Faro 1.4.0. The current version is 1.7.3. The version in the CDN Url in your example is set to fetch updates for minor and parch versions. Are you sure that you are still on 1.4.0?

If yes, can you upgrade to the most recent Faro version an double check if the problem still exists?

As a hint when testing the behavior locally: The sampling decision is also stored in the browser web-storage, session-storage in your case. When simply reloading the page, the browser won't wipe the session-storage so Faro picks up the stored session. So when you change the sampling rate ensure to wipe the session storage before reloading.

Additionally you can inspect the sampling decision in the web-storage, the session has a 'isSampled' property.

Cheers

pablovillasana commented 3 weeks ago

Hi Again! @codecapitano Thank you for the quick response and also for the extra info on how its stored on the browser.

I managed to make it work, it was a rookie mistake on the config script, i will put it here in case that is helpfull for someone -->

In my template there was some extra "", basically converting the value passed to a string like this:

sessionTracking: {
        samplingRate: "${my_render_function_that_gets_the_sampling_rate}"
      },

i just remove the "", so its numeric as requested

sessionTracking: {
        samplingRate: ${my_render_function_that_gets_the_sampling_rate}
      },

Regarding the version, honestly i didnt check if there was a new version i just copied the code provided on the frontend app > Web SDK Configuration on the dashboard, its seems like its providing 1.4.0

image

I will change it manually on the url.

Again thanks for the support! Cheers.

codecapitano commented 3 weeks ago

Hi @pablovillasana cool thanks for the update and glad that it works now 🥳

Regarding the version, honestly i didnt check if there was a new version i just copied the code provided on the frontend app > Web SDK Configuration on the dashboard, its seems like its providing 1.4.0

I think you are good with the link provided. The caret in front of the version number ensures that you always fetch the newest minor.patch version but keep the major version (see npm Version range syntax examples).

Maybe one hint: Faro's sample also allow to use a custom sampler function.

Not sure if it fits your use case but maybe it's useful.

pablovillasana commented 2 weeks ago

Hi @codecapitano thanks, you are right since it has the caret.

Also thanks for the custom sampler visibility, for now we are keeping it simple, but its good to know