nuxt-modules / web-vitals Goto Github PK

INP is added to core web-vitals and will be effective from March 2024, it is a good idea to add support for INP (getINP) to let nuxt developers be more accurate on performance issues.

further more, by the documentation, getCLS/getFCP/getLCP/... etc has changed to onCLS/onFCP/onLCP/... etc.

Getting the following error in the console when using this plugin with nuxt 3:

Accessing app is not supported in Nuxt3.
mock @ legacy-app.mjs:4
get @ legacy-app.mjs:88
default @ vitals.client.js:8
(anonymous) @ nuxt.mjs:69
callWithNuxt @ nuxt.mjs:91
applyPlugin @ nuxt.mjs:48
applyPlugins @ nuxt.mjs:57
await in applyPlugins (async)
initApp @ bootstrap.mjs:28
(anonymous) @ bootstrap.mjs:38

And the plugin itself does not work with both vercel and log providers (not tested with google)

This module logs every time the send method is called.
I want to disable it in production build.

https://github.com/nuxt-community/web-vitals-module/blob/63fa35e9ddee5bda1b2c401b3bd520cecaed71eb/src/runtime/utils.ts#L29

I just discovered that Vercel is injecting the package @nuxt/web-vitals into my Nuxt app, for speed insights:

Their speed insight stats are great, but I get a lot of "Illegal invocation" errors as a result of this dependency:

TypeError: Illegal invocation
  at send(../../../node_modules/.pnpm/@[email protected]/node_modules/@nuxtjs/web-vitals/dist/runtime/utils.mjs:29:15)
  at sendToAnalytics(../../../node_modules/.pnpm/@[email protected]/node_modules/@nuxtjs/web-vitals/dist/runtime/providers/vercel.mjs:19:3)
  at e(../../../node_modules/.pnpm/@[email protected]/node_modules/@nuxtjs/web-vitals/dist/runtime/web-vitals.mjs:10:25)
  at r(../../../node_modules/.pnpm/[email protected]/node_modules/web-vitals/dist/web-vitals.js:1:1114)
  at <anonymous>(../../../node_modules/.pnpm/[email protected]/node_modules/web-vitals/dist/web-vitals.js:1:6764)
  at sentryWrapped(../../../node_modules/.pnpm/@[email protected]/node_modules/@sentry/browser/esm/helpers.js:90:17)

Any idea how to solve this?

Not sure if this is a bug in this module or on Vercel's side. I also posted it here, to be sure: https://github.com/orgs/vercel/discussions/5105

Hi

I am not sure the problem is this module, however Vercel refers to this module in their docs.
My problem is, I have enabled Vercel analytics and for a few months I have been getting "Awaiting data".

Vercel docs state I don't have to add this module manually, however it does not seem to make it work.
https://vercel.com/docs/analytics

Has anybody got Nuxt and Vercel analytics to work?

Edit: I have been in contact with the Vercel Support team, who tried re-enabling and re-deploying, with no success. They said it might be caused by having set Content Security Policy to disallow vitals.vercel-insights.com - which I have not.

Events not being sent to GoogleAnalytic provider!

When you inspect the request, you will see the URL in the following format:
https://www.google-analytics.com/collect?v=1&t=eventtid=UA-XXXXXXXXX-Xcid=0.883871679636306.0.12895864114226074ec=Web%20Vitalsea=CLSel=v1-1628200888064-2067831876287dl=%2Fdh=https%3A%2F%2Fxyz.com%2Fni=truez=1628200898652

As you can see, the request is invalid since the parameters doesn't implode with & symbol, the following format is expected which is worked:
https://www.google-analytics.com/collect?v=1&t=event&tid=UA-XXXXXXXXX-X&cid=0.883871679636306.0.12895864114226074&ec=Web%20Vitals&ea=CLS&el=v1-1628200888064-2067831876287&dl=%2F&dh=https%3A%2F%2Fxyz.com%2F&ni=true&z=1628200898652

Would it possible to send all metrics to GTM (LCP, CLS, etc) in only one event instead of one event per metrics as it is now?

I believe it would be nice to support Vercel analytics since they also use web-vitals for their API.

Vercel did a prototype based on this module actually: https://github.com/vercel/nuxt-plugin-vercel

We could imagine a provider option, default to ga and overwritten with NUXT_VITALS_PROVIDER or directly having NUXT_VITALS_URL?

I connected web-vitals to nuxt3 app using buildModules: [ '@nuxtjs/web-vitals', ], webVitals: { provider: 'log', debug: true, },

But i cannot see anything related to this in console? Also I tried a custom API config but there were nothing in network tab as well. How should it work? BTW I use nuxt3 + vue3 in the project

nuxt/devtools#594

Let me know what you think about it :)

see nuxt/nuxt#15780

cc: @pi0

History: #9

We can support an option to add multiplier for different events. Since this is a breaking change, we either have to default it to 1 or release as a major version to ask updating google anyltics.

 WARN  Module @nuxtjs/web-vitals not found. Please ensure @nuxtjs/web-vitals is in devDependencies and installed. HINT: During build step, for npm/yarn, NODE_ENV=production or --production should NOT be used.


 FATAL  Cannot find module './runtime/providers/log'                              15:57:32
