React 前端应用中快速实践 OpenTelemetry 云原生可观测性(SigNoz/K8S)

这篇具有很好参考价值的文章主要介绍了React 前端应用中快速实践 OpenTelemetry 云原生可观测性(SigNoz/K8S)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

React 前端应用中快速实践 OpenTelemetry 云原生可观测性(SigNoz/K8S),前端,云原生,react.js,kubernetes,前端框架

OpenTelemetry 可用于跟踪 React 应用程序的性能问题和错误。您可以跟踪从前端 web 应用程序到下游服务的用户请求。OpenTelemetry 是云原生计算基金会(CNCF)下的一个开源项目,旨在标准化遥测数据的生成和收集。已成为下一代可观测平台的事实标准。

React(也称为 React.jsReactJS )是一个免费的开源前端 JavaScript 库,用于基于 UI 组件构建用户界面。它是由 Meta (以前的 Facebook)和一个由个人开发者和公司组成的社区维护的。React 可以作为使用 Next.js 等框架开发单页、移动或服务器渲染应用程序的基础。

然而,React 只关心状态管理和将状态呈现给 DOM,因此创建 React 应用程序通常需要使用额外的库进行路由,以及某些客户端功能。

使用 opentelemetry-js 库,你可以让你的 React 应用生成跟踪数据。您可以跟踪从前端 web 应用程序到下游服务的用户请求。

在演示如何实现 OpenTelemetry 库之前,让我们简要概述一下 OpenTelmetry

什么是 OpenTelemetry?

OpenTelemetry 是一套与第三方厂商无关的开源工具、API 和 SDK,用于检测应用程序,以创建和管理遥测数据(日志、指标和跟踪)。

React 前端应用中快速实践 OpenTelemetry 云原生可观测性(SigNoz/K8S),前端,云原生,react.js,kubernetes,前端框架

OpenTelemetry 库的 instrument(采集程序) 应用程序代码生成遥测数据,然后发送到可观察性工具进行存储和可视化

OpenTelemetry 是建立可观测性框架的基础。它还为您提供了选择后端分析工具的自由。

OpenTelemetry 与 SigNoz

在本文中,我们将使用 SigNoz 作为后端分析工具。SigNoz 是一个全栈开源 APM 工具,可用于存储和可视化 OpenTelemetry 收集的遥测数据。它是在 OpenTelemetry 上原生构建的,并适用于 OTLP 数据格式。

SigNoz 为最终用户提供了查询和可视化功能,并附带了用于应用程序度量和跟踪的开箱即用图表。

现在,让我们开始了解如何使用 opentelemetry-js 库,然后在 SigNoz 中可视化收集的数据。

快速实践

实验环境

DigitalOcean 托管集群(k8s v1.24.13)。

Helm 一键安装 SigNoz

helm repo add signoz https://charts.signoz.io

helm install signoz signoz/signoz -n apm --create-namespace \
--set otelCollector.config.receivers.otlp.protocols.http.include_metadata=true \
--set otelCollector.config.receivers.otlp.protocols.http.cors.allowed_origins='https://apm-demo.react-admin.com'

注意:cors 跨域设置,我这里 React 应用域名是 https://apm-demo.react-admin.com

查看 Pod

kubectl get po -n apm

NAME                                               READY   STATUS    RESTARTS       AGE
chi-signoz-clickhouse-cluster-0-0-0                1/1     Running   0              3m51s
signoz-alertmanager-0                              1/1     Running   0              4m5s
signoz-clickhouse-operator-54b6d79f58-b47ff        2/2     Running   2 (4m2s ago)   4m5s
signoz-frontend-564b8c4868-88grm                   1/1     Running   0              4m5s
signoz-k8s-infra-otel-agent-dqh5c                  1/1     Running   0              4m6s
signoz-k8s-infra-otel-agent-jdvnh                  1/1     Running   0              4m6s
signoz-k8s-infra-otel-agent-tb8sp                  1/1     Running   0              4m6s
signoz-k8s-infra-otel-deployment-dc85b496f-n6dhm   1/1     Running   0              4m5s
signoz-otel-collector-655cff46d8-7z5wn             1/1     Running   0              4m5s
signoz-otel-collector-metrics-7775fc9857-mb8wv     1/1     Running   0              4m5s
signoz-query-service-0                             1/1     Running   0              4m5s
signoz-zookeeper-0                                 1/1     Running   0              4m5s

暴露采集器 Server

此集群 Ingress Controller 是 Traefik,配置如下:

apiVersion: traefik.containo.us/v1alpha1
kind: IngressRoute
metadata:
  name: ingest
  namespace: apm
spec:
  entryPoints:
    - web
  routes:
    - match: PathPrefix(`/`) && Host(`ingest.doge-data.com`)
      kind: Rule
      services:
        - name: signoz-otel-collector
          port: 4318

示例应用

