preprocessFlamechart() — react Function Reference

Architecture documentation for the preprocessFlamechart() function in preprocessData.js from the react codebase.

Function javascript BabelCompiler Validation called by 1

Entity Profile

BabelCompiler→ Validation→ preprocessFlamechart() — react Function Reference

Dependency Diagram

graph TD
  950f17e5_f6a0_7ca5_a5b3_8fa49f95fe1b["preprocessFlamechart()"]
  a3f7147d_da0b_56dc_ffc9_a9e2bbc4526a["preprocessData.js"]
  950f17e5_f6a0_7ca5_a5b3_8fa49f95fe1b -->|defined in| a3f7147d_da0b_56dc_ffc9_a9e2bbc4526a
  be28072d_a059_0346_2a4c_412726599426["preprocessData()"]
  be28072d_a059_0346_2a4c_412726599426 -->|calls| 950f17e5_f6a0_7ca5_a5b3_8fa49f95fe1b
  style 950f17e5_f6a0_7ca5_a5b3_8fa49f95fe1b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/import-worker/preprocessData.js lines 955–998

function preprocessFlamechart(rawData: TimelineEvent[]): Flamechart {
  let parsedData;
  try {
    parsedData = importFromChromeTimeline(rawData, 'react-devtools');
  } catch (error) {
    // Assume any Speedscope errors are caused by bad profiles
    const errorToRethrow = new InvalidProfileError(error.message);
    errorToRethrow.stack = error.stack;
    throw errorToRethrow;
  }

  const profile = parsedData.profiles[0]; // TODO: Choose the main CPU thread only

  const speedscopeFlamechart = new SpeedscopeFlamechart({
    // $FlowFixMe[method-unbinding]
    getTotalWeight: profile.getTotalWeight.bind(profile),
    // $FlowFixMe[method-unbinding]
    forEachCall: profile.forEachCall.bind(profile),
    // $FlowFixMe[method-unbinding]
    formatValue: profile.formatValue.bind(profile),
    getColorBucketForFrame: () => 0,
  });

  const flamechart: Flamechart = speedscopeFlamechart.getLayers().map(layer =>
    layer.map(
      ({
        start,
        end,
        node: {
          frame: {name, file, line, col},
        },
      }) => ({
        name,
        timestamp: start / 1000,
        duration: (end - start) / 1000,
        scriptUrl: file,
        locationLine: line,
        locationColumn: col,
      }),
    ),
  );

  return flamechart;
}