series

  1. Sentry-Go SDK Chinese Practice Guide
  2. Let's brush together Sentry For Go Official document Enriching Events
  3. Snuba:Sentry New search infrastructure ( be based on ClickHouse above )
  4. Sentry 10 K8S Cloud native architecture exploration ,Vue App 1 Minutes fast access
  5. Sentry(v20.12.1) K8S Cloud native architecture exploration , Before you play / Back end monitoring and event log big data analysis , High performance and high availability + 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 Basic usage of manually capturing Events
  9. Sentry(v20.12.1) K8S Cloud native architecture exploration ,SENTRY FOR JAVASCRIPT Source Maps Detailed explanation
  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 Minutes to go JavaScript Performance monitoring

Automatic Instrumentation

To automatically capture transactions, You must first enable tracing in your application .

@sentry/tracing The package provides a BrowserTracing Integrate , To add automatic instrumentation To monitor the performance of browser applications .

What Automatic Instrumentation Provides

BrowserTracing Integrated for each page load and navigation Event creates a new transaction, And for opening these transactions Every time that happens XMLHttpRequest or fetch Request to create a child span. Learn more traces, transactions, and spans.

Enable Automatic Instrumentation

To enable this autotracking , Please be there. SDK Configuration options include BrowserTracing Integrate .( Please note that , Use ESM When the module , The main @sentry/* import Must precede @sentry/tracing import.)

When the configuration is complete , stay sentry.io View in transactions when , You will see at the same time 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://examplePublicKey@o0.ingest.sentry.io/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,
});

CDN

Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/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,
});

Configuration Options

You can pass many different options to BrowserTracing Integrate ( As {optionName: value} The object of form ), But it has a reasonable default value . For all the possible options , Please see the TypeDocs.

tracingOrigins

tracingOrigins The default value of is ['localhost', /^\//]. JavaScript SDK take sentry-trace header All outgoing... Attached to a string in its target containing list or to a regular expression matching the list XHR/fetch request . If your front end makes a request to another domain , You need to add it , In order to sentry-trace header Spread to back end services , This is going to be transactions Linking together as part of a single trace is required .tracingOrigins Options and the entire request URL matching , Not just domains . Use more rigorous regular expressions to match URL Some parts of , You can ensure that the request is not attached unnecessarily sentry-trace header.

for example :

  • The front end application is from example.com Provided
  • Back end services are provided by api.example.com Provide
  • The front-end application performs API call
  • therefore , This option needs to be configured like this :new Integrations.BrowserTracing({tracingOrigins: ['api.example.com']})
  • Now? , towards api.example.com Emitted XHR/fetch The request will get additional sentry-trace header
Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/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,
});

You will need to configure your Web The server CORS With permission sentry-trace header. This configuration may be similar to "Access-Control-Allow-Headers: sentry-trace", But the configuration depends on your settings . If you are not allowed to use sentry-trace header, The request may be blocked .

beforeNavigate

about pageload and navigation transactions,BrowserTracing Integrated use of browser window.location API Generate transaction name . To customize pageload and navigation transactions The name of , You can go to BrowserTracing Integration provides beforeNavigate Options . This option allows you to modify transaction Name to make it more generic , for example , be known as GET /users/12312012 and GET /users/11212012 Of transactions 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://examplePublicKey@o0.ingest.sentry.io/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,
});

shouldCreateSpanForRequest

This function can be used to filter out unwanted spans, for example XHR Health check or similar check . By default ,shouldCreateSpanForRequest It's filtered out except tracingOrigins All content other than that defined in .

import * as Sentry from "@sentry/browser";
import { Integrations } from "@sentry/tracing";
Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/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,
});

Manual Instrumentation

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

To manually instrument Some areas of the code , You can create transactions To capture them .

This is for all JavaScript SDK( Back end and front end ) All effective , And independent of Express,Http and BrowserTracing Integrated and working .

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

for example , If you want to create for user interaction on the page transaction, 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();
}

This example will send a transaction shopCheckout To Sentry. The deal will contain a task span, The span To measure processAndValidateShoppingCart How long did it take . Last , Yes transaction.finish() Will complete transaction And send it to Sentry.

Creating... For asynchronous operations spans when , You can also use Promises. But remember , Must be called on transaction.finish() Before it was span Included in transaction .

for example :

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);
});
});
});
}

Connect Backend and Frontend Transactions

To combine the back end with the front end transactions Connect to a single consistent trace ,Sentry Use trace_id value , The value propagates between the front end and the back end . According to the circumstances , this ID You can ask for header or HTML <meta> Mark the transmission of . Link in this way transactions So that you can go to Sentry UI Navigate between them in the , So you can better understand how different parts of the system interact with each other . You can learn more about this model in our distributed tracking document .

Pageload

Enable tracing on both the front end and the back end and take advantage of the automatic front end instrumentation When the function , Can be automatically generated on the front-end pageload transaction It's the same as the one on the back end that provides the request for the page service transaction Connect . Because it runs in the browser JavaScript The code cannot read the response of the current page headers, therefore trace_id Must be transmitted in the response itself , Especially when it's sent from the back end HTML <head> Medium <meta> In the label .

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

name Property must be a string "sentry-trace",content Property must be created by the back end of Sentry SDK Use span.toTraceparent()( Or equivalent , It depends on the back end platform ) Generate . This guarantees that a new unique value will be generated for each request .

span Reference is for HTML serviceable transaction, Or any of them child spans. It defines the pageload transaction The father of .

Once the data is contained in <meta> In the label , our BrowserTracing The integration will automatically capture the data and link it to pageload Generated on transaction.( Please note that , It doesn't link to automatically generated navigation transactions, That is, there is no need to reload the entire page transaction. Every transaction It's all back-end requests transaction Result , So there should be a unique trace_id.)

Navigation and Other XHR Requests

After loading the page , Any request it makes ( And any requests from the back end ) All by request header link .

As discussed above <meta> The label is the same , The title is sentry-trace, Its value is determined by calling span.toTraceparent()( Or equivalent ) To get , among span It's related transaction Or any of its children .

Sentry All the tracking related integration of (BrowserTracing,Http and Express) Will be generated for all of them transactions and spans Automatically generate or pick up and propagate this header. Create... Manually transaction or span In any case , You can attach and read it yourself header, It makes sense .

Control Data Truncation

At present , The maximum number of characters per label is limited to 200 Characters . exceed 200 Tags with a character limit will be truncated , Missing potentially important information . To keep this data , You can split data into multiple tags .

for example , One 200 Multiple character mark request :

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

above 200 Requests with more than characters will be truncated to :

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

contrary , Use span.set_tag and span.set_data Structured metadata is used to keep the details of this query . This can be done by baseUrl,endpoint and parameters complete :

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));

Group Transactions

Sentry Capture transactions when , They will be assigned a transaction name . The name is usually given by Sentry SDK Automatically generated based on the framework integration you use . If you can't take advantage of automatic transaction Generate ( Or want to customize transaction How names are generated ), You can use , Using configuration initialization SDK The global event handler registered when .

stay node.js An example of doing this in an 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;
});

For the use of BrowserTracing Integrated browser JavaScript Applications ,beforeNavigate The option can be used according to URL Better put navigation/pageload transactions Group together .

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>"),
};
},
}),
],
});

Retrieve an Active Transaction

If you want to Spans Attach to... Already in progress transaction in , For example, in the right transaction When grouping , have access to Sentry.getCurrentHub().getScope().getTransaction(). When scope There are running transaction when , This function will return a Transaction object , Otherwise it will return undefined. If you are using BrowserTracing Integrate , By default , We will transaction Attach to Scope, 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 something
span.finish();
}
}

Chinese documents are synchronized to :

 I'm for less .
WeChat :uuhells123.
official account : Hacker afternoon tea .
Thank you for your support !

Sentry(v20.12.1) K8S Cloud native architecture exploration ,JavaScript Management of performance monitoring Transactions More articles about

  1. Docker Data Center series ( One )- Quickly build the practice environment of cloud native architecture

    This series of articles demonstrates how to quickly build a simple cloud native architecture practice environment . Based on this infrastructure , The application stack of microservice architecture can be continuously deployed , Practice agile development process , promote DevOps Practical ability . 1 The overall planning 1.1 topology 1.2 Basics ...

  2. .NET Cloud native architect training camp ( Module one Architects and cloud natives )-- Learning notes

    Catalog What is software architecture The basic idea of software architecture Monomer evolves to distributed . Cloud native . Technology Center 1.1 What is software architecture 1.1.1 What is architecture ? Software architecture = {Elements, F ...

  3. new book 《OpenShift Cloud native architecture : Principle and practice 》 Chapter one, section three : Enterprise class PaaS platform OpenShift

    In the past ten years , The field of information technology is undergoing a technological revolution , This change is transforming us from tradition IT Architecture and the era of bloated application system supported by it , Move to the era of cloud native architecture and its supporting agile application system . In this revolution , The emergence of new technology . The speed of renewal and elimination , as well as ...

  4. Jmeter Tool use - Distributed architecture and server performance monitoring solutions

    When doing large concurrent performance testing on a project , We often encounter a large number of concurrent ( For example, you need support 10000 Concurrent ), The configuration of a single computer (CPU And memory ) May not be able to support , You can use Jmeter Provide the function of distributed testing to build a distributed concurrent environment . One .J ...

  5. 12-Factor With cloud native Part2

    12-Factor With cloud native Part2 12-Factor To build the following SaaS Application provides methodology : Use declarative format to build automation , So that new developers spend the least learning cost to join the project Keep it simple with the underlying operating system ...

  6. Review of yunqi dry goods | Cloud native database POLARDB Special field “ hardcore ” analysis

    POLARDB It is a cloud native relational database independently developed by Alibaba , Currently compatible with three database engines :MySQL.PostgreSQL.Oracle.POLARDB The computing power can be expanded to 1000 Supranuclear , Storage capacity up to 100TB ...

  7. 《Kubernetes And cloud native applications 》 Container design pattern of series

    http://www.infoq.com/cn/articles/kubernetes-and-cloud-native-app-container-design-pattern <Kubern ...

  8. Ambassador, Cloud native applications “ goalkeeper ”

    at present , Open source projects in the industry based on the original idea of cloud , It's about management . Control micro service and communication between services under micro service architecture . They effectively solve “ Service isomerization ”.“ Dynamic ”.“ multi-protocol ” What the scene brings east/west Traffic control issues , and ...

  9. Cloud native GIS technology

    Cloud native Architecture Overview - DockOne.io  http://dockone.io/article/2991 Cloud native GIS The whole interpretation of Technology - SuperMap Technology control - CSDN Blog   https://blo ...

  10. How to map cloud native workload to Kubernetes Controller in

    author :Janakiram MSV translator : Yin Longfei Original address :https://thenewstack.io/how-to-map-cloud-native-workloads-to-kubernetes- ...

Random recommendation

  1. Windows Common runtime downloads (DirectX、VC++、.Net Framework etc. )

    Often hear a friend complain about his computer running software or games when prompted what is missing d3dx9_xx.dll or msvcp71.dll.msvcr71.dll Or is .Net Framework Initialization and so on ...

  2. NFS Network sharing service deployment

    10.3 NFS Server deployment environment preparation 10.3.1 NFS Service deployment server is ready Server system role IP Centos6.7 x86_64 NFS Server side (NFS-server) 192.168.1.14 ...

  3. ACM/ICPC And DP- Gene similarity (POJ1080-ZOJ1027)

    The question : Gene fragments at both ends , Each has a specific base sequence , There is a similarity array for base matching , The program is designed to maximize the similarity . //POJ1080-ZOJ1027 // Answer key : take s1 Bases and s2 Bases are considered equal length , Add a base to '-', That is, every ...

  4. Http Status Reference resources

    http://tool.oschina.net/commons?type=5 Status code meaning 100 Client should continue to send request . This temporary response is used to inform the client that some of its requests have been received by the server , And has not been rejected . Customer ...

  5. CSS3 Those unknown advanced attributes

    Although modern browsers already support many CSS3 attribute , But most designers and developers still seem to focus on some very “ Main stream ” Properties of , Such as border-radius.box-shadow perhaps transform etc. . They have good documentation ...

  6. 【 turn 】Hbase shell Common commands

    Update frequently used and easy-to-use commands from time to time . --------------------------------------------------------------------------------------- ...

  7. uestc poj2559 Brother Qiushi goes to work

    // I feel it necessary to put this question on my blog for review When I just wrote the problem-solving report, I found that I couldn't do it again // I'm not going to tell you that this question is definitely written by people poj2559 This problem uses a monotonically increasing stack , The elements stored in the stack have two values , A height , One length . ...

  8. CSU 1506( Minimum cost and maximum flow )

    Portal :Double Shortest Paths The question : There are two people : Give the cost of the first person walking and the cost of the second person walking between the paths ( In the first person needed Plus the cost of the second time ): Ask for the minimum cost for two people ...

  9. take JSON Object into an array object

    package web.helper; import java.util.ArrayList; import net.sf.json.JSONArray; import web.model.Abstr ...

  10. mysql:ip Address connection

    2. Authorize users Form of Authorization :grant jurisdiction on database .* to user name @ Log on to the host identified by " password "; 2.1 Sign in MYSQL( Yes ROOT jurisdiction ), Here we use ROO ...