测试地址:

  • https://apm-demo.react-admin.com

仓库:

  • https://github.com/SigNoz/sample-reactjs-app.git

OpenTelemetry-JS

仓库:

  • https://github.com/open-telemetry/opentelemetry-js

官方文档:

  • https://opentelemetry.io/docs/instrumentation/js/

Tracing 示例核心源码

位于示例仓库:src/helpers/tracing/index.ts

import { context, trace, Span, SpanStatusCode } from "@opentelemetry/api";
import { WebTracerProvider } from "@opentelemetry/sdk-trace-web";
import { Resource } from "@opentelemetry/resources";
import { SimpleSpanProcessor } from "@opentelemetry/sdk-trace-base";
import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
import { ZoneContextManager } from "@opentelemetry/context-zone";
import { FetchInstrumentation } from "@opentelemetry/instrumentation-fetch";
import { FetchError } from "@opentelemetry/instrumentation-fetch/build/src/types";
import { registerInstrumentations } from "@opentelemetry/instrumentation";

const serviceName = "link-frontend";

const resource = new Resource({ "service.name": serviceName });
const provider = new WebTracerProvider({ resource });

const collector = new OTLPTraceExporter({
  url: "https://ingest.doge-data.com/v1/traces",
  // headers: {
  //   "signoz-access-token": "SigNoz-Cloud-Ingestion-Token-HERE"
  // }
});

provider.addSpanProcessor(new SimpleSpanProcessor(collector));
provider.register({ contextManager: new ZoneContextManager() });

const webTracerWithZone = provider.getTracer(serviceName);

declare const window: any;
var bindingSpan: Span | undefined;

window.startBindingSpan = (
  traceId: string,
  spanId: string,
  traceFlags: number
) => {
  bindingSpan = webTracerWithZone.startSpan("");
  bindingSpan.spanContext().traceId = traceId;
  bindingSpan.spanContext().spanId = spanId;
  bindingSpan.spanContext().traceFlags = traceFlags;
};

registerInstrumentations({
  instrumentations: [
    new FetchInstrumentation({
      propagateTraceHeaderCorsUrls: ["/.*/g"],
      clearTimingResources: true,
      applyCustomAttributesOnSpan: (
        span: Span,
        request: Request | RequestInit,
        result: Response | FetchError
      ) => {
        const attributes = (span as any).attributes;
        if (attributes.component === "fetch") {
          span.updateName(
            `${attributes["http.method"]} ${attributes["http.url"]}`
          );
        }
        if (result instanceof Error) {
          span.setStatus({
            code: SpanStatusCode.ERROR,
            message: result.message,
          });
          span.recordException(result.stack || result.name);
        }
      },
    }),
  ],
});

export function traceSpan<F extends (...args: any) => ReturnType<F>>(
  name: string,
  func: F
): ReturnType<F> {
  var singleSpan: Span;
  if (bindingSpan) {
    const ctx = trace.setSpan(context.active(), bindingSpan);
    singleSpan = webTracerWithZone.startSpan(name, undefined, ctx);
    bindingSpan = undefined;
  } else {
    singleSpan = webTracerWithZone.startSpan(name);
  }
  return context.with(trace.setSpan(context.active(), singleSpan), () => {
    try {
      const result = func();
      singleSpan.end();
      return result;
    } catch (error) {
      singleSpan.setStatus({ code: SpanStatusCode.ERROR });
      singleSpan.end();
      throw error;
    }
  });
}

在 React 组件中使用

位于示例仓库:src/components/TracingButton/index.tsx

import { Button } from '@mui/material'

import { traceSpan } from 'helpers/tracing'

interface Props {
  label: string;
  id?: string;
  secondary?: boolean;
  onClick: () => void;
}

export default (props: Props) => {
  const onClick = (): void =>
    traceSpan(`'${props.label}' button clicked`, props.onClick);

  return (
    <div>
      <Button
        id={props.id}
        variant={"contained"}
        color={props.secondary ? "secondary" : "primary"}
        onClick={onClick}
      >
        {props.label}
      </Button>
    </div>
  );
};

测试 React 应用上报

转到 https://apm-demo.react-admin.com , 单击 FETCH LINKS

React 前端应用中快速实践 OpenTelemetry 云原生可观测性(SigNoz/K8S),前端,云原生,react.js,kubernetes,前端框架

SigNoz 后台面板查看,聚合指标等

React 前端应用中快速实践 OpenTelemetry 云原生可观测性(SigNoz/K8S),前端,云原生,react.js,kubernetes,前端框架

React 前端应用中快速实践 OpenTelemetry 云原生可观测性(SigNoz/K8S),前端,云原生,react.js,kubernetes,前端框架

React 前端应用中快速实践 OpenTelemetry 云原生可观测性(SigNoz/K8S),前端,云原生,react.js,kubernetes,前端框架

总结