Require stack:
- /node_modules/@nuxtjs/web-vitals/dist/index.cjs
- /node_modules/@nuxt/core/dist/core.js

  Require stack:
  - node_modules/@nuxtjs/web-vitals/dist/index.cjs
  - node_modules/@nuxt/core/dist/core.js
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
  at Function.a [as resolve] (node_modules/jiti/dist/v8cache.js:2:2508)
  at Object.<anonymous> (node_modules/@nuxtjs/web-vitals/dist/index.cjs:13:22)
  at Module.o._compile (node_modules/jiti/dist/v8cache.js:2:2778)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
  at Module.load (internal/modules/cjs/loader.js:928:32)
  at Function.Module._load (internal/modules/cjs/loader.js:769:14)
  at Module.require (internal/modules/cjs/loader.js:952:19)
  at require (internal/modules/cjs/helpers.js:88:18)
  at Resolver.f [as _require] (node_modules/jiti/dist/jiti.js:1:53846)

@nuxtjs/web-vitals 0.1.7

From the current codes and the docs, I see that the ga provider is for Universal Analytics version, which is soon gonna be disabled by google(https://support.google.com/analytics/answer/11583528)

So I think it needs to be replaced by ga4 specific code and guide

Workarround

// nuxt.config.js
export default {
  modules: [
    ['~/node_modules/nuxt-vitals/module.js', {  trackingID: 'UA-XXXXXX-X' }]
  ]
}

I don't know when the data is send to ga ?
Build time or navigation ?

Hey,

I will work on making the module work with Nuxt 3 out of the box.

Hi there,

My site is built on VuePress and hosted on Vercel.

Would you be interested in a VuePress version of this lib?

I would hope any port would be obvious and straightforward.

LMK

I know it's probably not quite clear why ID is needed, but it's actually really important—if you're sending this data to Google Analytics—that you have a dimension you can use to drill down into each individual metric occurrence. Without this, you won't be able to create a histogram or report on anything other than the metric average (and even then you won't be able to report on the average for CLS).

Regarding the use of fullPath, if what you want is the URL path of the page that was loaded when this metric was tracked, you can use the page dimension (or dp in the measurement protocol):

async function sendToAnalytics(fullPath, metric) {
  const { name, delta, id, entries } = metric
  let opts = {
    ec: 'Web Vitals',
    ea: name,
    el: id,
    // Google Analytics metrics must be integers, so the value is rounded.
    ev: parseInt(delta),
    dp: fullPath,
    ni: true
  }

  // ...
}

Note: I also set the ni param to true. Not sure if this was a mistake or not, but setting this to false will make your bounce rate go to zero (unless that's what you want).

If browser cookies are disabled the module crashes with error "Failed to read the 'localStorage' property from 'Window': Access is denied for this document."

When using only console logging this message is not relevant and the modules should keep logging vitals in the console.

src/runtime/utils.ts
export const KEY = 'ga:user' export const UID: string = (localStorage[KEY] = localStorage[KEY] || Math.random() + '.' + Math.random())

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Datasource	Name	Replacement PR?
npm	standard-version

Other Branches

These updates are pending. To force PRs open, click the checkbox below.

• chore(deps): replace devdependency standard-version with commit-and-tag-version ^9.5.0

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all non-major dependencies (@nuxt/eslint-config, @nuxt/module-builder, eslint, typescript)
• chore(deps): update nuxt framework (@nuxt/kit, nuxt)
• chore(deps): update dependency web-vitals to v4
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update devdependency nuxt to v3

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

I need to set anonymize_ip: true, but right now I don't have access to url that is send to GA. Even when I run ga('set', 'anonymizeIp', true); or gtag('config', '<GA_TRACKING_ID>', { 'anonymize_ip': true }); (I use gtm). How can I solve it?

Hello!

The latest version, 0.1.7 is generating a fatal error when I try to deploy my app on Vercel.

 ✖ Nuxt Fatal Error
Error: Cannot find module './runtime/providers/log
Require stack:
 - /vercel/cea6d456332c12ca/.build-utils/.builder/node_modules/@nuxtjs/web-vitals/dist/index.cjs
 - /vercel/path0/node_modules_dev/@nuxt/core/dist/core.js
Require stack:
 - /vercel/cea6d456332c12ca/.build-utils/.builder/node_modules/@nuxtjs/web-vitals/dist/index.cjs
 - node_modules_dev/@nuxt/core/dist/core.js

Usually, modules are only required during development and build time. Using buildModules helps to make production startup faster and also significantly decreasing node_modules size for production deployments.

NOTE: If we are going to offer using buildModules need to mention that this feature is only available since Nuxt v2.9. Older users should upgrade Nuxt or use the modules section.

I don't understand why one would need to install this module, as there is no documentation in the README (besides gaining some analytics with Vercel). Why do we need this module, and what does it do?