catalog.redhat.com Open in urlscan Pro
2a02:26f0:6c00::210:bb71 Public Scan

Back to summary

Submitted URL:
http://registry.redhat.io/
Effective URL:
https://catalog.redhat.com/
Submission: On March 22 via manual (March 22nd 2023, 1:21:05 pm UTC) from CH — Scanned from DE

Form analysis
1 forms found in the DOM

<form class="pf-c-form" style="margin-top:16px" id="ecoFeedbackForm"><input type="hidden" name="form_build_id" value="form-Se0bIPh-L26lbPDwUP218Z2oRfKjEYbIRvKBM4Eo1R8"> <input type="hidden" name="form_token"
    value="w3-skVyKDZSGJUXAawp-QF6jqc-WeSZqCxXqWnqMaBg"> <input type="hidden" name="form_id" value="rhec_feedback_entityform_edit_form">
  <div style="display:flex" class="mobile-stack">
    <div class="pf-c-form__group" style="flex:1;padding-right:16px"><label class="pf-c-form__label" for="field_eco_company[und][0][value]"><span class="pf-c-form__label-text">Your company/organization</span></label>
      <div class="pf-c-form__horizontal-group"><input class="pf-c-form-control" id="company" name="field_eco_company[und][0][value]"></div>
    </div>
    <div class="pf-c-form__group" style="flex:1"><label class="pf-c-form__label" for="field_eco_role[und][0][value]"><span class="pf-c-form__label-text">Your role</span></label>
      <div class="pf-c-form__horizontal-group"><select class="pf-c-form-control" style="padding-left:8px" id="role" name="field_eco_role[und][0][value]">
          <option value="">Select your role</option>
          <option value="Architect">Architect</option>
          <option value="Developer">Developer</option>
          <option value="DevOps Engineer">DevOps Engineer</option>
          <option value="Product Manager">Product Manager</option>
          <option value="Systems Administrator">Systems Administrator</option>
          <option value="Other">Other</option>
        </select></div>
    </div>
  </div>
  <div class="pf-c-form__group"><label class="pf-c-form__label" for="field_eco_what_is_working_well[und][0][value]"><span class="pf-c-form__label-text">What is working well?</span></label>
    <div class="pf-c-form__horizontal-group"><textarea class="pf-c-form-control" type="text" id="workingWell" name="field_eco_what_is_working_well[und][0][value]" aria-label="textarea example"></textarea></div>
  </div>
  <div class="pf-c-form__group"><label class="pf-c-form__label" for="field_eco_how_can_we_improve[und][0][value]"><span class="pf-c-form__label-text">How can we continue to improve?</span></label>
    <div class="pf-c-form__horizontal-group"><textarea class="pf-c-form-control" type="text" id="toImprove" name="field_eco_how_can_we_improve[und][0][value]" aria-label="textarea example"></textarea></div>
  </div>
  <div class="pf-c-form__group"><label class="pf-c-form__label" for="field_eco_email[und][0][value]"><span class="pf-c-form__label-text">Email address (optional)</span></label>
    <div class="pf-c-form__horizontal-group pf-c-form__horizontal-group--email"><input class="pf-c-form-control" type="email" id="email" name="field_eco_email[und][0][value]">
      <p>We may follow up with you if we need more information to act on your feedback.</p>
    </div>
  </div>
  <div class="pf-c-form__group hidden"><label class="pf-c-form__label" for="field_eco_describe_your_issue[und][0][value]"><span class="pf-c-form__label-text">Describe your issue (optional)</span></label>
    <div class="pf-c-form__horizontal-group"><textarea class="pf-c-form-control" type="text" id="toDescribeIssue" name="field_eco_describe_your_issue[und][0][value]" aria-label="textarea example"></textarea></div>
  </div>
  <div class="pf-c-form__group">
    <div class="pf-c-form__actions">
      <div class="cover-spinner__container"><pfe-progress-indicator indeterminate="" size="md" pfelement="" class="PFElement" on="light"></pfe-progress-indicator></div><button class="pf-c-button pf-m-primary" id="ecoFeedbackFormSubmitBtn"
        disabled="true">Submit</button> <button class="pf-c-button pf-m-secondary" type="button" id="modalClose">Cancel</button>
    </div>
  </div>
</form>

Text Content