本篇文章侧重于快速实践,OpenTelemetry 本身很复杂,涉及很多基础概念,大家自行翻阅文档。

  • https://opentelemetry.io/docs/

SigNoz 作为后端分析与可视化工具。虽相对于 ELK Stack 还有很多不足,但它号称是基于 OpenTelemetry 生态原生构建的下一代开源可观测平台,期待它后续发展。

有兴趣的朋友,也可以二次开发 SigNoz,增加自身项目需求。目前也还比较容易的。文章来源地址https://www.toymoban.com/news/detail-620520.html

到了这里,关于React 前端应用中快速实践 OpenTelemetry 云原生可观测性(SigNoz/K8S)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • OpenShift 4 - 可观测性之用 OpenTelemetry+Jaeger 实现 Distributed Tracing

    《OpenShift / RHEL / DevSecOps 汇总目录》 说明:本文已经在支持 OpenShift 4.13 的环境中验证 说明 : 本文使用的测试应用采用的是 “手动 Instrumentation” 方式在应用代码中通过 OpenTelemetry 的 API 获取的跟踪数据。应用代码 https://github.com/rbaumgar/otelcol-demo-app/blob/main/src/main/java/org/acme

    2024年02月15日
    浏览(36)
  • MATLAB野外观测站生态气象数据处理分析实践应用

    1.基于MATLAB语言 2.以实践案例为主,提供所有代码 3.原理与操作结合 4.布置作业,答疑与拓展 示意图: 以野外观测站高频时序生态气象数据为例,基于MATLAB开展上机操作: 1.不同生态气象要素文件的数据读写与批处理实现 2.不同生态气象要素时序数据的质量控制与缺失插补

    2024年02月06日
    浏览(52)
  • 全栈声明式可观测:KubeVela 开箱即用且灵活定制的云原生应用洞察

    作者介绍:殷达,KubeVela Maintainer,阿里云高级工程师,深度参与了 KubeVela 混合云多集群管理、可扩展工作流、可观测等核心能力体系的建设 KubeVela [ 1] 是一个开箱即用的现代化应用交付与管理平台,它通过统一的应用模型、可编程可扩展的架构,帮助企业构建统一的平台,

    2024年02月06日
    浏览(38)
  • 【云原生】springboot 整合 OpenTelemetry

    目录 一、前言 二、应用可观测性概述 2.1 什么是可观测性 2.2 可观测性三大指标

    2024年01月20日
    浏览(30)
  • 前端刷新页面的五种方法(含原生js、vue和react)

    1、window.history.go(0)方法 2、location.reload()方法 3、location.href=location.href方法 4、vue-router方法 5、react-router方法

    2024年02月16日
    浏览(51)
  • 【前端】React快速入门+Redux状态管理

    本文旨在记录react的基础内容,帮助有需要的同学快速上手,需要进一步了解描述更加稳妥和全面的信息,请查阅官方文档 官方文档点击这里进行跳转 react框架 vue,react,angular这几种主流前端框架使用频率较高…本质还是js库。 React.js是一个用于构建用户界面的JavaScript库。它由

    2024年02月12日
    浏览(49)
  • 【前端知识】React 基础巩固(三十二)——Redux的三大原则、使用流程及实践

    单一数据源 整个应用程序的state被存储在一颗object tree 中,并且这个object tree 只存储在一个store中; Redux并没有强制让我们不能创建多个Store,但是那样做不利于数据维护; 单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改; State是只读的 唯一修改State的方法

    2024年02月15日
    浏览(62)
  • SpringBoot与SpringCloudAzure:微软云原生应用实践

    微软的Azure是一款云计算平台,它为开发者提供了一系列的云服务,包括计算、存储、数据库、AI等。Spring Boot是一款Java应用程序开发框架,它简化了开发人员的工作,使得他们可以快速地构建出高质量的应用程序。Spring Cloud是一款基于Spring Boot的云原生应用开发框架,它提供

    2024年02月21日
    浏览(32)
  • 前端工程化实战:React 模块化开发、性能优化和组件化实践

    前端工程化实战是指通过组织工作流程、使用工具和技术来提高前端开发效率和质量的一种方法。常见的前端工程化实践包括模块化开发、自动化构建、代码检查和测试、性能优化等。下面将简要介绍模块化开发、性能优化和组件化实践。 模块化开发 在 React 中实现模块化开

    2023年04月10日
    浏览(72)
  • 微前端使用qiankun实现,react主应用同时兼顾react,vue3,umi子应用

    理解 :我们可以简单理解为微前端是将一个项目拆分成多个模块,每个微前端模块可以由不同的团队进行管理,并可以自主选择框架,并且有自己的仓库,可以独立部署上线 应用场景 :1.当公司代码较老需要使用新的技术栈时我们可以使用微前端。2.多个团队同时开发时,每

    2024年02月09日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包