Sentry react lazy

This package create a <script> tag that loads the sentry CDN, initialize the service and share the SDK around the whole application using the React Context API.

Goal

Enable a satisfying use of sentry.io with React avoiding the load of the entire bundle inside the application which weights about 90kb minified (resources)

Usage

Install the dependencie

npm i sentry-react-lazy

Wrap the application (or the part where you want use the service) with the <SentryProvider> component and set the configuration settings.

To avoid annoing adBlocking software it can be useful load the CDN using a tunnel or serving it directly from the same server. Check here the documentation and then just change the url or the config.

const sentryConfig = {
  dsn: 'gjrdphgy035yh4509eghfdbdgfbnw40',
  debug: true,
  environment: 'development',
  release: 'my-awesome-app'
}

ReactDOM.render(
  <SentryProvider
    url="https://browser.sentry-cdn.com/6.16.0/bundle.min.js"
    integrity="sha384-uCtXtkrVtGeYH5N3JGG4lcPwQfXSwZAoP8haDYEo+ViUGd7T56ti5p3CDmK3ausF"
    config={sentryConfig}
  >
    <App />
  </SentryProvider>,
  document.getElementById('root')
)

Then all exceptions will be monitored so:

<button
  onClick={() => {
    throw new Error('Sentry error')
  }}
>
  Button
</button>

If you want to use the internal Sentry functions you can just:

import { useSentry } from 'sentry-react-lazy'

export default function MyComponent() {
  const Sentry = useSentry()
  // Or destructuring with: const { captureMessage } = useSentry()

  return (
    <div>
      <button onClick={() => Sentry.captureMessage('Sentry message')}>
        Button
      </button>
    </div>
  )
}

Methods

Sentry's SDK hooks into your runtime environment and automatically reports errors, uncaught exceptions, and unhandled rejections as well as other types of errors depending on the platform. (doc)

If you want report custom exeption it can be also possible use the following functions.

| method | description | | -------------------------- | -- | | captureMessage(msg) | capture a custom message | | captureException(err)| capture the entire exception passing the Error object as argument | | configureScope(callback)| set the level within the scope (doc)| | withScope(callback) | override the default level within the event (doc) | | setContext(str, obj) | set a custom context to the exception captured | | setUser(user) | identify the session user | | setTag(name, value) | customize the issue with a custom tag | | addBreadcrumb(breadcrumb, maxBreadcrumb) | add custom data to issue |

Those functions also take as optional argument the scope of the error. (doc)

Performance monitoring

Performance monitoring is available using the right CDN.

In order to use the automatic integration new TracingIntegrations.BrowserTracing() is need to set the performance prop in the <SentryProvider>. Custom options must be passed as tracingOptions prop as expected by the the original doc.

Don't forget to set tracesSampleRate in the configuration.

<SentryProvider
  url="https://browser.sentry-cdn.com/6.16.0/bundle.tracing.min.js"
  integrity="sha384-nOg4TW2SG7+ChoY+hVJJjLwLlnood85Xw4eFnH7/3VUmhvQCBlXO4KHlLkV/4JmG"
  config={sentryConfig}
  performance
  tracingOptions={{tracingOrigins: ['localhost', 'my-site-url.com', /^\//]}}
>
  <App />
</SentryProvider>

It can be possible also create your custom instrumentations without donwload any other package.

Scope

Unlike the original setup the class new Sentry.Scope() is already called so all its method are already binded inside the Sentry.Scope object.

Check the example below:

const Sentry = useSentry()

useEffect(() => {
  const scope = Sentry.Scope
  if(scope) {
    scope.setTag("section", "articles");
    Sentry.captureException(new Error("something went wrong"), scope);
  }
}, [Sentry.Scope])

Caveats

Please refer to the original documentation for more information about the usage.

How to start contributing

1. git clone [email protected]:Valerioageno/sentry-react-lazy.git
2. remove the extension .example from playground/.env.example and set your own DSN from sentry.io
3. npm run i-all
4. npm run dev
5. enjoy

Any helps or suggestions will be really appreciated.

License

This project is licensed under the MIT License - see the LICENSE file for more information.