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
  10. Sentry(V20.12.1) K8S cloud native architecture exploration, Sentry FOR JAVASCRIPT troubleshooting
  11. Sentry(V20.12.1) K8S Cloud native architecture exploration, 1 minute hands-on JavaScript performance monitoring

Automatic Instrumentation

To automatically capture transactions, tracing must first be enabled in your application.

The @Sentry/Tracing package provides a BrowserTracing integration to add automatic Instrumentation to monitor the performance of browser applications.

What Automatic Instrumentation Provides

The BrowserTracing integration creates a new transaction for each page load and Navigation event, And create a Child span for each XMLHttpRequest or FETCH request that occurs when opening these transactions. Explore traces, Transactions, and Spans.

Enable Automatic Instrumentation

To enable this automatic tracing, include the BrowserTracing integration in the SDK configuration options. (Note that when using ESM modules, the main @sentry/* import must precede the @sentry/tracing import.)

When you view transactions in sentry. IO after configuration, you will see both Pageload and Navigation.

ESM

// If you're using one of our integration packages, like `@sentry/react` or `@sentry/angular`,
// substitute its name for `@sentry/browser` here
import * as Sentry from "@sentry/browser";
import { Integrations as TracingIntegrations } from "@sentry/tracing"; // Must import second

Sentry.init({
  dsn: "https://[email protected]/0".integrations: [
    new Integrations.BrowserTracing({
      tracingOrigins: ["localhost"."my-site-url.com"./ ^ / / /].// ... other options}),].// We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0});Copy the code

CDN

Sentry.init({
  dsn: "https://[email protected]/0".integrations: [
    new Sentry.Integrations.BrowserTracing({
      tracingOrigins: ["localhost"."my-site-url.com"./ ^ / / /].// ... other options}),].// We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0});Copy the code

Configuration Options

You can pass many different options to the BrowserTracing integration (as an object of the form {optionName: value}), but it has reasonable defaults. See TypeDocs for all possible options.

  • Getsentry. Making. IO/sentry – Java…

tracingOrigins

The default value tracingOrigins is [‘localhost’, /^\//]. The JavaScript SDK appends the Sentry-trace header to all outgoing XHR/ FETCH requests that its target contains strings in a list or match regular expressions in a list. If your front end makes a request to another domain, it needs to be added there to propagate the Sentry-Trace header to the back-end service, which is necessary to link transactions together as part of a single trace. The tracingOrigins option matches the entire request URL, not just the domain. Using stricter regular expressions to match certain parts of the URL ensures that requests do not unnecessarily attach sentry-trace headers.

Such as:

  • Front-end applications are fromexample.comTo provide the
  • Back-end services are provided byapi.example.comprovide
  • The front-end application makes API calls to the back-end
  • Therefore, this option needs to be configured as follows:new Integrations.BrowserTracing({tracingOrigins: ['api.example.com']})
  • Now, toapi.example.comThe XHR/ FETCH request issued will get the additionalsentry-trace header
Sentry.init({
  dsn: "https://[email protected]/0".integrations: [
    new Integrations.BrowserTracing({
      tracingOrigins: ["localhost"."my-site-url.com"],}),],// We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0});Copy the code

You will need to configure your Web server CORS to allow sentry-trace headers. This configuration may be similar to “access-Control-allow-headers: sentry-trace”, but it depends on your Settings. If you do not allow the sentry-trace header, the request may be blocked.

beforeNavigate

For Pageload and Navigation Transactions, the BrowserTracing integration uses the browser’s Window. location API to generate the transaction name. To customize the names of Pageload and Navigation Transactions, you can provide the beforeNavigate option to the BrowserTracing integration. This option allows you to change the transaction name to make it more generic, for example, transactions named GET/Users /12312012 and GET/Users /11212012 can be renamed to GET/Users /: userID, So that they can be together.

import * as Sentry from "@sentry/browser";
import { Integrations } from "@sentry/tracing";

Sentry.init({
  dsn: "https://[email protected]/0".integrations: [
    new Integrations.BrowserTracing({
      beforeNavigate: context= > {
        return {
          ...context,
          // You could use your UI's routing library to find the matching
          // route template here. We don't have one right now, so do some basic
          // parameter replacements.
          name: location.pathname
            .replace(/\d+/g."<digits>")
            .replace(/[a-f0-9]{32}/g."<hash>"),}; }}),].// We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0});Copy the code

shouldCreateSpanForRequest

This function can be used to filter out unwanted SPANS, such as XHR health checks or similar checks. By default, shouldCreateSpanForRequest has filtered out all except the content of the defined tracingOrigins content.

import * as Sentry from "@sentry/browser";
import { Integrations } from "@sentry/tracing";
Sentry.init({
  dsn: "https://[email protected]/0".integrations: [
    new Integrations.BrowserTracing({
      shouldCreateSpanForRequest: url= > {
        // Do not create spans for outgoing requests to a `/health/` endpoint
        return! url.match(/\/health\/? $/); }}),].// We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0});Copy the code

Manual Instrumentation

To capture transactions manually, you must first enable tracing in your application.

To manually instrument certain areas of code, you can create transactions to capture them.

This works with all JavaScript SDKS (back end and front end) and works independently of Express, Http, and BrowserTracing integrations.

const transaction = Sentry.startTransaction({ name: "test-transaction" });
const span = transaction.startChild({ op: "functionX" }); // This function returns a Span
// functionCallX
span.finish(); // Remember that only finished spans will be sent with the transaction
transaction.finish(); // Finishing the transaction will send it to Sentry
Copy the code

For example, if you want to create a transaction for user interactions on a page, do the following:

// Let's say this function is invoked when a user clicks on the checkout button of your shop
shopCheckout() {
  // This will create a new Transaction for you
  const transaction = Sentry.startTransaction('shopCheckout');
  // set the transaction on the scope so it picks up any errors
  hub.configureScope(scope= > scope.setSpan(transaction));

  // Assume this function makes an xhr/fetch call
  const result = validateShoppingCartOnServer();

  const span = transaction.startChild({
    data: {
      result
    },
    op: 'task'.description: `processing shopping cart result`}); processAndValidateShoppingCart(result); span.finish(); transaction.finish(); }Copy the code

This example will send a Transaction shopCheckout to Sentry. Trading will contain a task span, the span measure processAndValidateShoppingCart spent a long time. Finally, a call to transaction.finish() completes the transaction and sends it to Sentry.

You can also take advantage of Promises when you create SPANS for asynchronous operations. Remember, however, that its span must be included in the transaction before calling transaction.Finish ().

Such as:

function processItem(item, transaction) {
  const span = transaction.startChild({
    op: "http".description: `GET /items/:item-id`});return new Promise((resolve, reject) = > {
    http.get(`/items/${item.id}`.response= > {
      response.on("data".() = > {});
      response.on("end".() = > {
        span.setTag("http.status_code", response.statusCode);
        span.setData("http.foobarsessionid", getFoobarSessionid(response));
        span.finish();
        resolve(response);
      });
    });
  });
}
Copy the code

Connect Backend and Frontend Transactions

To connect back-end and front-end transactions into a single consistent trace, Sentry uses the trace_ID value, which is propagated between the front end and back end. Depending on the case, this ID can be transmitted in a request header or an HTML
tag. Linking transactions in this way allows you to navigate between them in the Sentry UI, so you can better understand how different parts of the system interact. You can learn more about this model in our distributed trace documentation.

Pageload

When tracing is enabled on both the front end and the back end and automatic front-end instrumentation is used, the pageload transaction automatically generated on the front end can be connected to the transaction that provides requests for page services on the back end. Because JavaScript code running in the browser cannot read the response headers for the current page, the trace_id must be transmitted in the response itself, especially in the
tag in the HTML sent from the back end.

<html>
  <head>
    <meta name="sentry-trace" content="{{ span.toTraceparent() }}" />
    <! -... -->
  </head>
</html>
Copy the code

The name attribute must be the string “sentry-trace”, and the Content attribute must be generated by the back-end Sentry SDK using sp.totraceparent () (or its equivalent, depending on the back-end platform). This ensures that a new unique value will be generated for each request.

Span references are TRANSACTIONS that serve HTML, or any child SPANS of them. It defines the parent of a Pageload transaction.

Once the data is included in the < Meta > tag, our BrowserTracing integration will automatically take the data and link it to the transaction generated at Pageload. (Note that it does not link to automatically generated Navigation transactions, i.e. transactions that do not need to reload the entire page. Each transaction is the result of a different request transaction on the back end and therefore should have a unique trace_ID.)

Navigation and Other XHR Requests

After the page loads, any requests it makes (and any requests made by the back end) are linked through the request header.

As with the
tag discussed above, the title name is sentry-trace, and its value is obtained by calling sp.totraceparent () (or equivalent), where span is the related transaction or any of its subitems.

All of Sentry’s tracer-related integrations (BrowserTracing, Http, and Express) automatically generate or pick up and spread this header over all transactions and SPANS they generate. In any case where a transaction or span is created manually, it makes sense that you can attach and read the headers yourself.

Control Data Truncation

Currently, the maximum number of characters per label is limited to 200. Tags that exceed the 200 character limit will be truncated, losing potentially important information. To preserve this data, you can split the data into multiple labels.

For example, a request with more than 200 character tags:

https://empowerplant.io/api/0/projects/ep/setup_form/?user_id=314159265358979323846264338327&tracking_id=EasyAsABC123OrS impleAsDoReMi&product_name=PlantToHumanTranslator&product_id=161803398874989484820458683436563811772030917980576

Requests above 200 characters long will be truncated to:

https://empowerplant.io/api/0/projects/ep/setup_form/?user_id=314159265358979323846264338327&tracking_id=EasyAsABC123OrS impleAsDoReMi&product_name=PlantToHumanTranslator&product_id=1618033988749894848

In contrast, using sp.set_tag and SP.set_data preserves the details of this query using structured metadata. This can be done with baseUrl, endpoint, and parameters:

const baseUrl = "https://empowerplant.io";
const endpoint = "/api/0/projects/ep/setup_form";
const parameters = {
  user_id: 314159265358979323846264338327.tracking_id: "EasyAsABC123OrSimpleAsDoReMi".product_name: PlantToHumanTranslator,
  product_id: 161803398874989484820458683436563811772030917980576};const span = transaction.startChild({
  op: "request".description: "setup form"}); span.setTag("baseUrl", baseUrl);
span.setTag("endpoint", endpoint);
span.setData("parameters", parameters);
// you may also find some parameters to be valuable as tags
span.setData("user_id", parameters.user_id);
http.get(`${base_url}/${endpoint}/ `, (data = parameters));
Copy the code

Group Transactions

When Sentry captures transactions, they are assigned a transaction name. This name is usually automatically generated by the Sentry SDK based on the framework integration you are using. If you are unable to take advantage of automatic Transaction generation (or want to customize the generation of transaction names), you can use the global event handler registered when using the configuration to initialize the SDK.

An example of doing this in a Node.js application:

import { addGlobalEventProcessor } from "@sentry/node";

addGlobalEventProcessor(event= > {
  // if event is a transaction event
  if (event.type === "transaction") {
    event.transaction = sanitizeTransactionName(event.transaction);
  }
  return event;
});
Copy the code

For browser JavaScript applications integrated with BrowserTracing, the beforeNavigate option can be used to better group navigation/ Pageload Transactions together by URL.

import * as Sentry from "@sentry/browser";
import { Integrations } from "@sentry/tracing";

Sentry.init({
  // ...
  integrations: [
    new Integrations.BrowserTracing({
      beforeNavigate: context= > {
        return {
          ...context,
          // You could use your UI's routing library to find the matching
          // route template here. We don't have one right now, so do some basic
          // parameter replacements.
          name: location.pathname
            .replace(/\d+/g."<digits>")
            .replace(/[a-f0-9]{32}/g."<hash>"),}; }}),]});Copy the code

Retrieve an Active Transaction

You can use sentry.getCurrenthub ().getScope().getTransaction() to attach Spans to transactions you’re already in progress, for example, when you’re grouping transactions. This function returns a Transaction object when there is a running transaction in the scope, otherwise it returns undefined. If you are using the BrowserTracing integration, we attach transaction to Scope by default, so you can do the following:

function myJsFunction() {
  const transaction = Sentry.getCurrentHub()
    .getScope()
    .getTransaction();
  if (transaction) {
    let span = transaction.startChild({
      op: "encode".description: "parseAvatarImages"});// Do somethingspan.finish(); }}Copy the code

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