feat(react): Add useProfiler hook

[AbhiPrasad]

Following up #2647

Motivation

It's important that we support all available React paradigms for @sentry/react, and as such, support adding Sentry AM through React hooks

In this PR, we add a new hook useProfiler that operates exactly like how the withProfiler HOC works earlier.

How does it work?

const Link = () => {
  Sentry.useProfiler("Link")
  return (
    <a href="noop-site">A Link</a>
  )
}

function App() {
  Sentry.useProfiler("App")
  return(
    <Component >
      <Link />
    </Component>
  )
}

Implementation

The profiler hook leverages the useEffect hook to push a new activity on component mount, and then pop the activity when the component has fully rendered. See the React Hooks API docs for more info how useEffect works.

[AbhiPrasad]

Peer dependency for @testing-library/react-hooks

[getsentry-bot]

	Messages
📖	@sentry/browser bundle gzip'ed minified size: (ES5: 17.0742 kB) (ES6: 16.1377 kB)
📖	✅ TSLint passed

Generated by 🚫 dangerJS against b08049d

[HazAT]

✌️ Changelog and a small nit

Otherwise 🥇

[HazAT]

[mrlubos]

Hey @AbhiPrasad @HazAT, is calling useProfiler() on the main App component enough or should I call it on every component of interest? Do you also have any suggestions for the tracesSampleRate parameter? The documentation mentions to lower it in production, but no baseline suggestions are offered. Thanks!

[AbhiPrasad]

Hey @mrlubos.

1. We recommend calling useProfiler on any component you are interested in profiling. If you look at Sentry's usage of the Profiler, https://github.com/getsentry/sentry/search?q=withProfiler&unscoped_q=withProfiler, we typically add it to big stateful component that are important to pageload/navigation, or to thing like loading components. This gives us a better idea of what components are mounted/unmounted while a page is loading (also gives a good idea of if you skeleton states are actually working and when components mount after data gets loaded).

2. The reason we recommend turning down tracesSampleRate is that for really big applications, a high sample rate could cause you to heavily exceed your quota. Since quota/usage varies heavily by Sentry users, we don't really have any baseline suggestions.

For other questions, we recommend opening an issue on Github or asking on our forums about these kind of questions. That way, other people can easily search and find the answer (ask once, answer for many 🚀)

[mrlubos]

Got it, thank you so much @AbhiPrasad!

[mrlubos]

FYI @AbhiPrasad, the reason I ended up here is because I couldn’t find a reference for React Hooks in the Sentry documentation, so I searched this repository 😬

[AbhiPrasad]

Yes, that was on purpose, we wanted to do some more testing with it before we made it fully public in documentation. It's still fully functional though, hence why we left it out for people to consume if they wanted it enough.

Docs coming soon though!

[skrywus]

Will that work for React Native?
I am trying to use it but nothing is happening...

[HazAT]

@skrywus We are working on it now, we'll let you know.