系列

  1. Sentry-Go SDK 中文实践指南
  2. 一起来刷 Sentry For Go 官方文档之 Enriching Events
  3. Snuba:Sentry 新的搜索基础设施(基于 ClickHouse 之上)
  4. Sentry 10 K8S 云原生架构探索,Vue App 1 分钟快速接入
  5. Sentry(v20.12.1) K8S云原生架构探索,玩转前/后端监控与事件日志大数据分析,高性能高可用+可扩展可伸缩集群部署
  6. Sentry(v20.12.1) K8S 云原生架构探索,Sentry JavaScript SDK 三种安装加载方式
  7. Sentry(v20.12.1) K8S 云原生架构探索,SENTRY FOR JAVASCRIPT SDK 配置详解
  8. Sentry(v20.12.1) K8S 云原生架构探索, SENTRY FOR JAVASCRIPT 手动捕获事件基本用法
  9. Sentry(v20.12.1) K8S 云原生架构探索,SENTRY FOR JAVASCRIPT Source Maps 详解
  10. Sentry(v20.12.1) K8S 云原生架构探索,SENTRY FOR JAVASCRIPT 故障排除
  11. Sentry(v20.12.1) K8S 云原生架构探索,1分钟上手 JavaScript 性能监控

Automatic Instrumentation

要自动捕获 transactions,必须首先在应用程序中启用跟踪。

@sentry/tracing 包提供了一个 BrowserTracing 集成,以添加 automatic instrumentation 来监视浏览器应用程序的性能。

What Automatic Instrumentation Provides

BrowserTracing 集成为每个页面 load 和 navigation 事件创建一个新 transaction,并为在打开这些 transactions 时发生的每个 XMLHttpRequestfetch 请求创建一个 child span。进一步了解 traces, transactions, and spans。

Enable Automatic Instrumentation

