Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

feat(Provider): Rendering performance telemetry #2079

Merged
merged 7 commits into from
Nov 6, 2019

Conversation

miroslavstastny
Copy link
Member

@miroslavstastny miroslavstastny commented Oct 31, 2019

Add rendering performance telemetry to understand how much time the application spends rendering Stardust components.

How to use

Add telemetryRef prop to the Provider:

const telemetryRef = React.useRef<Telemetry>()

return (
  <Provider telemetryRef={telemetryRef}>
  ...
  </Provider>
)

Stardust immediately starts measuring performance of all components inside that Provider (including nested Providers).

To enable/disable the telemetry, set enabled property:

telemetryRef.current.enabled = false

To reset the data gathered so far, call reset():

telemetryRef.current.reset()

Gathered data are available in performance:

const totals = _.reduce(telemetry.current.performance, (acc, next) => {
    acc.count += next.count
    acc.msTotal += next.msTotal
    return acc
  },
  { count: 0, msTotal: 0 },
)

console.log(`Rendered ${totals.count} Stardust components in ${totals.msTotal} ms`)
console.table(telemetry.performance)

Example output:

image

Implementation

Most of the rendering time is spent inside renderComponent function.
This PR adds markers to that function to measure the time spent inside that per-component name.

@miroslavstastny miroslavstastny changed the title feat(Provider): Measure rendering performance stats feat(Provider): Rendering performance stats Oct 31, 2019
Copy link
Member

@levithomason levithomason left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let move the telemetry counting to the Telemetry class per discussion. Also, add an msAvg getter for ease of use.

@miroslavstastny
Copy link
Member Author

miroslavstastny commented Nov 6, 2019

Let move the telemetry counting to the Telemetry class per discussion. Also, add an msAvg getter for ease of use.

Discussed offline, we'll do this later. Let's get the first version rollin'.

@miroslavstastny miroslavstastny changed the title feat(Provider): Rendering performance stats feat(Provider): Rendering performance telemetry Nov 6, 2019
@miroslavstastny miroslavstastny merged commit 28588a5 into master Nov 6, 2019
@miroslavstastny miroslavstastny deleted the feat/performance-stats branch November 6, 2019 20:48
levithomason pushed a commit that referenced this pull request Nov 9, 2019
* feat(Provider): Measure rendering performance stats

* - reset, enable, disable stats

* - rename PerformanceStats to Telemetry

* add min and max per component

* update changelog
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants