Skip to content

Example code to lazy load Sentry using ES2020 import()

License

Notifications You must be signed in to change notification settings

saint777/LazySentry

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

LazySentry

This is some code I use to lazy-load the Sentry JavaScript SDKs, including a basic lazy-loaded React ErrorBoundary. Currently, Sentry's JavaScript SDK is very large. They have built-in basic lazy loading support, however it does not work for on-premise installations, and also does not support the tight React integration via an ErrorBoundary.

Until the bundle size is reduced (as part of v7 of the SDK), lazy-loading the SDK can at least defer the cost a bit.

Files in this repo

  • LazySentryImports: The actual parts of the Sentry module that we want to use
  • LazySentry: Handles loading Sentry. If Sentry has not been loaded yet, the functions (eg. captureException) are buffered in a queue. Once the Sentry library is loaded, all the buffered calls are replayed
  • LazySentryErrorBoundary: React ErrorBoundary that handles a lazy-loaded Sentry SDK

Usage

  • Use LazySentry instead of @sentry/browser or @sentry/react in your code.
  • Call init at some appropriate time, such as after your app has loaded all its main code, or in a requestIdleCallback callback.
  • If you want to use more features from Sentry, add them to LazySentryImports then add wrappers for them in LazySentry.

Support

There is no warranty nor any support provided for the code in this repository.

About

Example code to lazy load Sentry using ES2020 import()

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 100.0%