Skip to navigation Skip to contentYou need to enable JavaScript to run this app.
 * Platforms & industries
   
   
   RED HAT ENTERPRISE LINUX
   
    * Certified software
    * Certified hardware
    * Cloud & service providers
   
   
   RED HAT OPENSHIFT
   
    * Certified software
    * Cloud & service providers
   
   
   RED HAT OPENSTACK
   
    * Certified software
    * Certified hardware
    * Cloud & service providers
   
   
   INDUSTRIES AND SEGMENTS
   
    * Telecommunications

 * Hardware
   
   
   BY CATEGORY
   
    * Servers
    * Edge systems
    * Workstations
    * Components
   
   
   FEATURED LISTS
   
    * Red Hat Enterprise Linux 8 certified servers
    * Red Hat OpenStack 16 certified servers
    * Red Hat Virtualization 4 certified servers
   
   Explore certified hardware
 * Software
   
   
   BY CATEGORY
   
    * OpenShift operators
    * Helm charts
    * Containerized applications
    * OpenStack infrastructure
    * Standalone applications
    * Container images
    * Vulnerability scanners
   
   
   FEATURED LISTS
   
    * OpenShift operators for Red Hat OpenShift 4
    * Standalone applications for Red Hat Enterprise Linux 9
    * CNF certified for Red Hat OpenShift
    * VNF certified for Red Hat OpenStack
   
   
   BASE IMAGES
   
    * About base images
    * Red Hat Universal Base Image 9
    * Red Hat Universal Base Image 8
    * Red Hat Universal Base Image 7
   
   Explore certified softwareManage container registry service accounts
 * Cloud & service providers
   
   
   BY CONSUMPTION TYPE
   
    * Upload an image
    * On demand
   
   
   FEATURED LISTS
   
    * Certified for Red Hat Enterprise Linux 9
   
   
   LEARN MORE
   
    * Red Hat Cloud Access
   
   Explore certified cloud

Help

Resources


RESOURCES

 * Blog
 * Partner podcast


MORE TO EXPLORE

 * All blogs
 * Events and webinars
 * Training and certification
 * Newsroom
 * Resource library
 * Customer success stories

All Red Hat
Back to menu

 * You are here
   
   
   
   
   RED HAT
   
   Learn about our open source products, services, and company.

 * You are here
   
   
   
   
   RED HAT CUSTOMER PORTAL
   
   Get product support and knowledge from the open source experts.

 * You are here
   
   
   
   
   RED HAT DEVELOPER
   
   Read developer tutorials and download Red Hat software for cloud application
   development.

 * You are here
   
   
   
   
   RED HAT PARTNER CONNECT
   
   Become a Red Hat partner and get support in building customer solutions.

--------------------------------------------------------------------------------


 * PRODUCTS
   
   
   * ANSIBLE.COM
     
     Learn about and try our IT automation product.


 * TRY, BUY, SELL
   
   
   * RED HAT HYBRID CLOUD
     
     Access technical how-tos, tutorials, and learning paths focused on Red
     Hat’s hybrid cloud managed services.
   
   
   * RED HAT STORE
     
     Buy select Red Hat products and services online.
   
   
   * RED HAT MARKETPLACE
     
     Try, buy, sell, and manage certified enterprise software for
     container-based environments.


 * COMMUNITY & OPEN SOURCE
   
   
   * THE ENTERPRISERS PROJECT
     
     Read analysis and advice articles written by CIOs, for CIOs.
   
   
   * OPENSOURCE.COM
     
     Read articles on a range of topics about open source.


 *  
   
   
   * RED HAT SUMMIT
     
     Register for and learn about our annual open source IT industry event.
   
   
   * RED HAT ECOSYSTEM CATALOG
     
     Find hardware, software, and cloud providers―and download container
     images―certified to perform with Red Hat technologies.


TESTED. CERTIFIED. SUPPORTED.

Build on Red Hat platforms and technologies with certified, enterprise-grade
products you need to achieve your business outcomes. We make it easy for you to
explore and find certified products from our large and robust ecosystem of
enterprise hardware, software, and cloud and service providers.


BROWSE BY PLATFORM

The leading enterprise Linux operating system, certified on hundreds of clouds
and with thousands of vendors.

Explore

Red Hat® OpenShift® is an enterprise-ready Kubernetes container platform with
full-stack automated operations to manage hybrid cloud, multicloud, and edge
deployments.

Explore

