Nuxt.js: How to monitor Nuxt app? - memory, cpu, requests

Created on 7 Feb 2018  路  9Comments  路  Source: nuxt/nuxt.js

Hi!

I would like to monitor nuxt application (memory, cpu, requests).

For example with the appmetrics
https://www.youtube.com/watch?v=RA1UysMKqwA

How can I do this with plain nuxt?

(I don't want to migrate to express+nuxt middleware).

Thanks,

This question is available on Nuxt.js community (#c2419)

Most helpful comment

@iamdubx Actually it is pretty easy to use Nuxt with PM2.

In my case I just used a PM2 Process file.

Example:

{
  "apps" : [{
    "name": "your-app",
    "script": "/your-app-path/node_modules/nuxt/bin/nuxt-start",
    "max_memory_restart" : "800M",
    "cwd": "/your-app-path",
    "instances": "max",
    "exec_mode": "cluster",
    "env": {
      "NODE_ENV": "production"
    }
  }]
}

And I use the pm2 startOrReload your-app.json --update-env command to start the processes.


@awronski I really don't think Nuxt should integrate appmetrics natively. This is not the Nuxt responsability to choose the metrics tools for everyone.

I personally use pm2-prometheus-exporter to export PM2 metrics about our Nuxt application in Prometheus. We use Newrelic Node for the error reporting and more "in-depth" analysis.

While appmetrics seems to be a great product, it does not fit everyone needs, especially in term of deployment and process management. That's why I think it should not be natively integrated to Nuxt. Especially when it is that easy to custom the Nuxt start script:

// start.js
// at the root of your project

require('appmetrics-dash').attach();

const fs = require('fs');
const parseArgs = require('minimist');
const { Nuxt, Utils } = require('nuxt');
const { resolve } = require('path');

const argv = parseArgs(process.argv.slice(2), {
  alias: {
    h: 'help',
    H: 'hostname',
    p: 'port',
    c: 'config-file',
    s: 'spa',
    u: 'universal',
  },
  boolean: ['h', 's', 'u'],
  string: ['H', 'c'],
  default: {
    c: 'nuxt.config.js',
  },
});

const rootDir = resolve(argv._[0] || '.');
const nuxtConfigFile = resolve(rootDir, argv['config-file']);

let options = {};

if (fs.existsSync(nuxtConfigFile)) {
  options = require(nuxtConfigFile);
} else if (argv['config-file'] !== 'nuxt.config.js') {
  Utils.fatalError(`Could not load config file: ${argv['config-file']}`);
}

if (typeof options.rootDir !== 'string') {
  options.rootDir = rootDir;
}

options.dev = false;

const nuxt = new Nuxt(options);

nuxt.hook('error', (_err, from) => Utils.fatalError(_err, from));

const distDir = resolve(
  nuxt.options.rootDir,
  nuxt.options.buildDir || '.nuxt',
  'dist',
);
if (!fs.existsSync(distDir)) {
  Utils.fatalError('No build files found, please run `nuxt build` before launching `nuxt start`');
}

if (nuxt.options.render.ssr === true) {
  const ssrBundlePath = resolve(distDir, 'server-bundle.json');
  if (!fs.existsSync(ssrBundlePath)) {
    Utils.fatalError('No SSR build! Please start with `nuxt start --spa` or build using `nuxt build --universal`');
  }
}

const port =
  argv.port || process.env.PORT || process.env.npm_package_config_nuxt_port;
const host =
  argv.hostname || process.env.HOST || process.env.npm_package_config_nuxt_host;

nuxt.listen(port, host);

Try this, it should fit your needs.

All 9 comments

my personal feedback,

all my Nuxt projects are running on PM2 in production.
and PM2 integrates a basic monitor tool: pm2 monit

http://pm2.keymetrics.io/docs/usage/monitoring/

pm2 monitor

@NicoPennec I would be happy if you write about how you use Nuxt with pm2. I love your blog, very useful :+1:

@NicoPennec Thanks for the hint. The pm2 is nice but it is not enough for me. For example the appmetrics has profiling in the real time. Lots of information about the requests etc.

@Atinux Would be possible to add appmetrics to the next release of nuxt? It would be a huge and useful feature! Please consider

@MartinLG maybe you could share about how you made things work with PM2 for nuxt

@iamdubx Actually it is pretty easy to use Nuxt with PM2.

In my case I just used a PM2 Process file.

Example:

{
  "apps" : [{
    "name": "your-app",
    "script": "/your-app-path/node_modules/nuxt/bin/nuxt-start",
    "max_memory_restart" : "800M",
    "cwd": "/your-app-path",
    "instances": "max",
    "exec_mode": "cluster",
    "env": {
      "NODE_ENV": "production"
    }
  }]
}

And I use the pm2 startOrReload your-app.json --update-env command to start the processes.


@awronski I really don't think Nuxt should integrate appmetrics natively. This is not the Nuxt responsability to choose the metrics tools for everyone.

I personally use pm2-prometheus-exporter to export PM2 metrics about our Nuxt application in Prometheus. We use Newrelic Node for the error reporting and more "in-depth" analysis.

While appmetrics seems to be a great product, it does not fit everyone needs, especially in term of deployment and process management. That's why I think it should not be natively integrated to Nuxt. Especially when it is that easy to custom the Nuxt start script:

// start.js
// at the root of your project

require('appmetrics-dash').attach();

const fs = require('fs');
const parseArgs = require('minimist');
const { Nuxt, Utils } = require('nuxt');
const { resolve } = require('path');

const argv = parseArgs(process.argv.slice(2), {
  alias: {
    h: 'help',
    H: 'hostname',
    p: 'port',
    c: 'config-file',
    s: 'spa',
    u: 'universal',
  },
  boolean: ['h', 's', 'u'],
  string: ['H', 'c'],
  default: {
    c: 'nuxt.config.js',
  },
});

const rootDir = resolve(argv._[0] || '.');
const nuxtConfigFile = resolve(rootDir, argv['config-file']);

let options = {};

if (fs.existsSync(nuxtConfigFile)) {
  options = require(nuxtConfigFile);
} else if (argv['config-file'] !== 'nuxt.config.js') {
  Utils.fatalError(`Could not load config file: ${argv['config-file']}`);
}

if (typeof options.rootDir !== 'string') {
  options.rootDir = rootDir;
}

options.dev = false;

const nuxt = new Nuxt(options);

nuxt.hook('error', (_err, from) => Utils.fatalError(_err, from));

const distDir = resolve(
  nuxt.options.rootDir,
  nuxt.options.buildDir || '.nuxt',
  'dist',
);
if (!fs.existsSync(distDir)) {
  Utils.fatalError('No build files found, please run `nuxt build` before launching `nuxt start`');
}

if (nuxt.options.render.ssr === true) {
  const ssrBundlePath = resolve(distDir, 'server-bundle.json');
  if (!fs.existsSync(ssrBundlePath)) {
    Utils.fatalError('No SSR build! Please start with `nuxt start --spa` or build using `nuxt build --universal`');
  }
}

const port =
  argv.port || process.env.PORT || process.env.npm_package_config_nuxt_port;
const host =
  argv.hostname || process.env.HOST || process.env.npm_package_config_nuxt_host;

nuxt.listen(port, host);

Try this, it should fit your needs.

@MartinLG Hi Martin, thanks for sharing lots of useful information.

I really like prometheus and I use it with node_exporter to monitor my servers.

It would be great if we could easly connect nuxt application to prometheus too. I checked the pm2-prometheus-exporter but what is missing is the information about the requests. Especially request latency.

Of course I can export metrics from ngix proxy but I tried to have as less configuration as possible.

@MartinLG How do you track information about requests?


About appmetrics. I understand that it is not for everyone but it is a good start. I was thinking to make it optional. It would be great if it is possible to connect it as nuxt module. For small project when we don't need prometheus it would be great.

@Atinux Would it be possible to attach custom configuration to nuxt-start?
I know one can use nuxt with express but it is really convenience to use nuxt standalone.

Thanks!

@awronski To be honest, at the moment I get these metrics from the Nginx proxy.

Again, NewRelic also give us some useful informations, like the time we spend requesting our API, the total request time without Nginx, or more specific timings inside some heavy functions.

NewRelic is still young on Node, so the transaction details are still a bit small, but for the moment it is enough for us, and we know they are going better.

This question has been resolved by @NicoPennec, see answer.

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mikekidder picture mikekidder  路  3Comments

pehbehbeh picture pehbehbeh  路  3Comments

bimohxh picture bimohxh  路  3Comments

msudgh picture msudgh  路  3Comments

bimohxh picture bimohxh  路  3Comments