前端改版OpenTelemetry演示 (Go to Next.js)
OpenTelemetry项目的许多特别兴趣小组(SIG)之一是OpenTelemetry社区演示SIG。该SIG支持一组已经过工具化的微服务以及一个前端Web应用程序，用于展示如何使用OpenTelemetry对分布式系统进行仪表化。
该Web应用的主要重点是展示如何为应用程序进行仪表化，无论该应用程序使用哪种编程语言、平台或操作系统。该Web应用还展示了不同的仪表化技术：自动和手动仪表化、指标和行李。所有这些都遵循官方OTel文档中规定的标准和约定。有关具体要求的更多信息可以在此处找到。
我们公司专注于成为OpenTelemetry社区的一部分并接纳它。今年夏天，我们的一个目标是与核心的OpenTelemetry项目更深入地参与，以便我们能够提供有意义的贡献。 OTel演示是我们目标的最佳选择，因为通过贡献我们不仅可以帮助社区，而且还可以提供一个良好的示例来测试和展示我们的产品。
我们首先与OTel Demo SIG组织者Carter Socha取得了联系。Carter非常热情，并帮助我们确定我们的贡献可能产生最大影响的领域。我们开始关注Austin Parker创建的问题，这个问题涉及到完全改版前端，包括将应用程序从Go服务器端渲染（SSR）架构转移到包括浏览器端客户端（客户端渲染或CSR）的架构，并改善整体样式、主题和用户体验。
工作中的一个有趣的方面是将存储从“普通”存储转换为天文存储，以与OpenTelemetry项目的整体品牌形象相匹配。
一旦我们得到了OTel demo SIG的批准，我们就开始着手进行前端架构改版的不同变更。
OpenTelemetry演示应用程序描述和技术栈
演示应用是一个天文商店，具有基本的电子商务功能，例如购物车、货币选择器、支付和结账。它还可根据用户的上下文显示促销信息（广告）和相关产品。
演示的技术栈包括多种不同语言的微服务，涵盖了以下每种OTel支持的语言：
每个微服务都有特定的目标，并且可以使用全局gRPC定义与其他微服务进行通信。持久化信息保存在PostgreSQL数据库中，并且有与第三方服务连接以触发事件（例如确认电子邮件）的出站服务。所有微服务（包括前端）都连接到相同的OpenTelemetry收集器实例，该实例使用Jaeger作为跟踪数据的数据存储之一。
在重新架构之前，前端由一个Golang SSR应用程序组成，它将完整的HTML发送到浏览器以进行显示。每个请求和调用都重定向到服务器，因此显示新信息。
Web应用的样式改进、主题更新和用户体验重新设计
在开始开发过程之前，前端应用与OpenTelemetry在颜色、产品和整体用户体验方面的主题不匹配。此外，演示缺乏真正的前端（浏览器端）应用，因为当前的实现是一个Go应用。
首要任务是通过更新设计、色彩方案和用户体验，将演示引入到现代化的时代。Olly Babiak加入进来，帮助我们实现这一目标，他创建了应用的现代化版本。它包括改进的产品首页展示方式、更新后的产品详情页面、迷你购物车和完全兼容移动版本的应用。
现在，我们拥有了一个应用设计，它与OpenTelemetry的其他主题和颜色相匹配，并且更像OpenTelemetry.io网站。
前端应用架构重构
我们制定了一个初步的提案，其中包括以下内容：
- 框架和工具（脚手架、I/O、样式、UI库）
- 代码架构和结构（目录、编码模式）
- 仪表化
- 部署和分发
- 测试（端到端、单元测试）
此提案在每周一次的OpenTelemetry demo SIG会议上展示，并获得批准继续进行。作为这些变化的一部分，我们决定使用Next.js作为主要前端应用程序，同时作为前端和gRPC后端服务之间的聚合层。
正如您在图中所看到的，该应用程序具有两个主要的连接点，一个是来自浏览器端（REST）到Next.js聚合层的连接，另一个是来自聚合层到后端服务（gRPC）的连接。
OpenTelemetry仪表化
我们下一步要解决的重大问题是如何对Next.js应用的两个方面进行仪表化。为此，我们必须将应用程序两次连接到所有微服务使用的相同收集器。
我们设计了一个简单的后端解决方案，使用官方gRPC导出器结合Node.js SDK。
您可以在这里找到完整的实现。基本的仪表化包括自动仪表化最常用的Node.js库和工具。为了为用户提供更好的示例，我们添加了一种以路由中间件形式的手动仪表化。它会捕获传入的HTTP请求，并基于它创建一个span，包括上下文传播。您可以在这里找到实现。
前端部分稍微复杂一些，因为初始渲染是在服务器端进行的。我们必须确保在执行JavaScript代码时从浏览器端加载跟踪器。
在添加了检查浏览器端的验证后，我们加载了自定义前端跟踪模块，其中包括创建Web跟踪器提供程序和自动化Web仪表化。
自动化的前端仪表化捕获了最常见的用户操作，例如点击、获取请求和页面加载。为了允许浏览器端与收集器进行交互，需要进行配置更改：启用来自Web应用的传入CORS请求。
安装完成后，通过从Docker加载应用程序并与不同功能进行交互，我们可以开始查看从前端用户事件到后端gRPC服务的完整跟踪。
对OpenTelemetry的贡献是有价值的
作为一个专注于构建在可观测性领域的开源工具的团队，帮助整个OpenTelemetry社区对我们来说非常重要。此外，对于我们团队来说，拥有一个使用多种不同语言和技术的复杂的基于微服务的应用程序是直接有用的。我们非常享受为OpenTelemetry项目做出贡献的过程，并积极寻找更多的贡献机会！
Oscar Reyes和 Olly Babiak 还致力于Tracetest，这是一个开源工具，允许您使用OpenTelemetry开发和测试分布式系统。它可以与任何兼容OTel的系统一起使用，并支持创建基于跟踪的测试。请访问 https://github.com/kubeshop/tracetest 查看详情。