Red Hat® OpenStack® Platform virtualizes resources from industry-standard
hardware, organizes those resources into clouds, and manages them so users can
access what they need—when they need it.

Explore

Red Hat® Ansible® Automation Platform is a foundation for building and operating
automation across an organization.

Explore


STABLE ANYWHERE. AVAILABLE EVERYWHERE.

Red Hat Enterprise Linux 9 has arrived. Browse the latest products certified for
Red Hat Enterprise Linux 9. Learn more

Certified hardwareCertified softwareCertified cloud


BROWSE BY CATEGORY


CERTIFIED HARDWARE

Bare metal, appliances, and other hardware from Red Hat partners is certified
and supported for Red Hat technologies.

Explore


CERTIFIED SOFTWARE

OpenShift operators, containerized applications, and traditional software
certified to run on Red Hat platforms.

Explore


CERTIFIED CLOUD AND SERVICE PROVIDERS

Run your applications on Red Hat platforms and technologies in supported clouds
and cloud service providers.

Explore


RED HAT BLOGS


HOW TO ENABLE OPENTELEMETRY TRACES IN REACT APPLICATIONS

By Purva Naik|Published Wed, 22 Mar 2023 07:00:00 +0000



The main focus of this article is to demonstrate how to instrument React
applications to make them observable. For a good overview of observability and
OpenTelemetry, please take a look at the article, Observability in 2022: Why it
matters and how OpenTelemetry can help.


10-STEP OPENTELEMETRY DEMONSTRATION

Related to the OpenTelemetry, we are using the following:

 * Auto instrumentation via sdk-trace-web and a plugin to provide auto
   instrumentation for fetch.
 * OpenTelemetry Collector (also known as OTELCOL).
 * Jaeger
 * Basic collector deployment pattern. For more information about OTELCOL
   deployment patterns, please take a look at OpenTelemetry Collector Deployment
   Patterns.


STEP 1. SET UP PREREQUISITES

In this demo, we are going to use Docker and docker-compose. You can refer to
Docker and docker-compose to learn more.


STEP 2. RUN THE REACT APPLICATION EXAMPLE

You will be using a front-end react application that contains the sample React
application code that we will instrument. Please note that the repository also
contains an Express application as a back end, but the focus of this tutorial is
to instrument the front end only.

The front-end application contains a button that calls the back end using
Express and a scroll component that calls the https://randomuser.me/ free public
API. We are going to delegate to OpenTelemetry libraries the job of capturing
traces for the button and the scroll component. So every time the user clicks on
the button or scrolls the page, the auto-instrumentation plugin will generate
traces for this.

Clone the following GitHub repository from the command line:

git clone https://github.com/obs-nebula/frontend-react.git


STEP 3. INSTRUMENT THE REACT APPLICATION

The following list shows the dependencies we added. You may want to use newer
versions, depending on when you are reading this article:

"@opentelemetry/exporter-trace-otlp-http": "^0.35.0",

"@opentelemetry/instrumentation": "^0.35.0",

"@opentelemetry/instrumentation-fetch": "^0.35.0",

"@opentelemetry/resources": "^1.9.1",

"@opentelemetry/sdk-trace-web": "^1.8.0",

"@opentelemetry/semantic-conventions": "^1.9.1"

Create a file named tracing.js that will load OpenTelemetry. We are going to
share more details in the following subsections. The content of the
front-end/src/tracing.js file is as follows:

const { Resource } = require('@opentelemetry/resources');

const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventions');

const { WebTracerProvider, SimpleSpanProcessor, ConsoleSpanExporter } = require('@opentelemetry/sdk-trace-web');

const { OTLPTraceExporter }  = require('@opentelemetry/exporter-trace-otlp-http');

const { registerInstrumentations } = require('@opentelemetry/instrumentation');

const { FetchInstrumentation } = require('@opentelemetry/instrumentation-fetch');

const consoleExporter = new ConsoleSpanExporter();

const collectorExporter = new OTLPTraceExporter({

  headers: {}

});

const provider = new WebTracerProvider({

  resource: new Resource({

    [SemanticResourceAttributes.SERVICE_NAME]: process.env.REACT_APP_NAME

  })

});

const fetchInstrumentation = new FetchInstrumentation({});

fetchInstrumentation.setTracerProvider(provider);

provider.addSpanProcessor(new SimpleSpanProcessor(consoleExporter));

provider.addSpanProcessor(new SimpleSpanProcessor(collectorExporter));

