How to name an anonymous function or a express middleware in JavaScript?

Question

Here's the middleware that I use in express:

    const app = express();
    const port = 8000;
    const f = () => {
        return async (req, res, next) => {
            await new Promise(resolve => setTimeout(resolve, 3000));
            return next();
        }
    }
    const namedFunction = f();
    app.use(namedFunction); // earlier I was using `app.use(f());` 

But my function still appear as anonymous function in profiler: Something like this:

A bit of background: We want to see which middleware is causing the high latency, but because the middlewares are anonymous, we can't narrow down the cause in our APM + JS profiler. The preceding is just one example; we use approximately 40 middleware packages over which we have no control.

That's why I thought passing f() to namedFunction should fix the issue but it wasn't so looking for help on this.

Other tries till now: As per Jonsharpe's comment I tried:

app.use(function namedFunction() { f()(...arguments) });

But in profiler it still appear as an anonymous function

Answer 1

While I do not know much about express, I can at least clear up a misconception you have about anonymous functions.

When you create a function and immediately store it in a variable, the interpreter can implicitly use the name of the variable as the name of the function. That is true of both functions created with the function expression or with the arrow notation.

const foo = () => {};
foo.name; // "foo";

const bar = function () {};
bar.name; // "bar";

But if you create a function and then immediately pass it as an argument or return it, the interpreter cannot give it a name at creation, so it becomes anonymous.

So when you did this:

const namedFunction = f();

All you did was store the already-created anonymous function returned by f() inside the variable namedFunction. You did not actually give it a name. To do that, you would need to do something like so:

const unnamedFunction = f();
const namedFunction = (...args) => unnamedFunction(...args);

Which simply wraps the unnamed function into a named one.

You could also create a variable to store an arrow function before returning it or passing it as a callback.

const meaningfulName = () => { ... };
return meaningfulName;

But unless you actually rely on the behavior of arrow functions, I would just use a named function expression in those cases:

return function meaningfulName () { ... };

Answer 2

In this answer, an example is shown that redefines the name property of a function which is normally read-only. This seems to work just fine in v8.

// Apart from the added error so we can log a stack trace,
// this is unchanged from your example:
    const f = () => {
        return async (req, res, next) => {
            throw new Error("Intentionally cause an error to log the function's name.");
            await new Promise(resolve => setTimeout(resolve, 3000));
            return next();
        }
    }
    const namedFunction = f();

When the function is called and its error is logged, you'd get a stack trace like this, as you saw in your profiler, the function has no name:

namedFunction().catch(console.log);

// Error: Intentionally cause an error to log the function's name.
//     at /tmp/namedfn.js:3:19
//     at Object.<anonymous> (/tmp/namedfn.js:9:5)

Rename as per the linked answer:

Object.defineProperty(namedFunction, 'name', {value: 'someFn'});
namedFunction().catch(console.log);

// Error: Intentionally cause an error to log the function's name.
//     at someFn (/tmp/namedfn.js:3:19)
//     at /tmp/namedfn.js:14:9

It is now named 'someFn' and should show up in your profiler as such.

---

Note that this answer is better / less hacky in cases where the source can be edited (OP doesn't have control over f()'s content according to a comment).

Answer 3

After a lot many tries of assigning name, refactoring use I came up with this and finally the profiler was able to point out that it's the wrappedFunction which is causing it so going ahead I'll need to create a wrapperFunction for each of the case.

Here's a sample of what worked in the end:

const f = () => {
        return async (req, res, next) => {
            await new Promise(resolve => setTimeout(resolve, 3000));
            return next();
        }
    }
    const wrappedFunction  = async(req, res, next) => {
        await new Promise(resolve => f()(req, res, resolve)); // Now since time is spent in this block that's why profiler is picking this up instead of the anonymous function as the main resource consuming function
        next();
    }
    
    app.use(wrappedFunction);

And here's what it looks like in profiler now:

Just an note to others who might not know the context: By default the official middlewares are usually named functions but some 3rd party middleware return an anonymous function which profiler/APM isn't able to pick up and point to code block from there. That's why it's important to have a named function instead of anonymous middleware showing up in UI and being unclear where to look at.