Sentry在K8S云原生环境中的JavaScript事务管理
自动化监控配置
要自动捕获事务，需在应用中启用追踪功能。通过@sentry/tracing提供的BrowserTracing集成，可实现对浏览器应用性能的自动化监控。
自动化监控功能
BrowserTracing会为每个页面加载和导航事件创建新事务，并为相关的XMLHttpRequest或fetch请求创建子Span。
启用自动化监控
// ESM示例
import * as Sentry from "@sentry/browser";
import { Integrations as TraceIntegrators } from "@sentry/tracing";
Sentry.initialize({
dsn: "https://yourPublicKey@ingest.sentry.io/projectId",
integrations: [
new TraceIntegrators.BrowserTracing({
tracingSources: ["api.yourdomain.com", /^\/v2/],
}),
],
traceSamplingRatio: 1.0
});
// CDN示例
Sentry.initialize({
dsn: "https://yourPublicKey@ingest.sentry.io/projectId",
integrations: [
new Sentry.Integrations.BrowserTracing({
tracingSources: ["cdn.yourdomain.net"]
})
],
traceSamplingRatio: 0.8
});关键配置项
tracingSources：默认值为['localhost', /^\//]。需将后端域名加入列表以实现跨域追踪：
tracingSources: ["backend-api.com"]路由命名：自定义事务名称实现泛化：
new TraceIntegrators.BrowserTracing({
preRouteNaming: ctx => ({
...ctx,
name: location.pathname
.replace(/\d+/g, "<id>")
})
})请求过滤：排除特定请求：
new TraceIntegrators.BrowserTracing({
requestFilter: url => !url.includes('/healthcheck')
})手动监控实现
手动创建事务监控代码执行：
// 基础示例
const mainTx = Sentry.startTransaction({ name: "order-process" });
const childSpan = mainTx.startChild({ operation: "inventory-check" });
// 执行操作...
childSpan.finish();
mainTx.finish();
// 用户交互监控示例
function processPayment() {
const paymentTx = Sentry.startTransaction('payment-flow');
Sentry.getCurrentHub().configureScope(scope =>
scope.setSpan(paymentTx)
);
const validationSpan = paymentTx.startChild({
operation: "creditcard-validation"
});
verifyCreditCard();
validationSpan.finish();
paymentTx.finish();
}
// 异步操作监控
async function fetchUserData(txContext) {
const dataSpan = txContext.startChild({ operation: "http" });
try {
return await axios.get('/user/data');
} finally {
dataSpan.finish();
}
}前后端事务关联
通过trace_id实现跨端事务关联：
页面加载事务关联
<!-- 后端模板注入 -->
<html>
<head>
<meta name="sentry-trace" content="{{ spanTraceParent }}" />
</head>
</html>API请求关联
通过sentry-trace请求头在前后端间传递追踪信息。
数据截断处理
超过200字符的标签会被截断，建议使用结构化数据：
const querySpan = transaction.startChild({ operation: "db-query" });
querySpan.setTag("dbTable", "users");
querySpan.setData("queryParams", {
userId: "u_1234567890",
filter: "active=true"
});事务分组策略
自定义事务名称实现分组：
Sentry.addGlobalEventProcessor(event => {
if (event.type === "transaction") {
event.transaction = event.transaction
.replace(/\b\d{5,}\b/g, "ID_MASKED");
}
return event;
});获取活动事务
function trackCustomOperation() {
const activeTx = Sentry.getCurrentHub()
.getScope()
.getTransaction();
if (activeTx) {
const customSpan = activeTx.startChild({
operation: "image-processing"
});
// 执行操作
customSpan.finish();
}
}