provider.register();

registerInstrumentations({

  instrumentations: [

    fetchInstrumentation

  ],

  tracerProvider: provider

});

export default function TraceProvider ({ children }) {

  return (

   <>

      {children}

   

  );

}


STEP 4. IMPORT THE REQUIRED MODULES

Next, you will need to import the OpenTelemetry modules. As you can see, we can
get the ConsoleSpanExporter and SimpleSpanProcessor from the
@opentelemetry/sdk-trace-web so we don’t need to add an extra dependency for
this.

const { Resource } = require('@opentelemetry/resources');

const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventions');

const { WebTracerProvider,SimpleSpanProcessor, ConsoleSpanExporter } = require('@opentelemetry/sdk-trace-web');

const { OTLPTraceExporter }  = require('@opentelemetry/exporter-trace-otlp-http');

const { registerInstrumentations } = require('@opentelemetry/instrumentation');

const { FetchInstrumentation } = require('@opentelemetry/instrumentation-fetch');


STEP 5. INITIALIZE THE TRACER

Since we are using React with JavaScript, to initialize the OpenTelemetry
tracer, you will need to create a new instance of the TraceProvider and pass it
as a property to your root React component. You can do this by adding the
following code to your main application file, in our case, that is in index.js
file.

import TraceProvider from './tracing';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  

    

  

);


STEP 6. CREATE AN OTELCOL EXPORTER INSTANCE

To export the traces to OTELCOL, you will need to create an instance of
OTLPTraceExporter.

Note that we are adding a workaround to use XHR instead of sendBeacon, as
described in this OpenTelemetry JS upstream issue. With that, we can fix the
CORS problem when exporting.

const collectorExporter = new OTLPTraceExporter({

headers: {}

});


STEP 7. CREATE THE OTEL-COLLECTOR-CONFIG FILE

Now let’s take a look at the yaml file content. To configure the OTELCOL, you
will need to create a new file called otel-collector-config.yaml in your root
directory. In this file, we are going to configure the receiver, processor, and
exporters (using Jaeger and logging as exporters).

receivers:

  otlp:

    protocols:

      http:

        cors:

          allowed_origins: ["*"]

          allowed_headers: ["*"]

exporters:

  logging:

    verbosity: Detailed

  jaeger:

    endpoint: jaeger-all-in-one:14250

    tls:

      insecure: true

processors:

  batch:

service:

  telemetry:

    logs:

      level: "debug"

  pipelines:

    traces:

      receivers: [otlp]

      exporters: [logging, jaeger]

      processors: [batch]


STEP 8. CREATE A DOCKER COMPOSE FILE

Create a docker-compose file and define the services for OTELCOL, Jaeger, and
the application as follows:

version: "2"

services:

  front-end:

    build:

      context:./front-end

    depends_on:

      - express-server

    ports:

      - "3000:3000"

    env_file:

     -./front-end/src/.env

  express-server:

    build:

      context:./express-server

    ports:

      - "5000:5000"

  collector:

    image: otel/opentelemetry-collector:latest

    command: ["--config=/otel-collector-config.yaml"]

    volumes:

      - './otel-collector-config.yaml:/otel-collector-config.yaml'

    ports:

      - "4318:4318"

    depends_on:

      - jaeger-all-in-one

   # Jaeger

  jaeger-all-in-one:

    hostname: jaeger-all-in-one

    image: jaegertracing/all-in-one:latest

    ports:

      - "16685"

      - "16686:16686"

      - "14268:14268"

      - "14250:14250"


STEP 9. START THE SERVICES

Once you have created OTELCOL config and Docker compose files, you can start the
services by running the following command in your terminal:

$docker-compose up

Once the services are started you can access the react application at
http://localhost:3000.

As mentioned previously, every time the users scroll the page, it will generate
random data through an API call and the OpenTelemetry will generate traces based
on the scrolling activity.


STEP 10. VIEW THE TRACES IN JAEGER

You can view the traces in the Jaeger UI by navigating to
http://localhost:16686. The horizontal circles in the chart represent button
clicks, and the vertical circles represent scrolling activity, as shown in
Figure 1.

Figure 1: Application tracing in Jaeger.

Let's click on one of the horizontal items and expand the trace detail as shown
in Figure 2:

Figure 2: The expanded trace detail shows the Express back-end was called and
the OpenTelemetry library name.

