Sentry(V20.12.1) K8S cloud native architecture exploration, Sentry JavaScript SDK three ways to install and load

A series of

1. Sentry-go SDK Chinese Practice Guide
2. Plan together according to official documents in Sentry For Go
3. Snuba: Sentry’s new search infrastructure (based on ClickHouse)
4. Sentry 10 K8S cloud native architecture exploration, fast access to Vue App in 1 minute
5. Sentry(V20.12.1) K8S cloud native architecture exploration, play forward/back end monitoring and event log big data analysis, high performance + high availability + scalable + scalable cluster deployment

NPM

# to use yarn
yarn add @sentry/browser @sentry/tracing
# use NPM
npm install --save @sentry/browser @sentry/tracing
Copy the code

CDN

Sentry supports loading its JavaScript SDK through THE CDN. In general, we recommend using the NPM package (@Sentry/Browser) as a CDN creation scheme where sentries cannot load due to network problems or common extensions like advertising extensions. If you must use CDN, take a look at how to lazily load Sentry using our JS loader.

<script
  src="https://browser.sentry-cdn.com/5.29.2/bundle.min.js"
  integrity="sha384-ir4+BihBClNpjZk3UKgHTr0cwRhujAjy/M5VEGvcOzjhM1Db79GAg9xLxYn4uVK4"
  crossorigin="anonymous"
></script>
Copy the code

Performance of the Bundle

To use Sentry’s performance tracing, you need an alternative bundle. This allows us to reduce file sizes for users who only need error monitoring.

<script
  src="https://browser.sentry-cdn.com/5.29.2/bundle.tracing.min.js"
  integrity="sha384-4zxA5Bnxor/VkZae20EqPP3A/6vDlw1ZhqF7EvpmeTfWYFjPIDdaUSOk/q7G/bYw"
  crossorigin="anonymous"
></script>
Copy the code

You only need to load bundle.tracing.min.js to provide error and performance monitoring.

The most important thing to note here is that Sentry.Integrations is already available and can be referenced when sentry.init is called:

Sentry.init({
  dsn: "___PUBLIC_DSN___".release: "my-project-name@" + process.env.npm_package_version,
  integrations: [new Sentry.Integrations.BrowserTracing()],

  // We recommend adjusting this value in production or using tracesSampler for finer control
  tracesSampleRate: 1.0});Copy the code

The available Bundles

A variety of bundles are provided that are optimized for the various integrations of Sentry.

Additional configuration

Use the defer

If you include defer in your script, make sure that the application can monitor everything that follows. We strongly recommend that you use defer, with the script tag from the Browser SDK in the first place, and mark it — and all other scripts — defer (rather than Async) to ensure that it is executed before any other scripts.

If you don’t, you’ll find that errors can occur before loading the Sentry, which means you’ll ignore them.

Content security Policy

If you have a content security policy (CSP) set up on your site, you need to add script-src from where to load the SDK and the source of the DSN. Such as:

• script-src: https://browser.sentry-cdn.com
• connect-src: *.sentry.io

Lazy loading of Sentry

Loader is a small wrapper around our SDK that does a few things:

• Always have the latest recommended stable version of our SDK
• Capture allGlobal errorandUnprocessed promises rejections
• Delayed injection of our SDK into your site
• After loading the SDK, the Loader sends everything to Sentry

The loader’s compression (gzipped) is less than 1kB and includes the sentry.init call in your DSN.

<script
  src="https://js.sentry-cdn.com/___PUBLIC_KEY___.min.js"
  crossorigin="anonymous"
></script>
Copy the code

Additional configuration

If you want to set other options, you must set them like this:

OnLoad is the only function provided by Loader; Once the SDK is injected into the site, Loader calls it. Loader init() also works differently. For convenience, we have incorporated these options internally, rather than just setting the options, for convenience, so you don’t have to set the DSN again because the Loader already includes it.

As mentioned earlier, Loader will lazily load our SDK and inject it into your site, but you can also tell Loader to get it now instead of just getting it when you need it. Setting data-lazy to no tells the Loader to inject the SDK as soon as possible:

<script>
  Sentry.onLoad(function() {
    // Use any sentry. * function you want
  });
  Sentry.forceLoad();
</script>
Copy the code

The SDK version

Go to the Sentry Web UI, go to Settings -> Projects -> Client Keys (DSN), and press the Configure button. Here, you can view the options for configuring DSN and select the SDK version that Loader should load.

Because the changes are cached, it can take several minutes to see the changes in your code.

The current limit

Because we are injecting our SDK asynchronously, we will only monitor global errors and unprocessed promises for you until the SDK is fully loaded. This means we might miss breadcrumbs during the download.

For example, a user clicking a button on your web site is making an XHR request. Until the SDK is fully loaded, we won’t miss anything and just leave breadcrumbs behind. You can reduce this time by manually calling forceLoad or setting data-lazy=”no”.

If you want to understand the inner workings of the Loader itself, you can read the fully documented source code in sentry-javascript Repository.

Chinese documents have been synchronized to:

• getsentry.hacker-linner.com

I am for less. Wechat: uuhells123. Public account: Hacker afternoon tea. Thank you for your support 👍👍👍!Copy the code