Express with Webpack not sending Transactions #1962
Comments
github-actions
bot
added
the
agent-nodejs
|
Maybe to workaround, I can use the "Starting node with I don't know this option. |
|
Nice to meet you @baruchiro, and thank you for the detailed bug report. Here's the usual problem we see with webpack (or other compiler/transpiler/bundlers). Although you've add Using the So
Yes, step one will be giving that a try :) Change how you're invoking node in your production environment to include the |
|
Hi, nice to meet you too! I will try it, although it is the opposite way from webpack. Think about that, to use But I will try and update you, than we will think on another solution. |
|
Let know how it goes @baruchiro! Also, if you have a moment: What benefit does your team get from bundling a Node.js server side application? Is there something specific you get from doing this, or are you just applying a best practice from your front end development workflows to the back end? |
|
Off-topic- why do we use Webpack for the backend? I thought to write an article about that. Anyway, we have two use-cases. For our discussion, we are talking about a backend service with Express. We are running that service in a Docker, and we have a lot of services (micro-services). To reduce the Docker Image size, we are using Webpack to tree-shaking the dependencies and so on, so that we getting a minimal Docker Image: |
|
@baruchiro Interesting. Thanks for telling your use case. Only if you know off hand, I'm curious how big of a difference that can make in the Docker size. (I'm guessing you would not know off hand, however, if you've been using webpack for a while.) |
|
@trentm Mmmm you're right, I can't give you off-hand (I can checkout an old version, you know, just ask me). Anyway, I added the package to the docker: And it is working! Now I have some points:
|
Sounds like the equivalent potential issue as #608 (where TypeScript fully removes the import of "elastic-apm-node" if the retval isn't actually used directly). I'm not sure, it might also be an ordering of imports thing. Back then a note about using
You should be able to also re-import the module in JS code to get a handle on the agent: the return value from that |
|
I've opened #1967 to add better docs for this. |
Mmmm... Sounds logical, but I think it didn't work. Because remember, we are talking about running a bundle, so I'm not sure it still a singleton. I mean, when you require a module multiple times, it actually requiring it once, right? But here I'm requiring it outside the bundle, but in the bundle, I'm not requiring it at all, because of the tree-shaking, it runs the code itself, duplicated. When I'm trying to require it by (It seems like someone requesting the service. Or maybe it a health check from one of the connections inside the service) After sending request which should use the spanned code, I can't see the span in Kibana. I added this code: const span = apm.startSpan('validating log')
console.log('start span', span)
try {
// ... Original Code
} finally {
console.log('finally span', span)
span?.end()
}and this is the log: Note to the |
Same problem for us, we use angular universal (babel, typescript included). |
I think you are right. Sorry, I know this issue has languished. I have some more notes here in case it helps for now: #2318 (comment) |
|
@trentm huge thank you for your help on this. We had a similar issue to @baruchiro. Loading the agent first in the Dockerfile did the trick! I'm hopeful #1967 is merged soon 🤞 |
|
#1967 is in now, which will hopefully help more. PR: #2837 https://www.elastic.co/guide/en/apm/agent/nodejs/master/starting-the-agent.html#start-bundlers tries to cover issues with bundlers, such as Webpack. Basically to use the agent requires that it be excluded from the bundle. The docs cover options for doing that for Webpack and esbuild. (Instructions for other bundlers, if you have experience using it and the APM agent, would be welcome.) I realize this is just a workaround. I think future work that would be good would be to see if the APM agent can tell if it has been bundled, and then complain with a warning and then deactivate. I haven't looked to far into if that is feasible. We might in the future look into if it would be possible to improve on the story with bundlers, possibly including:
I'm closing this issue. Please re-open and let me know if, in my haste, I missed points that should still be answered here. Thanks very much for the bug reports. |
Describe the bug
I have an express service that bundled with Webpack and runs on Docker (it's mean that in the Dockerfile you just need
CMD ["node", "--enable-source-maps", "main.js"]To Reproduce
Steps to reproduce the behavior:
import apm from 'elastic-apm-node/start'at the top on the file.webpack.config.jsfile:Expected behavior
When I'm running in debug mode, without webpack, by
babel-node --inspect=33180 src/index.js, I'm getting the transactions as expected.Here is the configuration output from Debug mode:
agent configured correctly { pid: 21432, ppid: 17216, arch: 'x64', platform: 'win32', node: 'v12.18.2', agent: '3.10.0', ancestors: [ 'absolutePath\\service-name\\node_modules\\elastic-apm-node\\index.js', 'absolutePath\\service-name\\node_modules\\elastic-apm-node\\start.js', 'absolutePath\\service-name\\src\\index.js', [length]: 3 ], startTrace: [ 'at Agent.start (absolutePath\\service-name\\node_modules\\elastic-apm-node\\lib\\agent.js:154:11)', 'at Object.<anonymous> (absolutePath\\service-name\\node_modules\\elastic-apm-node\\start.js:3:32)', 'at Module._compile (internal/modules/cjs/loader.js:1138:30)', 'at Module._compile (absolutePath\\service-name\\node_modules\\pirates\\lib\\index.js:99:24)', 'at Module._extensions..js (internal/modules/cjs/loader.js:1158:10)', 'at Object.newLoader [as .js] (absolutePath\\service-name\\node_modules\\pirates\\lib\\index.js:104:7)', 'at Module.load (internal/modules/cjs/loader.js:986:32)', 'at Function.Module._load (internal/modules/cjs/loader.js:879:14)', 'at Module.require (internal/modules/cjs/loader.js:1026:19)', 'at require (internal/modules/cjs/helpers.js:72:18)', [length]: 10 ], main: undefined, dependencies: undefined, conf: { ignoreUrlStr: [ [length]: 0 ], ignoreUrlRegExp: [ [length]: 0 ], ignoreUserAgentStr: [ [length]: 0 ], ignoreUserAgentRegExp: [ [length]: 0 ], transactionIgnoreUrlRegExp: [ [length]: 0 ], sanitizeFieldNamesRegExp: [ /^password$/i { [lastIndex]: 0 }, /^passwd$/i { [lastIndex]: 0 }, /^pwd$/i { [lastIndex]: 0 }, /^secret$/i { [lastIndex]: 0 }, /^.*key$/i { [lastIndex]: 0 }, /^.*token.*$/i { [lastIndex]: 0 }, /^.*session.*$/i { [lastIndex]: 0 }, /^.*credit.*$/i { [lastIndex]: 0 }, /^.*card.*$/i { [lastIndex]: 0 }, /^authorization$/i { [lastIndex]: 0 }, /^set\x2dcookie$/i { [lastIndex]: 0 }, /^pw$/i { [lastIndex]: 0 }, /^pass$/i { [lastIndex]: 0 }, /^connect\.sid$/i { [lastIndex]: 0 }, [length]: 14 ], abortedErrorThreshold: 25, active: true, apiRequestSize: 786432, apiRequestTime: 10, asyncHooks: true, breakdownMetrics: true, captureBody: 'off', captureErrorLogStackTraces: 'messages', captureExceptions: true, captureHeaders: true, captureSpanStackTraces: true, centralConfig: true, disableInstrumentations: [ [length]: 0 ], environment: 'development', errorMessageMaxLength: 2048, errorOnAbortedRequests: false, filterHttpHeaders: true, instrument: true, instrumentIncomingHTTPRequests: true, logLevel: 'trace', logUncaughtExceptions: false, metricsInterval: 30, metricsLimit: 1000, sanitizeFieldNames: [ 'password', 'passwd', 'pwd', 'secret', '*key', '*token*', '*session*', '*credit*', '*card*', 'authorization', 'set-cookie', 'pw', 'pass', 'connect.sid', [length]: 14 ], serverTimeout: 30, sourceLinesErrorAppFrames: 5, sourceLinesErrorLibraryFrames: 5, sourceLinesSpanAppFrames: 0, sourceLinesSpanLibraryFrames: 0, stackTraceLimit: 50, transactionIgnoreUrls: [ [length]: 0 ], transactionMaxSpans: 500, transactionSampleRate: 1, useElasticTraceparentHeader: true, usePathAsTransactionName: false, verifyServerCert: false, serverUrl: 'http://apm-server:8200', serviceName: 'service-name', serviceVersion: '1.0.0', serverHost: 'apm-server:8200', serverPort: 8200 } } node_modules/console-log-level/index.js adding hook to Node.js module loader node_modules/console-log-level/index.js shimming [email protected] module node_modules/console-log-level/index.js shimming http.Server.prototype.emit function node_modules/console-log-level/index.js shimming http.ServerResponse.prototype.writeHead function node_modules/console-log-level/index.js shimming http.request function node_modules/console-log-level/index.js shimming http.get function node_modules/console-log-level/index.js shimming [email protected] module node_modules/console-log-level/index.js shimming https.Server.prototype.emit function node_modules/console-log-level/index.js shimming https.request function node_modules/console-log-level/index.js shimming https.get function node_modules/console-log-level/index.js shimming [email protected] module node_modules/console-log-level/index.js shimming elasticsearch.Transport.prototype.request node_modules/console-log-level/index.js shimming [email protected] module node_modules/console-log-level/index.js shimming [email protected] module node_modules/console-log-level/index.js shimming express.Router.use function node_modules/console-log-level/index.js shimming express.static function node_modules/console-log-level/index.js copying property mime from express.static node_modules/console-log-level/index.js shimming [email protected] module node_modules/console-log-level/index.js shimming express.Router.Layer.handle function: query node_modules/console-log-level/index.js shimming express.Router.Layer.handle function: expressInit node_modules/console-log-level/index.js shimming express.Router.Layer.handle function: compression node_modules/console-log-level/index.js shimming express.Router.Layer.handle function: corsMiddleware node_modules/console-log-level/index.js shimming express.Router.Layer.handle function: bound dispatch shimming express.Router.Layer.handle function: bound dispatch shimming express.Router.Layer.handle function: bound dispatch shimming express.Router.Layer.handle function: bound dispatch shimming express.Router.Layer.handle function: bound dispatch shimming express.Router.Layer.handle function: bound dispatch shimming express.Router.Layer.handle function: bound dispatch node_modules/console-log-level/index.jsActual behavior
But in production, I can see the service, I even capturing errors manually, but I can't see the transactions.
Here is the config output from the production (webpack) run:
agent configured correctly { � , ppid: 0, arch: 'x64', platform: 'linux', node: 'v12.19.1', agent: '3.10.0', ancestors: [ [length]: 0 ], startTrace: [ 'at v.start (/usr/src/app/main.js:200:3475)', 'at Object.<anonymous> (/usr/src/app/main.js:200:67)', 'at n (/usr/src/app/main.js:1:110)', 'at Module.<anonymous> (/usr/src/app/main.js:384:219812)', 'at n (/usr/src/app/main.js:1:110)', 'at /usr/src/app/main.js:1:902', 'at Object.<anonymous> (/usr/src/app/main.js:1:913)', 'at Module._compile (internal/modules/cjs/loader.js:1015:30)', 'at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)', 'at Module.load (internal/modules/cjs/loader.js:879:32)', [length]: 10 ], main: undefined, dependencies: undefined, � { ignoreUrlStr: [ [length]: 0 ], ignoreUrlRegExp: [ [length]: 0 ], ignoreUserAgentStr: [ [length]: 0 ], ignoreUserAgentRegExp: [ [length]: 0 ], transactionIgnoreUrlRegExp: [ [length]: 0 ], sanitizeFieldNamesRegExp: [ /^password$/i { [lastIndex]: 0 }, /^passwd$/i { [lastIndex]: 0 }, /^pwd$/i { [lastIndex]: 0 }, /^secret$/i { [lastIndex]: 0 }, /^.*key$/i { [lastIndex]: 0 }, /^.*token.*$/i { [lastIndex]: 0 }, /^.*session.*$/i { [lastIndex]: 0 }, /^.*credit.*$/i { [lastIndex]: 0 }, /^.*card.*$/i { [lastIndex]: 0 }, /^authorization$/i { [lastIndex]: 0 }, /^set\x2dcookie$/i { [lastIndex]: 0 }, /^pw$/i { [lastIndex]: 0 }, /^pass$/i { [lastIndex]: 0 }, /^connect\.sid$/i { [lastIndex]: 0 }, [length]: 14 ], abortedErrorThreshold: 25, active: true, apiRequestSize: 786432, apiRequestTime: 10, asyncHooks: true, breakdownMetrics: true, captureBody: 'off', captureErrorLogStackTraces: 'messages', captureExceptions: true, captureHeaders: true, captureSpanStackTraces: true, centralConfig: true, disableInstrumentations: [ [length]: 0 ], environment: 'production', errorMessageMaxLength: 2048, errorOnAbortedRequests: false, filterHttpHeaders: true, instrument: true, instrumentIncomingHTTPRequests: true, logLevel: 'trace', logUncaughtExceptions: false, metricsInterval: 30, metricsLimit: 1000, sanitizeFieldNames: [ 'password', 'passwd', 'pwd', 'secret', '*key', '*token*', '*session*', '*credit*', '*card*', 'authorization', 'set-cookie', 'pw', 'pass', 'connect.sid', [length]: 14 ], serverTimeout: 30, sourceLinesErrorAppFrames: 5, sourceLinesErrorLibraryFrames: 5, sourceLinesSpanAppFrames: 0, sourceLinesSpanLibraryFrames: 0, stackTraceLimit: 50, transactionIgnoreUrls: [ [length]: 0 ], transactionMaxSpans: 500, transactionSampleRate: 1, useElasticTraceparentHeader: true, usePathAsTransactionName: false, verifyServerCert: false, serverUrl: 'http://apm-server:8200', serviceName: 'service-name-dev-env', serverHost: 'apm-server:8200', serverPort: 8200 } } adding hook to Node.js module loader shimming [email protected] module shimming https.Server.prototype.emit function shimming https.request function shimming https.get functionPlease note there are no
ancestors, and there are fewershimming. Also, note I named the "production" (webpack) service with a different name ('service-name-dev-env) to identify it.Environment (please complete the following information)
You can see the config output. It is better.
APM Server version:
{ "build_date": "2019-03-06T14:11:42Z", "build_sha": "daad5449d758e7bf101f6482778a2b15f646a67f", "version": "6.6.2" }How are you starting the agent? (please tick one of the boxes)
agent.start()directly (e.g.require('elastic-apm-node').start(...))elastic-apm-node/startfrom within the source code-r elastic-apm-node/startAdditional context
package.jsondependencies:Click to expand
The text was updated successfully, but these errors were encountered: