如何获取调用函数变量的栈追踪？解决匿名函数异常定位问题

我定义了如下父类：

class Parent {
    protected functionItems = []

    public doit() {
       this.functionItems.forEach(f => f())
    }
}

该类的doit方法会遍历调用成员数组中的所有函数。子类仅负责填充该函数数组：

class Child extends Parent {
   protected functionItems = [
     () => { console.log('Hello') },
     () => { throw new Error('here') }
    ]
}

当前问题：第二个函数抛出错误时，栈追踪仅指向Parent.doit，难以定位异常的真正来源。当前输出为Child.<anonymous> (src/Parent.js:5)，我希望能识别出具体是哪个函数，或者最好能同时获取函数及内部行号。请问是否可以对函数进行标记？我无法改用命名成员，因为数组的通用遍历特性很重要。

1. 给匿名函数设置显式名称 #

JS里可以通过命名函数表达式或者给箭头函数的name属性赋值（现代浏览器/Node.js支持），让栈追踪显示自定义名称，完全不破坏数组的遍历特性：

class Child extends Parent {
   protected functionItems = [
     // 命名函数表达式，栈追踪会显示sayHello
     function sayHello() { console.log('Hello') },
     // 箭头函数手动设置name，栈追踪会显示throwErrorFunc
     Object.assign(() => { throw new Error('here') }, { name: 'throwErrorFunc' })
    ]
}

这样抛错时，栈追踪会直接显示函数的自定义名称，一眼就能定位到出错的函数。

2. 包装函数添加错误上下文 #

如果需要更详细的定位信息（比如函数在数组中的索引、自定义描述），可以给每个函数加一层包装，执行时捕获错误并补充上下文后重新抛出：

子类内单独处理 #

class Child extends Parent {
   protected functionItems = [
     () => { console.log('Hello') },
     () => { throw new Error('here') }
    ].map((func, index) => {
      return () => {
        try {
          return func()
        } catch (err) {
          // 给错误消息附加索引信息
          err.message = `[数组索引${index}] ${err.message}`
          // 可选：给栈追踪追加来源标记
          if (err.stack) {
            err.stack += `\n--- 来源：functionItems[${index}]`
          }
          throw err
        }
      }
    })
}

执行后错误会显示[数组索引1] here，栈追踪也会附带来源信息，精准定位到出错的数组项。

父类统一处理（更通用） #

如果不想每个子类都写包装逻辑，直接把处理逻辑放到父类的doit方法里，所有子类自动受益：

class Parent {
    protected functionItems = []

    public doit() {
       this.functionItems.forEach((f, index) => {
         try {
           f()
         } catch (err) {
           err.message = `执行functionItems中索引${index}的函数时出错：${err.message}`
           throw err
         }
       })
    }
}

这种方式子类完全不需要修改，就能在错误中看到具体是哪个索引的函数出了问题。

3. 临时调试：用注释标记函数 #

如果只是临时调试，不想改动代码结构，可以给箭头函数加注释，Chrome DevTools等调试工具会在栈追踪里显示注释内容：

class Child extends Parent {
   protected functionItems = [
     /* sayHello */ () => { console.log('Hello') },
     /* throwError */ () => { throw new Error('here') }
    ]
}

打开调试工具查看错误栈，就能看到注释里的标识，适合快速定位问题。

内容的提问来源于stack exchange，提问作者olidem