github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/packages/pyroscope-flamegraph/README.md (about)

     1  # Pyroscope Flamegraph
     2  This is a component which allows for you to render flamegraphs in your website or application.
     3  While this is typically used for profiling data this can also be used to render tracing data as well
     4  
     5  ## Rendering Profiling Data
     6  
     7  Import the CSS
     8  ```
     9  import '@pyroscope/flamegraph/dist/index.css';
    10  ```
    11  
    12  Import the `FlamegraphRenderer` component
    13  
    14  ```
    15  import { FlamegraphRenderer, Box } from '@pyroscope/flamegraph';
    16  
    17  const SimpleTree = {
    18    version: 1,
    19    flamebearer: {
    20      names: [
    21        'total',
    22        'runtime.mcall',
    23        'runtime.park_m',
    24        'runtime.schedule',
    25        'runtime.resetspinning',
    26        'runtime.wakep',
    27        'runtime.startm',
    28        'runtime.notewakeup',
    29        'runtime.semawakeup',
    30        'runtime.pthread_cond_signal',
    31        'runtime.findrunnable',
    32        'runtime.netpoll',
    33        'runtime.kevent',
    34        'runtime.main',
    35        'main.main',
    36        'github.com/pyroscope-io/client/pyroscope.TagWrapper',
    37        'runtime/pprof.Do',
    38        'github.com/pyroscope-io/client/pyroscope.TagWrapper.func1',
    39        'main.main.func1',
    40        'main.slowFunction',
    41        'main.slowFunction.func1',
    42        'main.work',
    43        'runtime.asyncPreempt',
    44        'main.fastFunction',
    45        'main.fastFunction.func1',
    46      ],
    47      levels: [
    48        [0, 609, 0, 0],
    49        [0, 606, 0, 13, 0, 3, 0, 1],
    50        [0, 606, 0, 14, 0, 3, 0, 2],
    51        [0, 606, 0, 15, 0, 3, 0, 3],
    52        [0, 606, 0, 16, 0, 1, 0, 10, 0, 2, 0, 4],
    53        [0, 606, 0, 17, 0, 1, 0, 11, 0, 2, 0, 5],
    54        [0, 606, 0, 18, 0, 1, 1, 12, 0, 2, 0, 6],
    55        [0, 100, 0, 23, 0, 506, 0, 19, 1, 2, 0, 7],
    56        [0, 100, 0, 15, 0, 506, 0, 16, 1, 2, 0, 8],
    57        [0, 100, 0, 16, 0, 506, 0, 20, 1, 2, 2, 9],
    58        [0, 100, 0, 17, 0, 506, 493, 21],
    59        [0, 100, 0, 24, 493, 13, 13, 22],
    60        [0, 100, 97, 21],
    61        [97, 3, 3, 22],
    62      ],
    63      numTicks: 609,
    64      maxSelf: 493,
    65    },
    66    metadata: {
    67      appName: 'simple.golang.app.cpu',
    68      name: 'simple.golang.app.cpu 2022-09-06T12:16:31Z',
    69      startTime: 1662466591,
    70      endTime: 1662470191,
    71      query: 'simple.golang.app.cpu{}',
    72      maxNodes: 1024,
    73      format: 'single' as const,
    74      sampleRate: 100,
    75      spyName: 'gospy' as const,
    76      units: 'samples' as const,
    77    },
    78    timeline: {
    79      startTime: 1662466590,
    80      samples: [
    81        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    82        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    83        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    84        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    85        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    86        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    87        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    88        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    89        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    90        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    91        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    92        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    93        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    94        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    95        0, 0, 0, 0, 0, 0, 0, 0, 0, 610, 0,
    96      ],
    97      durationDelta: 10,
    98    },
    99  };
   100  
   101  export const Flamegraph = () => {
   102    return (
   103      <FlamegraphRenderer
   104        profile={SimpleTree}
   105        onlyDisplay="flamegraph"
   106        showToolbar={false}
   107      />
   108    );
   109  };
   110  ```
   111  
   112  We recommend wrapping  a `Box` around your component to give it some padding.
   113  ```
   114  <Box>
   115    <FlamegraphRenderer
   116      profile={SimpleTree}
   117      onlyDisplay="flamegraph"
   118      showToolbar={false}
   119    />
   120  </Box>
   121  ```
   122  
   123  ## Rendering Tracing Data
   124  Note: Currently Pyroscope only supports rendering tracing data from Jaeger.
   125  
   126  ```
   127  import { FlamegraphRenderer, convertJaegerTraceToProfile } from "@pyroscope/flamegraph";
   128  import "@pyroscope/flamegraph/dist/index.css";
   129  
   130  let trace = jaegerTrace.data[0];
   131  let convertedProfile = convertJaegerTraceToProfile(trace);
   132  
   133  function App() {
   134    return (
   135      <div>
   136        <h1>Trace Flamegraph</h1>
   137        <FlamegraphRenderer
   138          profile={convertedProfile}
   139          onlyDisplay="flamegraph"
   140          showToolbar={true}
   141        />
   142      </div>
   143    );
   144  }
   145  ```