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
  6. Sentry(V20.12.1) K8S cloud native architecture exploration, Sentry JavaScript SDK three ways to install and load
  7. Sentry(V20.12.1) K8S cloud native architecture exploration, Sentry FOR JAVASCRIPT SDK configuration details
  8. Sentry(V20.12.1) K8S cloud native architecture exploration, Sentry FOR JAVASCRIPT manual capture of event basic usage
  9. Sentry(V20.12.1) K8S cloud native architecture exploration, Sentry FOR JAVASCRIPT Source Maps details

If you need help resolving issues with the Sentry JavaScript SDK integration, you can read some of the cases documented here.

Debugging Additional Data

You can look at the JSON payload of the event to see how Sentry stores additional data in the event. The shape of the data may not exactly match the description.

For more information, see the documentation on Event Payload.

Max JSON Payload Size

The default value for maxValueLength is 250, but you can adjust this value as needed if your message is longer. Note that not every single value is affected by this option.

CORS Attributes and Headers

To learn about JavaScript exceptions thrown by scripts from different sources, do two things:

  1. Add a crossorigin= “anonymous” script attribute
 <script src="http://another-domain.com/app.js" crossorigin="anonymous"></script>
Copy the code

The script property tells browsers to “anonymously” get object files. When this file is requested, potential user identifying information, such as cookies or HTTP credentials, is not transmitted by the browser to the server.

  1. Add a cross-origin HTTP header
Access-Control-Allow-Origin: *
Copy the code

Cross-domain Resource sharing (CORS) is a set of apis (primarily HTTP Headers) that determine how files should be downloaded and served across sources.

By setting access-Control-allow-Origin: *, the server indicates to the browser that the file can be obtained from any source. Alternatively, you can limit it to known sources that you control:

 Access-Control-Allow-Origin: https://www.example.com
Copy the code

Most community CDNS have the Access-Control-Allow-Origin header set correctly.

$curl - head https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.js | \ grep -i"access-control-allow-origin"

 Access-Control-Allow-Origin: *
Copy the code

instrument.js Line Numbers for Console Log statements

If instrument.js is displayed on the console during debugging, add Sentry to your blackBoxing framework with the following Settings: /@sentry/ so Chrome ignores SDK StackFrames while debugging.

Dealing with Ad-Blockers

When you use our CDN, ad-blocking or script-blocking extensions may prevent our SDK from being properly fetched and initialized. Therefore, any call to the SDKs API will fail and may cause your application to behave abnormally. If this applies to your use case, any of the following solutions can alleviate the problem.

The best way to handle script blocking extensions is to use SDK packages directly through NPM and bundle them with your application. This way, you can be sure that the code will always exist as you want it to.

The second method is to download the SDK from the CDN and host it yourself. This way, the SDK will still be separate from the rest of your code, but you can be sure it won’t be blocked because it comes from the same source as your site.

You can get it easily using curl or any other similar tool:

The curl https://browser.sentry-cdn.com/5.20.1/bundle.min.js - o sentry. Browser. 5.20.1. Min. Js -sCopy the code

The final option is to use Proxy protection to ensure that your code does not break even if you invoke a blocked SDK. All browsers except Internet Explorer support Proxy, although there is no extension for that browser. Also, if Proxy is not installed in your user browser, it will be silently skipped, so you don’t have to worry about it breaking anything.

Place this fragment above the 

if ("Proxy" in window) {
  var handler = {
    get: function(_, key) {
      return new Proxy(function(cb) {
        if (key === "flush" || key === "close") return Promise.resolve();
        if (typeof cb === "function") return cb(window.Sentry);
        return window.Sentry; }, handler); }};window.Sentry = new Proxy({}, handler);
}
Copy the code

If you want to copy and paste code snippets directly, here’s the zoomed out version:

<script>
  if ("Proxy" in window) {
    var n = {
      get: function(o, e) {
        return new Proxy(function(n) {
          return "flush" === e || "close" === e
            ? Promise.resolve()
            : "function"= =typeof n
            ? n(window.Sentry)
            : window.Sentry; }, n); }};window.Sentry = new Proxy({}, n);
  }
</script>
Copy the code

Using a Client directly

To be able to manage multiple Sentry instances without any conflicts with each other, you need to create your own Client. This also helps prevent tracking of any parent application errors if your application is integrated into it. In this example, we use @sentry/browser, but it also works for @Sentry/Node.

