浏览器
了解如何将 OpenTelemetry 添加到您的浏览器应用程序
警告
浏览器客户端仪器化是实验性的，并且大部分未指定。如果您有兴趣提供帮助，请联系客户端仪器化 SIG。
虽然本指南使用了下面介绍的示例应用程序，但为您自己的应用程序添加遥测的步骤应该类似。
先决条件
请确保您已在本地安装以下软件
- Node.js
- 如果您将使用 TypeScript，请安装 TypeScript。
示例应用程序
这是一个非常简单的指南，如果您想看更复杂的示例，请前往 examples/opentelemetry-web。
将以下文件复制到一个空目录中，并将其命名为 index.html。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Document Load Instrumentation Example</title>
<base href="/" />
<!--
https://www.w3.org/TR/trace-context/
Set the `traceparent` in the server's HTML template code. It should be
dynamically generated server side to have the server's request trace ID,
a parent span ID that was set on the server's request span, and the trace
flags to indicate the server's sampling decision
(01 = sampled, 00 = not sampled).
'{version}-{traceId}-{spanId}-{sampleDecision}'
-->
<meta
name="traceparent"
content="00-ab42124a3c573678d4d8b21ba52df3bf-d21f7bc17caa5aba-01"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
Example of using Web Tracer with document load instrumentation with console
exporter and collector exporter
</body>
</html>
安装
要在浏览器中创建 traces，您需要 @opentelemetry/sdk-trace-web 以及 @opentelemetry/instrumentation-document-load 仪表化。
npm init -y
npm install @opentelemetry/api \
@opentelemetry/sdk-trace-web \
@opentelemetry/instrumentation-document-load \
@opentelemetry/context-zone
初始化和配置
如果您使用 TypeScript 编写代码，请运行以下命令
tsc --init
然后安装 parcel，它将（除其他功能外）允许您使用 TypeScript。
npm install --save-dev parcel
创建一个名为 document-load 的空代码文件，根据您选择的应用程序语言，为该文件添加 .ts 或 .js 扩展名。在 </body> 结束标签之前，将以下代码添加到您的 HTML 中。
<script type="module" src="document-load.ts"></script>
<script type="module" src="document-load.js"></script>
我们将添加一些代码来跟踪文档加载时间，并将这些时间输出为 OpenTelemetry Spans。
创建 Tracer Provider
将以下代码添加到 document-load.ts|js 中，以创建 tracer provider，它提供了用于跟踪文档加载的仪表化。
/* document-load.ts|js file - the code snippet is the same for both the languages */
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
const provider = new WebTracerProvider();
provider.register({
// Changing default contextManager to use ZoneContextManager - supports asynchronous operations - optional
contextManager: new ZoneContextManager(),
});
// Registering instrumentations
registerInstrumentations({
instrumentations: [new DocumentLoadInstrumentation()],
});
现在使用 parcel 构建应用程序
npx parcel index.html
并打开开发 Web 服务器（例如，在 https://:1234）以查看您的代码是否正常工作。
此时将不会有 traces 输出，为此我们需要添加一个 exporter。
创建 Exporter
在下面的示例中，我们将使用 ConsoleSpanExporter，它将所有 spans 打印到控制台。
为了可视化和分析您的 traces，您需要将它们导出到 tracing 后端。请遵循 这些说明 来设置后端和 exporter。
您可能还想使用 BatchSpanProcessor 来批量导出 spans，以更有效地利用资源。
要将 traces 导出到控制台，请修改 document-load.ts|js，使其与以下代码片段匹配
/* document-load.ts|js file - the code is the same for both the languages */
import {
ConsoleSpanExporter,
SimpleSpanProcessor,
} from '@opentelemetry/sdk-trace-base';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
const provider = new WebTracerProvider({
spanProcessors: [new SimpleSpanProcessor(new ConsoleSpanExporter())],
});
provider.register({
// Changing default contextManager to use ZoneContextManager - supports asynchronous operations - optional
contextManager: new ZoneContextManager(),
});
// Registering instrumentations
registerInstrumentations({
instrumentations: [new DocumentLoadInstrumentation()],
});
现在，重新构建您的应用程序并再次打开浏览器。在开发者工具栏的控制台中，您应该会看到一些 traces 被导出。
{
"traceId": "ab42124a3c573678d4d8b21ba52df3bf",
"parentId": "cfb565047957cb0d",
"name": "documentFetch",
"id": "5123fc802ffb5255",
"kind": 0,
"timestamp": 1606814247811266,
"duration": 9390,
"attributes": {
"component": "document-load",
"http.response_content_length": 905
},
"status": {
"code": 0
},
"events": [
{
"name": "fetchStart",
"time": [1606814247, 811266158]
},
{
"name": "domainLookupStart",
"time": [1606814247, 811266158]
},
{
"name": "domainLookupEnd",
"time": [1606814247, 811266158]
},
{
"name": "connectStart",
"time": [1606814247, 811266158]
},
{
"name": "connectEnd",
"time": [1606814247, 811266158]
},
{
"name": "requestStart",
"time": [1606814247, 819101158]
},
{
"name": "responseStart",
"time": [1606814247, 819791158]
},
{
"name": "responseEnd",
"time": [1606814247, 820656158]
}
]
}
添加 Instrumentations
如果您想对 Ajax 请求、用户交互等进行仪表化，可以添加额外的仪表化库并注册它们。
npm install @opentelemetry/instrumentation-user-interaction \
@opentelemetry/instrumentation-xml-http-request \
import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
registerInstrumentations({
instrumentations: [
new DocumentLoadInstrumentation(),
new UserInteractionInstrumentation(),
new XMLHttpRequestInstrumentation(),
],
});
Web 元程序包
要一次性利用最常见的仪表化，您可以直接使用 OpenTelemetry Web 元程序包。