React等技术栈下JS严格模式如何替代废弃的function caller？

一、利用Error对象生成调用栈 #

这是最通用的原生替代方案，通过创建Error实例获取完整调用栈，严格模式下完全可用：

function trackCaller() {
  const err = new Error();
  // 拆分并过滤掉当前函数自身的调用记录，只保留上层调用链
  const callStack = err.stack.split('\n').slice(2);
  console.log('调用来源:', callStack.join('\n'));
}

function foo() {
  trackCaller();
}

function bar() {
  foo();
}

bar(); // 输出调用链：bar -> foo -> trackCaller

你可以根据需求解析stack字符串，提取具体的函数名、文件路径和行号，适配日志格式。

二、借助日志工具增强追踪 #

针对你的React技术栈，可结合成熟工具简化追踪：

• 用winston或pino这类日志库：它们支持自定义格式化配置，能自动捕获调用栈信息，无需手动处理Error对象，直接在日志中输出调用来源。
• React DevTools：通过Profiler面板查看组件渲染调用流程，配合console日志，能直观定位函数的触发路径。

三、手动传递调用标识（可控场景） #

如果是自己维护的函数体系，可以在调用时手动传入调用方标识，适合小范围精准追踪：

function trackCaller(callerInfo) {
  console.log('调用来源:', callerInfo);
}

function foo() {
  trackCaller('来自foo函数');
}

function bar() {
  foo('来自bar函数');
}

这种方式无需依赖原生API，侵入性低但需要手动维护调用信息。

注意事项 #

• 坚决不要禁用严格模式，这会引入安全风险和性能损耗，不符合现代JavaScript开发规范。
• 生产环境建议关闭详细调用栈输出，避免泄露代码结构，同时降低性能开销。

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