import { BrowserClient } from "@sentry/browser";

const client = new BrowserClient({
  dsn: "___PUBLIC_DSN___"}); client.captureException(new Error("example"));
Copy the code

Although the above example works fine, certain methods such as configureScope and withScope are missing on the Client because the Hub is responsible for state management. That’s why it might be easier to create a new Hub and bind its clients to it. The result is the same, but you also get state management.

import { BrowserClient, Hub } from "@sentry/browser";

const client = new BrowserClient({
  dsn: "___PUBLIC_DSN___"});const hub = new Hub(client);

hub.configureScope(function(scope) {
  scope.setTag("a"."b");
});

hub.addBreadcrumb({ message: "crumb 1" });
hub.captureMessage("test");

try {
  a = b;
} catch (e) {
  hub.captureException(e);
}

hub.withScope(function(scope) {
  hub.addBreadcrumb({ message: "crumb 2" });
  hub.captureMessage("test2");
});
Copy the code

Dealing with integrations

Integrations are set up on clients, and if you’re dealing with multiple clients and hubs, you have to make sure you’re doing it right as well. Here is a working example of how to run global integration with multiple clients and multiple hubs.

import * as Sentry from "@sentry/browser";

// Very happy integration that'll prepend and append very happy stick figure to the message
class HappyIntegration {
  constructor() {
    this.name = "HappyIntegration";
  }

  setupOnce() {
    Sentry.addGlobalEventProcessor(event= > {
      const self = Sentry.getCurrentHub().getIntegration(HappyIntegration);
      // Run the integration ONLY when it was installed on the current Hub
      if (self) {
        event.message = `\\o/ ${event.message} \\o/`;
      }
      return event;
    });
  }
}

HappyIntegration.id = "HappyIntegration";

const client1 = new Sentry.BrowserClient({
  dsn: "___PUBLIC_DSN___".integrations: [...Sentry.defaultIntegrations, new HappyIntegration()],
  beforeSend(event) {
    console.log("client 1", event);
    return null; // Returning null does not send the event}});const hub1 = new Sentry.Hub(client1);

const client2 = new Sentry.BrowserClient({
  dsn: "___PUBLIC_DSN___".// Can be a different DSN
  integrations: [...Sentry.defaultIntegrations, new HappyIntegration()],
  beforeSend(event) {
    console.log("client 2", event);
    return null; // Returning null does not send the event}});const hub2 = new Sentry.Hub(client2);

hub1.run(currentHub= > {
  // The hub.run method makes sure that Sentry.getCurrentHub() returns this hub during the callback
  currentHub.captureMessage("a");
  currentHub.configureScope(function(scope) {
    scope.setTag("a"."b");
  });
});

hub2.run(currentHub= > {
  // The hub.run method makes sure that Sentry.getCurrentHub() returns this hub during the callback
  currentHub.captureMessage("x");
  currentHub.configureScope(function(scope) {
    scope.setTag("c"."d");
  });
});
Copy the code

Third Party Promise Libraries

When you include and configure Sentry, our JavaScript SDK automatically attaches global Handlers to Capture uncaught exceptions and unhandled promise rejections. You can disable this default behavior by setting the onunHandledrejection option to false in the GlobalHandlers integration and manually hook to each event handler, Then call sentry. captureException or sentry. captureMessage directly.

If you use third-party libraries to implement Promises, you may also need to manage your configuration. Also, keep in mind that browsers often implement security measures that prevent error reporting when script files from different sources are served.

Supported Browsers

Sentry’s JavaScript SDK supports the following browsers:

Android Firefox Chrome IE iPhone Edge Safari
4.4 latest latest IE 10 iOS12 latest latest
5.0 IE 11 iOS13
6.0
7.1
8.1
9.0
10.0

Support for <= IE 11

Prior to version 5.7.0, our JavaScript SDK needed to provide some polyfills for older browsers such as IE 11 and lower. If you are using it, please upgrade to the latest version or add the script tag below before loading our SDK.

<script src="https://polyfill.io/v3/polyfill.min.js? features=Promise%2CObject.assign%2CString.prototype.includes%2CNumber.isNaN"></script>
Copy the code

We need the following polyfill:

  • Promise
  • Object.assign
  • Number.isNaN
  • String.prototype.includes

Also, remember to define a valid HTML document type at the top of the HTML page to ensure that IE does not go into compatibility mode.

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