We can see in Figure 2 that the Express back end was called, and the
OpenTelemetry library name that is responsible for this trace generation.

Now let’s click in one vertical circle as shown in Figure 3:

Figure 3: The trace information showing that the scrolling activity is calling
an external API.

We can see in Figure 3 that scrolling activity is calling an external API.


COLLECTING AND ANALYZING TELEMETRY DATA

You have successfully enabled OpenTelemetry in your React application using the
OpenTelemetry collector and Jaeger. You can now start collecting and analyzing
telemetry data. You can use the Jaeger UI to view traces, identify performance
bottlenecks, and gain deeper understanding about what the React application is
doing when calling external systems.


FURTHER READING

Want to learn more about observability and OpenTelemetry? Check out these
articles:

 * Observability in 2022: Why it matters and how OpenTelemetry can help
 * Distributed tracing with OpenTelemetry, Knative, and Quarkus
 * A guide to the open source distributed tracing landscape

The post How to enable OpenTelemetry traces in React applications appeared first
on Red Hat Developer.







Read the articleView more blog posts



RED HAT MARKETPLACE

Red Hat® Marketplace is a single source to try, buy, and manage certified
operators for Red Hat OpenShift®. It offers responsive support, streamlined
billing and contracting, simplified governance, and a single dashboard across
clouds.

Explore Red Hat Marketplace



WHY CHOOSE RED HAT CERTIFIED SOLUTIONS?

Built and tested to exacting standards. Ready to deploy in your environment with
confidence.

Detailed interoperability, compatibility, and security details to choose the
right solutions for your business needs.

Fully supported by the provider while maintaining your relationship with Red
Hat’s global support services.


PARTNER WITH RED HAT

We provide a variety of partner resources to assist you through the
certification process to deliver the best possible experience to our mutual
customers. Join the Red Hat Certified Ecosystem and showcase your product to
millions of potential clients, customers, sellers, and developers.

Learn more about how Red Hat Partner Connect can help you succeed
Timestamp: Mon Mar 20 16:07:04 UTC 2023SHA: headVersion: 1.192
LinkedInYouTubeFacebookTwitter


PLATFORMS

 * Red Hat Enterprise Linux
 * Red Hat OpenShift
 * Red Hat OpenStack Platform


PRODUCTS & SERVICES

 * Certified hardware
 * Certified software
 * Certified cloud & service providers


TRY, BUY, SELL

 * Product trial center
 * Red Hat Store
 * Red Hat Marketplace
 * Partner with us
 * Contact sales
 * Contact training
 * Contact consulting


HELP

 * My account
 * Customer support
 * Partner resources
 * Developer resources
 * Training and certification
 * Learning community
 * Catalog documentation
 * Resource library


ABOUT RED HAT ECOSYSTEM CATALOG

The Red Hat Ecosystem Catalog is the official source for discovering and
learning more about the Red Hat Ecosystem of both Red Hat and certified
third-party products and services.

We’re the world’s leading provider of enterprise open source solutions—including
Linux, cloud, container, and Kubernetes. We deliver hardened solutions that make
it easier for enterprises to work across platforms and environments, from the
core datacenter to the network edge.


RED HAT LEGAL AND PRIVACY LINKS

 * About Red Hat
 * Jobs
 * Events
 * Locations
 * Contact Red Hat
 * Red Hat Blog
 * Diversity, equity, and inclusion
 * Cool Stuff Store
 * Red Hat Summit


RED HAT LEGAL AND PRIVACY LINKS

 * Privacy statement
 * Terms of use
 * All policies and guidelines
 * Digital accessibility



SUCCESS ALERT: THANK YOU FOR YOUR FEEDBACK!

Have feedback?


YOUR FEEDBACK IS IMPORTANT TO US

Your company/organization

Your role
Select your roleArchitectDeveloperDevOps EngineerProduct ManagerSystems
AdministratorOther
What is working well?

How can we continue to improve?

Email address (optional)

We may follow up with you if we need more information to act on your feedback.

Describe your issue (optional)


Submit Cancel

catalog.redhat.com Open in urlscan Pro 2a02:26f0:6c00::210:bb71 Public Scan

Form analysis 1 forms found in the DOM

Text Content

catalog.redhat.com Open in urlscan Pro
2a02:26f0:6c00::210:bb71 Public Scan

Form analysis
1 forms found in the DOM