collectStackTrace() — react Function Reference

Architecture documentation for the collectStackTrace() function in parseStackTrace.js from the react codebase.

Function javascript BabelCompiler Validation calls 1

Entity Profile

BabelCompiler→ Validation→ collectStackTrace() — react Function Reference

Dependency Diagram

graph TD
  d8a563c2_1186_4118_2454_b0e4ea9aa908["collectStackTrace()"]
  c70671e1_42cb_8c92_da33_5303a72f89b1["parseStackTrace.js"]
  d8a563c2_1186_4118_2454_b0e4ea9aa908 -->|defined in| c70671e1_42cb_8c92_da33_5303a72f89b1
  6994a131_6218_cba5_2231_90f5cadef485["getMethodCallName()"]
  d8a563c2_1186_4118_2454_b0e4ea9aa908 -->|calls| 6994a131_6218_cba5_2231_90f5cadef485
  style d8a563c2_1186_4118_2454_b0e4ea9aa908 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/backend/utils/parseStackTrace.js lines 148–266

function collectStackTrace(
  error: Error,
  structuredStackTrace: CallSite[],
): string {
  const result: ReactStackTrace = [];
  // Collect structured stack traces from the callsites.
  // We mirror how V8 serializes stack frames and how we later parse them.
  for (let i = framesToSkip; i < structuredStackTrace.length; i++) {
    const callSite = structuredStackTrace[i];
    let name =
      // $FlowFixMe[method-unbinding]
      typeof callSite.getFunctionName === 'function'
        ? callSite.getFunctionName() || '<anonymous>'
        : '';
    if (
      name.includes('react_stack_bottom_frame') ||
      name.includes('react-stack-bottom-frame')
    ) {
      // Skip everything after the bottom frame since it'll be internals.
      break;
      // $FlowFixMe[method-unbinding]
    } else if (typeof callSite.isNative === 'function' && callSite.isNative()) {
      const isAsync =
        // $FlowFixMe[prop-missing]
        // $FlowFixMe[incompatible-use]
        typeof callSite.isAsync === 'function' && callSite.isAsync();
      result.push([name, '', 0, 0, 0, 0, isAsync]);
    } else {
      // We encode complex function calls as if they're part of the function
      // name since we cannot simulate the complex ones and they look the same
      // as function names in UIs on the client as well as stacks.
      if (
        // $FlowFixMe[method-unbinding]
        typeof callSite.isConstructor === 'function' &&
        callSite.isConstructor()
      ) {
        name = 'new ' + name;
      } else if (
        // $FlowFixMe[method-unbinding]
        typeof callSite.isToplevel === 'function' &&
        !callSite.isToplevel()
      ) {
        name = getMethodCallName(callSite);
      }
      if (name === '<anonymous>') {
        name = '';
      }
      let filename =
        // $FlowFixMe[method-unbinding]
        typeof callSite.getScriptNameOrSourceURL === 'function'
          ? callSite.getScriptNameOrSourceURL() || '<anonymous>'
          : '';
      if (filename === '<anonymous>') {
        filename = '';
        // $FlowFixMe[method-unbinding]
        if (typeof callSite.isEval === 'function' && callSite.isEval()) {
          const origin =
            // $FlowFixMe[method-unbinding]
            typeof callSite.getEvalOrigin === 'function'
              ? callSite.getEvalOrigin()
              : null;
          if (origin) {
            filename = origin.toString() + ', <anonymous>';
          }
        }
      }
      const line =
        // $FlowFixMe[method-unbinding]
        (typeof callSite.getLineNumber === 'function' &&
          callSite.getLineNumber()) ||
        0;
      const col =
        // $FlowFixMe[method-unbinding]
        (typeof callSite.getColumnNumber === 'function' &&
          callSite.getColumnNumber()) ||
        0;
      const enclosingLine: number =
        // $FlowFixMe[prop-missing]
        typeof callSite.getEnclosingLineNumber === 'function'
          ? (callSite: any).getEnclosingLineNumber() || 0
          : 0;