要启用此自动跟踪,请在 SDK 配置选项中包含 BrowserTracing 集成。(请注意,使用 ESM 模块时,主要的 @sentry/* import 必须先于 @sentry/tracing import。)

配置完成后,在 sentry.io 中查看 transactions 时,您将同时看到 pageloadnavigation

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

您可以将许多不同的选项传递给 BrowserTracing 集成(作为 {optionName: value} 形式的对象),但是它具有合理的默认值。有关所有可能的选项,请参见 TypeDocs。

tracingOrigins

tracingOrigins 的默认值是 ['localhost', /^\//]。 JavaScript SDK 将 sentry-trace header 附加到其目标包含列表中的字符串或匹配列表中的正则表达式的所有传出的 XHR/fetch 请求。 如果您的前端向另一个域发出请求,则需要在其中添加它,以将 sentry-trace header 传播到后端服务,这是将 transactions 链接在一起作为单个跟踪的一部分所必需的。tracingOrigins 选项与整个请求 URL 匹配,而不仅仅是域。使用更严格的正则表达式来匹配 URL 的某些部分,可以确保请求不用不必要地附加 sentry-trace header。

例如:

  • 前端应用程序是从 example.com 提供的
  • 后端服务由 api.example.com 提供
  • 前端应用程序对后端进行 API 调用
  • 因此,该选项需要这样配置:new Integrations.BrowserTracing({tracingOrigins: ['api.example.com']})
  • 现在,向 api.example.com 发出的 XHR/fetch 请求将获得附加的 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,
});

您将需要配置您的 Web 服务器 CORS 以允许 sentry-trace header。该配置可能类似于 "Access-Control-Allow-Headers: sentry-trace",但是该配置取决于您的设置。如果您不允许使用 sentry-trace header,则该请求可能会被阻止。

beforeNavigate

对于 pageloadnavigation transactions,BrowserTracing 集成使用浏览器的 window.location API 生成 transaction 名称。要自定义 pageloadnavigation transactions 的名称,您可以向 BrowserTracing 集成提供 beforeNavigate 选项。该选项允许您修改 transaction 名称以使其更通用,例如,名为 GET /users/12312012GET /users/11212012 的 transactions 都可以重命名为 GET /users/:userid,以便他们可以在一起。

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

此函数可用于过滤掉不需要的 spans,例如 XHR 的运行状况检查或类似的检查。 默认情况下,shouldCreateSpanForRequest 已经过滤掉了除了 tracingOrigins 中定义的内容以外的所有内容。

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

要手动捕获 transactions,必须首先在应用程序中启用跟踪。

要手动 instrument 代码的某些区域,可以创建 transactions 来捕获它们。

这对于所有 JavaScript SDK(后端和前端)均有效,并且独立于 ExpressHttpBrowserTracing 集成而工作。

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

例如,如果要为页面上的用户交互创建 transaction,请执行以下操作:

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

这个例子将发送一个 transaction shopCheckout 到 Sentry。 交易将包含一个 task span,该 span 衡量 processAndValidateShoppingCart 花费了多长时间。最后,对 transaction.finish() 的调用将完成transaction 并将其发送给 Sentry。

在为异步操作创建 spans 时,您还可以利用 Promises。但是请记住,必须在调用 transaction.finish() 之前将其 span 包含在事务中。

例如:

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

要将后端和前端 transactions 连接到单个一致的跟踪中,Sentry 使用 trace_id 值,该值在前端和后端之间传播。根据情况,此 ID 可以在请求 header 或 HTML <meta> 标记中传输。以这种方式链接 transactions 使您可以在 Sentry UI 中在它们之间进行导航,因此您可以更好地了解系统的不同部分如何相互影响。您可以在我们的分布式跟踪文档中了解有关此模型的更多信息。

Pageload

在前端和后端都启用跟踪并利用自动前端 instrumentation 功能时,可以将前端上自动生成的 pageload transaction 与后端上的为页面服务提供请求的 transaction 相连接。因为在浏览器中运行的 JavaScript 代码无法读取当前页面的响应 headers,所以 trace_id 必须在响应本身中传输,尤其是在从后端发送的 HTML <head> 中的 <meta> 标签中。

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

name 属性必须是字符串 "sentry-trace"content 属性必须由后端的 Sentry SDK 使用 span.toTraceparent()(或等效项,取决于后端平台)生成。这保证了将为每个请求生成一个新的唯一值。

span 引用是为 HTML 提供服务的 transaction,或其任何 child spans。 它定义了 pageload transaction 的父级。

一旦数据被包含在 <meta> 标签中,我们的 BrowserTracing 集成将自动获取数据并将其链接到在 pageload 时生成的 transaction。(请注意,它不会链接到自动生成的 navigation transactions,即不需要重新加载整个页面的 transaction。每个 transaction 都是后端不同请求 transaction 的结果,因此应具有唯一的 trace_id。)

Navigation and Other XHR Requests

加载页面后,它发出的任何请求(以及后端产生的任何请求)都通过请求 header 链接。

就像上面讨论的 <meta> 标签一样,标题的名称是 sentry-trace,其值是通过调用 span.toTraceparent()(或等效的)来获得的,其中 span 是相关 transaction 或其任何子项。

Sentry 的所有与跟踪相关的集成(BrowserTracingHttpExpress)都会针对它们生成的所有 transactions 和 spans 自动生成或拾取并传播此 header。在手动创建 transaction 或 span 的任何情况下,您都可以自己附加和读取 header,这样做很有意义。

Control Data Truncation

当前,每个标签的最大字符数限制为200个字符。超过200个字符限制的标签将被截断,丢失潜在的重要信息。要保留此数据,您可以将数据拆分为多个标签。

例如,一个200多个字符标记的请求:

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

上面200个字符以上的请求将被截断为:

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

相反,使用 span.set_tagspan.set_data 会使用结构化元数据保留此查询的详细信息。这可以通过 baseUrlendpointparameters 完成:

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 捕获 transactions 时,将为它们分配一个 transaction 名称。该名称通常由 Sentry SDK 根据您使用的框架集成自动生成。如果您无法利用自动 transaction 生成(或想要自定义 transaction 名称的生成方式),则可以使用,在使用配置初始化 SDK 时注册的全局事件处理器。

在 node.js 应用程序中执行此操作的示例:

import { addGlobalEventProcessor } from "@sentry/node";
addGlobalEventProcessor(event => {
// if event is a transaction event
if (event.type === "transaction") {
event.transaction = sanitizeTransactionName(event.transaction);
}
return event;
});

对于使用 BrowserTracing 集成的浏览器 JavaScript 应用程序,beforeNavigate 选项可用于根据 URL 更好地将 navigation/pageload transactions 分组在一起。

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

如果要将 Spans 附加到已在进行中的 transaction 中,例如在对 transaction 进行分组时,可以使用 Sentry.getCurrentHub().getScope().getTransaction()。当 scope 中有正在运行的 transaction 时,此函数将返回一个 Transaction 对象,否则它将返回 undefined。如果您使用的是 BrowserTracing 集成,则默认情况下,我们会将 transaction 附加到 Scope,因此您可以执行以下操作:

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

中文文档陆续同步到:

我是为少。
微信:uuhells123。
公众号:黑客下午茶。
谢谢点赞支持!

Sentry(v20.12.1) K8S 云原生架构探索,JavaScript 性能监控之管理 Transactions的更多相关文章

  1. Docker Data Center系列(一)- 快速搭建云原生架构的实践环境

    本系列文章演示如何快速搭建一个简单的云原生架构的实践环境. 基于这个基础架构,可以持续部署微服务架构的应用栈,演练敏捷开发过程,提升DevOps实践能力. 1 整体规划 1.1 拓扑架构 1.2 基础 ...

  2. .NET 云原生架构师训练营(模块一 架构师与云原生)--学习笔记

    目录 什么是软件架构 软件架构的基本思路 单体向分布式演进.云原生.技术中台 1.1 什么是软件架构 1.1.1 什么是架构? Software architecture = {Elements, F ...

  3. 新书《OpenShift云原生架构:原理与实践》第一章第三节:企业级PaaS平台OpenShift

    近十年来,信息技术领域在经历一场技术大变革,这场变革正将我们由传统IT架构及其所支撑的臃肿应用系统时代,迁移至云原生架构及其所支撑的敏捷应用系统时代.在这场变革中,新技术的出现.更新和淘汰之迅速,以及 ...

  4. Jmeter工具使用-分布式架构和服务器性能监控解决方案

    在对项目做大并发性能测试时,常会碰到并发数比较大(比如需要支持10000并发),单台电脑的配置(CPU和内存)可能无法支持,这时可以使用Jmeter提供的分布式测试的功能来搭建分布式并发环境. 一.J ...

  5. 12-Factor与云原生Part2

    12-Factor与云原生Part2 12-Factor 为构建如下的 SaaS 应用提供了方法论: 使用声明式格式来搭建自动化,从而使新的开发者花费最少的学习成本加入这个项目 和底层操作系统保持简洁 ...

  6. 云栖干货回顾 | 云原生数据库POLARDB专场“硬核”解析

    POLARDB是阿里巴巴自主研发的云原生关系型数据库,目前兼容三种数据库引擎:MySQL.PostgreSQL.Oracle.POLARDB的计算能力最高可扩展至1000核以上,存储容量可达100TB ...

  7. 《Kubernetes与云原生应用》系列之容器设计模式

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

  8. Ambassador,云原生应用的“门神”

    目前,行业内基于云原生思想的开源项目,重点在于管理.控制微服务以及微服务架构下服务之间的通信问题.它们有效的解决了“服务异构化”.“动态化”.“多协议”场景所带来的east/west流量的管控问题,而 ...

  9. 云原生GIS技术

    云原生架构概述 - DockOne.io  http://dockone.io/article/2991 云原生GIS技术全解读 - SuperMap技术控 - CSDN博客  https://blo ...

  10. 如何将云原生工作负载映射到 Kubernetes 中的控制器

    作者:Janakiram MSV 译者:殷龙飞 原文地址:https://thenewstack.io/how-to-map-cloud-native-workloads-to-kubernetes- ...

随机推荐

  1. Windows 常用运行库下载 (DirectX、VC++、.Net Framework等)

    经常听到有朋友抱怨他的电脑运行软件或者游戏时提示缺少什么 d3dx9_xx.dll 或 msvcp71.dll.msvcr71.dll又或者是 .Net Framework 初始化之类的错误而无法正常 ...

  2. NFS网络共享服务部署

    10.3 NFS服务端部署环境准备 10.3.1 NFS服务部署服务器准备 服务器系统 角色 IP Centos6.7 x86_64 NFS服务器端(NFS-server) 192.168.1.14 ...

  3. ACM/ICPC 之 DP-基因相似度(POJ1080-ZOJ1027)

    题意:两端基因片段,各有明确的碱基序列,现有一个碱基匹配的相似度数组,设计程序使得该相似度最大. //POJ1080-ZOJ1027 //题解:将s1碱基和s2碱基看做等长,添加一个碱基为'-',即每 ...

  4. Http Status 参考

    http://tool.oschina.net/commons?type=5 状态码 含义 100 客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户 ...

  5. CSS3那些不为人知的高级属性

    尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius.box-shadow或者transform等.它们有良好的文档 ...

  6. 【转】Hbase shell 常用命令

    不定时更新常用好用命令. --------------------------------------------------------------------------------------- ...

  7. uestc poj2559 秋实大哥去打工

    //感觉有必要把这题放博客上待复习 刚刚写解题报告的时候发现自己又不会做这题了 //我不会告诉你这题绝对是命题人抄poj2559 这题使用一个单调递增的栈,栈内存储的元素有两个值,一个高度,一个长度. ...

  8. CSU 1506(最小费用最大流)

    传送门:Double Shortest Paths 题意:有两个人:给出路径之间第一个人走所需要的费用和第二个人走所需要的费用(在第一个人所需的 费用上再加上第二次的费用):求两个人一共所需要的最小费 ...

  9. 将JSON对象转化为数组对象

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

  10. mysql:ip地址连接

    2. 为用户授权 授权格式:grant 权限 on 数据库.* to 用户名@登录主机 identified by "密码"; 2.1登录MYSQL(有ROOT权限),这里以ROO ...