nuxt-community / speedcurve-module Goto Github PK

View Code? Open in Web Editor NEW

3.0 4.0 0.0 500 KB

Speedcurve LUX integration for Nuxt 2

License: MIT License

JavaScript 100.00%

nuxt nuxtjs nuxtjs-module nuxt-module nuxt-modules speedcurve lux nuxt-speedcurve vue vuejs

speedcurve-module's Introduction

@nuxtjs/speedcurve

Speedcurve LUX integration for Nuxt 2

Features

Collect performance metrics from real users
See Javascript errors in your Speedcurve dashboard
Add user data to visits to cross reference cohorts and performance
Create custom performance markers for deep insights
Minimal configuration with sensible defaults
On-the-fly runtime config support

Setup

Add @nuxtjs/speedcurve dependency to your project

yarn add @nuxtjs/speedcurve # or npm install @nuxtjs/speedcurve

Add @nuxtjs/speedcurve to the modules section of nuxt.config.js

{
  modules: [
    // Simple usage
    '@nuxtjs/speedcurve',

    // With options
    ['@nuxtjs/speedcurve', { /* module options */ }]
  ]
}

or add options to the lux property in your nuxt.config.js

{
  modules: ['@nuxtjs/speedcurve'],

  lux: {
    // id: 'YOUR_LUX_ID'
    // debugMode: false,
    // enabled: true,
    // logFirstHit: true,
    // sampleRate: 100,
    // translateBool: true,
    // autoStartOnNav: true
  }
}

Development

Clone this repository
Install dependencies using yarn install or npm install
Start development server using npm run dev

License

MIT License

speedcurve-module's People

Contributors

Stargazers

Watchers

speedcurve-module's Issues

Inject LUX to the head

As mentioned in both start guide and notice about tag managers, we should start performance measurement as soon as possible. Before the hydration starts and nuxt executes plugins, almost all scripts are already prefetched, parsed or executed so we may have miss CPU timings (this at least noticed in docs)

Where to insert the snippet
The lux.js script is loaded asynchronously so it won't harm the performance of your site. It's best to put the LUX snippet as early in the page as possible, i.e., at the top of the HEAD element.

Possible Solutions

One way would be using vue-meta and push script within module like this:

  this.options.head.script.push({
    hid: 'lux',
    innerHTML: '<long script>'
  })

It can be also done at runtime via plugin (SSR) to inject but is little bit tricky. An example is here. This is required if snippet is depending on some config (like current runtimeConfig possibility)
Not sticking with original snippet may be hacky and breaking in the future but since we are already doing, we may partially inject option independent lines (here) which just initialize PerformanceObserver and then we can do rest of stuff in plugin.

Dependency Dashboard

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

Repository problems

These problems occurred while renovating this repository. View logs.

WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

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/content-theme-docs, nuxt, semver)
chore(deps): update actions/cache action to v4
chore(deps): update actions/setup-node action to v4
chore(deps): update codecov/codecov-action action to v4
chore(deps): update dependency nuxt to v3
Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/ci.yml

actions/setup-node v1

actions/cache v1

codecov/codecov-action v1

npm

docs/package.json

@nuxt/content-theme-docs ^0.5.4

nuxt ^2.14.4

package.json

semver ^7.3.2

@nuxt/content-theme-docs ^0.5.4

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

Nuxt 3

Does this module also work for Nuxt 3?

Nuxt 3 Support

Hey 👋 It looks like this module hasn't been updated for Nuxt 3. In an effort to improve the developer experience of modules, I've updated the module to clarify that it only supports Nuxt 2.

If Nuxt 3 support is added it will be moved to the https://github.com/nuxt-modules organisation.

@hecktarzuli Is Nuxt 3 support something you have planned? If not, perhaps we can deprecate this module?

Please let us know and thanks for your work!

Head doesn't reset per page generation when using classic static + nuxt 2.11, but does in 2.14.4

When using this module on a Nuxt 2.11 site (target: server, mode: 'universal', 'generate') the metas don't seem to be reset per page generation.

It's almost like we need to manually check for the meta to exist ourselves which is strange.
https://github.com/nuxt-community/speedcurve-module/blob/master/lib/templates/plugin.js#L80

After updating my site to Nuxt 2.14.4, it looks fine. Did something change since 2.11?