OpenTelemetry Web SDK 安装

欢迎回到第 10 章的学习。在上一节，我们创建了 React 项目。现在我们要安装 OpenTelemetry Web SDK，这是前端集成的基础。

本节将学习：安装依赖、SDK 版本选择、以及兼容性说明。

安装依赖

需要安装哪些依赖包呢？

第一个：核心 SDK。

@opentelemetry/sdk-web

第二个：自动插桩包。

@opentelemetry/instrumentation

第三个：文档加载插桩。

@opentelemetry/instrumentation-document-load

第四个：用户交互插桩。

@opentelemetry/instrumentation-user-interaction

第五个：Fetch API 插桩。

@opentelemetry/instrumentation-fetch

第六个：XMLHttpRequest 插桩。

@opentelemetry/instrumentation-xml-http-request

第七个：Exporter。

@opentelemetry/exporter-otlp-http

安装命令：

npm install @opentelemetry/sdk-web
npm install @opentelemetry/instrumentation
npm install @opentelemetry/instrumentation-document-load
npm install @opentelemetry/instrumentation-user-interaction
npm install @opentelemetry/instrumentation-fetch
npm install @opentelemetry/instrumentation-xml-http-request
npm install @opentelemetry/exporter-otlp-http

SDK 版本选择

如何选择合适的版本呢？ 使用稳定版本，避免使用 beta 或 alpha 版本，查看官方文档了解最新稳定版本。

版本号格式： 使用语义化版本号（Semantic Versioning），格式为

主版本号.次版本号.修订号

1.0.0

版本选择建议： 使用最新稳定版本，避免使用过新的版本（可能存在 bug），定期更新到新版本。

如何指定版本？ 在 package.json 中指定版本号，使用

^

~

示例：

{
  "dependencies": {
    "@opentelemetry/sdk-web": "^1.0.0",
    "@opentelemetry/instrumentation": "^0.50.0"
  }
}

兼容性说明

OpenTelemetry Web SDK 的浏览器兼容性要求是什么？ 需要支持 ES6+ 的现代浏览器，包括 Chrome、Firefox、Safari、Edge 的最新版本。

主要浏览器支持： Chrome 90+、Firefox 88+、Safari 14+、Edge 90+。

兼容性考虑： 如果需要支持旧浏览器，可能需要使用 polyfill，考虑使用 Babel 转译代码，测试在不同浏览器中的表现。

如何检查兼容性？ 查看 OpenTelemetry 官方文档，使用 Can I Use 网站检查浏览器支持，在目标浏览器中测试。

本节小结

在本节中，我们学习了 OpenTelemetry Web SDK 安装：

第一个是安装依赖。 安装核心 SDK、自动插桩包、各种插桩包、Exporter，这些是前端可观察性的基础。

第二个是 SDK 版本选择。 使用稳定版本，避免使用预发布版本，定期更新到新版本。

第三个是兼容性说明。 了解浏览器兼容性要求，确认目标浏览器在支持列表中，必要时使用 polyfill。

OpenTelemetry Web SDK 安装流程： 安装依赖 → 选择版本 → 检查兼容性 → 准备初始化 SDK。

这就是 OpenTelemetry Web SDK 安装。安装好依赖后，我们就可以开始初始化 SDK 了。

在下一节，我们将学习初始化 OpenTelemetry SDK。学习如何配置和初始化 SDK。