web-vitals is undefined

[tiennguyen1293]

Description

• web-vitals has been imported but all methods are undefined, please see the image below.

Please help me to investigate

Steps to reproduce

• trigger initializeFaro will face the issue

import { trace, context } from '@opentelemetry/api'
import {
  ReactIntegration,
  ReactRouterHistory,
  ReactRouterVersion,
  initializeFaro as coreInit,
  getWebInstrumentations,
} from '@grafana/faro-react'
import {
  FaroSessionSpanProcessor,
  FaroTraceExporter,
  TracingInstrumentation,
} from '@grafana/faro-web-tracing'

export const initializeFaro = () => {
  const faro = coreInit({
    url: config.FARO_URL,
    apiKey: config.FARO_API_KEY,
    app: {
      name: packageJSON.name,
      version: packageJSON.version,
    },
    sessionTracking: {
      enabled: true,
      samplingRate: 0.25,
    },
    instrumentations: [
      ...getWebInstrumentations({
        captureConsole: true,
      }),

  
      new TracingInstrumentation({
        instrumentationOptions: {
          propagateTraceHeaderCorsUrls: [], 
        },
      }),
      new ReactIntegration({
        router: {
          version: ReactRouterVersion.V4,
          dependencies: {
            history: history as ReactRouterHistory, 
            Route,
          },
        },
      }),
    ],
  })

   faro?.api.pushLog(['Faro was initialized'])
   faro?.api.initOTEL(trace, context)
  
   return faro
 }

Expected behavior

• Worked

Actual behavior

Environment

"@grafana/faro-react": "^1.3.8",
"@grafana/faro-web-tracing": "^1.3.8",
"react": "^18.3.1",

Node@20.13.1

[codecapitano]

Hi @tiennguyen1293 first time I see this and unfortunately can't reproduce the error.

• Do you use Faro with a standard react web-app or maybe with some mobile framework?
• Do you use the CDN version or the NPM package?
• When/where do you initialize Faro?
• Since you set to auto update Faro to the most current minor or patch version I assume you are on the most recent Faro version which is 1.7.3 ?

[tiennguyen1293]

Hi @codecapitano thank for quick response:

• I'm using react web-app.
• use NPM package.
• when init Web-app I will initialize Faro.
• I tried upgrade to the latest 1.7.3 version but it has the same issue.

[codecapitano]

Ok thanks.

The issue happens during build right?

If yes, can you wipe node_modules and install and build again (i know not the coolest answer but I want to exclude that kind of issues)

[tiennguyen1293]

the issue happens during runtime.

I ran rm -rf node_modules yarn.lock and re-install. And then re-started the App, but the issue still happens.

[codecapitano]

• Does it happen on every browser?
• Is there maybe something running which prevents the script to work? Like a content filter?
• Maybe an issue in regards to content security policy?

[tiennguyen1293]

it is happening to build runtime to run App on localhost. Maybe it is related to building library or compiling code?

[codecapitano]

Aaah at build runtime 👍

Maybe it is related to building library or compiling code?

Ok yeah this might be causing the issue.

What is your build tool of choice?

[tiennguyen1293]

i'm using Webpack version 5

[tiennguyen1293]

i found the root cause, it is related to webpack config.

I configured

resolve.mainFields: ['browser', 'main', 'module'],

I will close this issue

Thanks for you support

[codecapitano]

Great thank you for the update. 🙏