Skip to content

Commit

Permalink
Merge branch 'master' into abhi/feat/check-performance-mark
Browse files Browse the repository at this point in the history
  • Loading branch information
AbhiPrasad committed Jun 18, 2020
2 parents b0655ee + 32ff49a commit f695b4e
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 3 deletions.
2 changes: 1 addition & 1 deletion packages/gatsby/src/gatsby-browser.js
@@ -1,6 +1,6 @@
exports.onClientEntry = function(_, pluginParams) {
require.ensure(['@sentry/react', '@sentry/apm'], function(require) {
const Sentry = require('@sentry/browser');
const Sentry = require('@sentry/react');
const TracingIntegration = require('@sentry/apm').Integrations.Tracing;
const tracesSampleRate = pluginParams.tracesSampleRate !== undefined ? pluginParams.tracesSampleRate : 0;
const integrations = [...(pluginParams.integrations || [])];
Expand Down
81 changes: 79 additions & 2 deletions packages/react/README.md
Expand Up @@ -7,9 +7,86 @@

# Official Sentry SDK for ReactJS

Note this library is in active development and not ready for production usage.

## Links

- [Official SDK Docs](https://docs.sentry.io/quickstart/)
- [TypeDoc](http://getsentry.github.io/sentry-javascript/)

## General

This package is a wrapper around `@sentry/browser`, with added functionality related to React. All methods available in
`@sentry/browser` can be imported from `@sentry/react`.

To use this SDK, call `Sentry.init(options)` before you mount your React component.

```javascript
import React from 'react';
import ReactDOM from "react-dom";
import * as Sentry from '@sentry/react';

Sentry.init({
dsn: '__DSN__',
// ...
});

// ...

ReactDOM.render(<App />, rootNode);

// Can also use with React Concurrent Mode
// ReactDOM.createRoot(rootNode).render(<App />);
```

### ErrorBoundary

`@sentry/react` exports an ErrorBoundary component that will automatically send Javascript errors from inside a
component tree to Sentry, and set a fallback UI. Requires React version >= 16.

> app.js
```javascript
import React from 'react';
import * as Sentry from '@sentry/react';

function FallbackComponent() {
return (
<div>An error has occured</div>
)
}

class App extends React.Component {
render() {
return (
<Sentry.ErrorBoundary fallback={FallbackComponent} showDialog>
<OtherComponents />
</Sentry.ErrorBoundary>
)
}
}

export default App;
```

### Profiler

`@sentry/react` exports a Profiler component that leverages the `@sentry/apm` Tracing integration to add React related
spans to transactions. If the Tracing integration is not enabled, the Profiler component will not work. The Profiler
tracks component mount, render duration and updates. Requires React version >= 15.

> app.js
```javascript
import React from 'react';
import * as Sentry from '@sentry/react';

class App extends React.Component {
render() {
return (
<FancyComponent>
<InsideComponent someProp={2} />
<AnotherComponent />
</FancyComponent>
)
}
}

export default Sentry.withProfiler(App);
```

0 comments on commit f695b4e

Please sign in to comment.