danielroe / nuxt-timings-module

nuxt-timings

Full visibility into your Nuxt render time for optimising performance

Features

• Uses Nuxt server.timings to inject additional timings
• Adds timings for Nuxt plugins and Vuex actions/mutations

Quick setup

1. Add nuxt-timings dependency to your project

yarn add nuxt-timings # or npm install nuxt-timings

2. Add nuxt-timings to the buildModules section of nuxt.config.js

{
  buildModules: [
    'nuxt-timings',
  ],
  timings: {
    // default value
    enabled: process.env.NODE_ENV === 'development'
  }
}

Development

1. Clone this repository
2. Install dependencies using yarn install
3. Start development server using yarn dev

License

MIT License

nuxt-timings-module's Issues

Plugin generated Paths don't handle Windows Paths

Version

module: 0.1.2
nuxt: 2.15.8

Nuxt configuration

mode:

• universal
• spa

What is expected?

Plugin names resolution should be Unix paths, but in windows they are not handled properly, thus leading to common problem of malformed strings of \ escaped characters.

What is actually happening?

The generated plugin files look like this in windows.

const plugin = "C:\Users\Pau\Desktop\bravado\frontend\.nuxt\google-analytics.js";

Later on breaks the app while nuxt tries to set the Server-Timing header with invalid characters as they are scaped and malformed.

Suggestion

Will link a PR with the fix as I need this working for my team so I'm creating a fork with the fix and use it like so, feel free to notify me when you successfully merge it or fix it so we can switch back to your module.

Dependency Dashboard

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

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update babel monorepo (minor) (@babel/plugin-transform-runtime, @babel/preset-env, @babel/preset-typescript)
• chore(deps): update devdependency @nuxt/types to v2.17.2
• chore(deps): update devdependency @release-it/conventional-changelog to v5.1.1
• chore(deps): update node.js to v16.20.2
• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update all lint dependencies (major) (@nuxtjs/eslint-config-typescript, lint-staged)
• chore(deps): update dependency @nuxt/kit to v3
• chore(deps): update dependency pathe to v1
• chore(deps): update devdependency @nuxt/test-utils to v3
• chore(deps): update devdependency @nuxt/typescript-build to v3
• chore(deps): update devdependency @release-it/conventional-changelog to v8
• chore(deps): update devdependency release-it to v17
• chore(deps): update jest monorepo to v29 (major) (@types/jest, babel-jest, jest)
• chore(deps): update node.js to v20
• chore(deps): update peerdependency consola to v3
• chore(deps): update peerdependency prettier to v3
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update devdependency ts-loader to v8.4.0

Open

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

• chore(deps): update babel monorepo to v7.18.10 (patch) (@babel/plugin-transform-runtime, @babel/preset-env)
• chore(deps): update dependency pathe to v0.3.9
• chore(deps): update devdependency husky to v8.0.3
• chore(deps): update devdependency lint-staged to v13.0.4
• chore(deps): update devdependency nuxt-edge to v2.16.0-27923058.4ecdc72
• chore(deps): update all lint dependencies (minor) (eslint, lint-staged)
• chore(deps): update devdependency release-it to v15.11.0
• chore(deps): update peerdependency chalk to v5
• chore(deps): lock file maintenance
• 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 ts-loader to v9

Detected dependencies

github-actions

.github/workflows/ci.yml

• actions/setup-node v3
• actions/checkout v3
• actions/cache v3
• codecov/codecov-action v3

npm

package.json

• @nuxt/kit 0.6.4
• chalk 4.1.2
• consola 2.15.3
• pathe 0.3.0
• @babel/plugin-transform-runtime 7.18.5
• @babel/preset-env 7.18.2
• @babel/preset-typescript 7.17.12
• @nuxt/test-utils 0.2.2
• @nuxt/types 2.15.8
• @nuxt/typescript-build 2.1.0
• @nuxtjs/eslint-config-typescript 10.0.0
• @release-it/conventional-changelog 5.0.0
• @types/jest 28.1.8
• babel-jest 28.1.3
• eslint 8.17.0
• husky 8.0.1
• jest 28.1.3
• lint-staged 13.0.2
• nuxt-edge 2.16.0-27358576.777a4b7f
• release-it 15.0.0
• siroc 0.16.0
• ts-loader 8.3.0
• chalk ^3.0.0 || ^4.0.0
• consola ^2.15.0
• prettier ^2.1.2
• node >=14
• node 16.15.1

---

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

Multiple issues in installation

Version

module: 0.1.1
nuxt: 2.15.6
OS: Windows 10
Node: v14.16.0

Nuxt configuration

mode:

• universal
• spa

Nuxt configuration

timings: {
// default value
enabled: true,
},

Reproduction

Normal installation as in docs

Link:
[ ] https:///codesandbox.io/
[x] GitHub repository

What is expected?

What is actually happening?

Steps to reproduce

Additional information

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• I have tested with the latest module version and the issue still occurs
• I have searched the issue tracker and this issue hasn't been reported yet

Steps to reproduce

npm run dev

What is expected?

to load normally

What is actually happening?

throw exception Nuxt Fatal Error : Error: Cannot find module './templates/fetch'
I renamed all *.mjs to *.js and problem gone.
Another exception occurred after generating server & client files:
Cannot find module 'nuxt-timings/runtime' from '<srcDir>'
I searched for 'nuxt-timings/runtime' in .nuxt dir and replaced all to 'nuxt-timings/dist/runtime' and problem went away.
when I tried to open the App in browser I got :
Invalid character in header content ["Server-Timing"]

Can you please guide me how to solve those issues?

Break the build with NODE_ENV=test or staging

Version

module: 0.1.2
nuxt: 2.15.8

Nuxt configuration

mode:

• universal
• spa

Nuxt configuration

Reproduction

Link:
[x] https://codesandbox.io/s/kind-kirch-m8n7v1

What is expected?

Module works

What is actually happening?

Build fails with

[fatal] Cannot create property 'timing' on boolean 'false'
  at setup (node_modules/nuxt-timings/dist/index.js:63:33)
  at node_modules/@nuxt/kit/dist/index.js:963:47
  at Object.call (node_modules/unctx/dist/index.js:14:19)
  at ModuleContainer.wrappedModule (node_modules/@nuxt/kit/dist/index.js:963:20)
  at ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:239:34)
  at node_modules/@nuxt/utils/dist/utils.js:639:43
  at async ModuleContainer.ready (node_modules/@nuxt/core/dist/core.js:55:5)
  at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:478:5)
  
     ╭───────────────────────────────────────────────────────────────────╮
   │                                                                   │
   │   ✖ Nuxt Fatal Error                                              │
   │                                                                   │
   │   TypeError: Cannot create property 'timing' on boolean 'false'   │
   │                                                                   │
   ╰───────────────────────────────────────────────────────────────────╯

Steps to reproduce

Additional information

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• I have tested with the latest module version and the issue still occurs
• I have searched the issue tracker and this issue hasn't been reported yet

Steps to reproduce

Please click 'restart server' in sandbox and look to console output

Seems like nuxt set context.server = false with NODE_ENV=test and NODE_ENV=staging