将 APM 添加到 NuxtJS 项目的最佳方法是什么

Question

在 Nuxtjs 项目中配置/启用 Elastic APM 代理的正确方法是什么？

我为自定义 NodeJS 应用推荐了 this documentation。关键要点是：

在您需要任何其他代理之前启动代理很重要 您的 Node.js 应用程序中的模块 - 即在 http 之前和您的 路由器等

我在 nuxt.config.js 中添加了以下 sn-p，但是 APM 代理没有启动或工作。我在应用日志中没有看到任何错误。

var apm = require('elastic-apm-node').start({
  serviceName: 'nuxt-app',
  serverUrl: 'http://ELK_APM_SERVER:8200'
})

还有其他方法吗？

Answer 1

我们设法使用自定义 Nuxt 模块来实现此功能，该模块明确要求 Node 模块在启动 APM 模块后进行检测。

modules/elastic-apm.js:

    const apm = require('elastic-apm-node');
    const defu = require('defu');
    
    module.exports = function() {
      this.nuxt.hook('ready', async(nuxt) => {
        const runtimeConfig = defu(nuxt.options.privateRuntimeConfig, nuxt.options.publicRuntimeConfig);
        const config = (runtimeConfig.elastic && runtimeConfig.elastic.apm) || {};
    
        if (!config.serverUrl) {
          return;
        }
    
        if (!apm.isStarted())  {
          await apm.start(config);
    
          // Now explicitly require the modules we want APM to hook into, as otherwise
          // they would not be instrumented.
          //
          // Docs: https://www.elastic.co/guide/en/apm/agent/nodejs/master/custom-stack.html
          // Modules: https://github.com/elastic/apm-agent-nodejs/tree/master/lib/instrumentation/modules
          require('http');
          require('http2');
          require('https');
        }
      });
    }

nuxt.config.js:

    module.exports = {
      // Must be in modules, not buildModules
      modules: ['~/modules/elastic-apm'],
      
      publicRuntimeConfig: {
        elastic: {
          apm: {
            serverUrl: process.env.ELASTIC_APM_SERVER_URL,
            serviceName: 'my-nuxt-app',
            usePathAsTransactionName: true // prevent "GET unknown route" transactions
          }
        }
      }
    };

Answer 2

所有答案都已过时并且从一开始就不正确（17.02.2022）

要使其工作，请按以下步骤操作：

1.) 在你的根目录中创建一个 nodeApm.js，内容如下：

const nodeApm = require('elastic-apm-node')

if (!nodeApm.isStarted()) { 
    nodeApm.start()
}

2.) 使用环境变量来存储您的配置。例如：

ELASTIC_APM_SERVICE_NAME=NUXT_PRODUCTION
ELASTIC_APM_SECRET_TOKEN=yoursecrettokenhere

3.) 编辑你的 package.json

"scripts": {
    // if you want apm also on dev to test, add it also here
    "dev": "node -r ./nodeApm.js node_modules/nuxt/bin/nuxt",
    ...
    "start": "node -r ./nodeApm.js node_modules/nuxt/bin/nuxt start",
...

！请注意，在 ~2022 年 node_modules bin 文件夹丢失了“。”在目录名中

！在所有其他答案中，人们忘记了最后的开始参数

"start": "node -r ./nodeApm.js node_modules/nuxt/bin/nuxt start",

Answer 3

根据我所见，似乎没有“正确”的方法可以使用 stock nuxt 命令行应用程序来执行此操作。问题似乎是，虽然nuxt.config.js 是用户第一次有机会添加一些javascript，但nuxt 命令行应用程序在此配置文件为required 之前引导Node 的HTTP 框架。这意味着弹性代理（或任何 APM 代理）没有机会挂钩到模块中。

来自 Nuxt 团队的 current recommendations 似乎是

1. 通过-r手动调用nuxt

        {
          "scripts": {
            "start": "node -r elastic-apm-node node_modules/nuxt/.bin/nuxt"
          }
        }  
   

2. 在您选择的框架中跳过 nuxt 和 use NuxtJS programmatically 作为中间件

        const { loadNuxt } = require('nuxt')
        const nuxtPromise = loadNuxt('start')
        app.use((req, res) => { nuxtPromise.then(nuxt => nuxt.render(req, res)) })
   

Answer 4

根据 Alan Storm 的回答（来自 Nuxt 团队），我做了一些修改，但做了一些修改：

• 我创建了一个名为 nodeApm.js 的文件，并在其中添加了以下代码：

  const nodeApm = require('elastic-apm-node')
  
  if (!nodeApm.isStarted()) { ... // configuration magic }
  

• 在脚本部分我添加了：

  "start": "node -r ./nodeApm.js node_modules/nuxt/.bin/nuxt"