feat: Add @sentry/react

[AbhiPrasad]

Motivation

This PR adds the @sentry/react package. This provides our users with an easy way to use @sentry/browser combined with some custom React components.

The plan is to have a Profiler component (and according HOC) that works with @sentry/apm to provide per component tracing, and a custom <Sentry.ErrorBoundary /> component that leverages React 16's error boundary functionality. The Profiler will both have a hooks based, and class based implementation.

Implementation

A new lerna package @sentry/react was created. For the purpose of this first PR, a class based Profiler component was created. This component can be used as such:

import * as Sentry from '@sentry/react';
...
// Using Profiler component
render() {
  <Profiler>
    <Component />
  </Profiler>
}

...
// Using HOC
function App: React.FC<>

return withProfiler(App)

The Profiler has one prop, componentDisplayName, which allows the user to customize what the display name of the profiler.

Testing

Tests were written leveraging the react-test-renderer library. I did this because I needed to test specific lifecycle functionality, and didn't want the added weight of using enzyme or react-testing-library.

In addition, this library was tested on getsentry/sentry and various demo repo's. I can provide links to example traces upon request, just ping me.

This class based Profiler should work with React >= 15

Future

After this PR is merged, we will look toward creating the ErrorBoundary component.

[HazAT]

Did the first pass, really like it :)

Just a few general things to remember

• Update PR description with Motivation + Description
• Add Changelog Entry

[getsentry-bot]

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

Generated by 🚫 dangerJS against cf8d8ca

[AbhiPrasad]

I've decided to keep this library for now instead of vendoring it in. This is as it leverages functionality from react-is, https://github.com/facebook/react/tree/master/packages/react-is, which is hard to keep up to date properly (lot's of manual copy-paste, hard to know when different react types will change).

Many popular libraries use hoist-non-react-statics. See:
react-intl: https://github.com/formatjs/formatjs/blob/master/packages/react-intl/package.json#L143
react-redux: https://github.com/reduxjs/react-redux/blob/master/package.json#L52
react-apollo: https://github.com/apollographql/react-apollo/blob/master/packages/hoc/package.json#L45

[AbhiPrasad]

I think it's worth the bundle size change here for a much smoother experience, it adds 1.2kb gzipped + minified - https://bundlephobia.com/[email protected]

[HazAT]

OK, let's keep it for now.

[HazAT]

👍
A few nits, otherwise LGTM

[HazAT]

OK, let's keep it for now.