Giter VIP home page Giter VIP logo

gorbush / frontend-react Goto Github PK

View Code? Open in Web Editor NEW

This project forked from obs-nebula/frontend-react

0.0 0.0 0.0 1.33 MB

This repository contains an example of OpenTelemetry-JS with React

Home Page: https://developers.redhat.com/articles/2023/03/22/how-enable-opentelemetry-traces-react-applications

License: Apache License 2.0

Shell 3.16% JavaScript 72.21% CSS 6.62% HTML 11.96% Dockerfile 6.06%

frontend-react's Introduction

frontend-react

Package
@opentelemetry/exporter-trace-otlp-http To export to OTEL collector via OTLP/HTTP
@opentelemetry/resources To be used with semantic-conventions to identify the application/service's name
@opentelemetry/sdk-trace-web For automatic instrumentation
@opentelemetry/semantic-conventions To be used with resources to identify the application/service's name
@opentelemetry/instrumentation To register the fetch auto-instrumentation plugin
@opentelemetry/instrumentation-fetch For fetch auto-instrumentation

How to run

Open a new terminal and run:

docker-compose up --build

Check the result in Browser Console:

Check the result in Jaeger UI (http://localhost:16686/)

Check the result in the otelcol logs:

ScopeSpans #0
ScopeSpans SchemaURL:
InstrumentationScope @opentelemetry/instrumentation-fetch 0.34.0
Span #0
    Trace ID       : a7425b68455b0b3f685ea07f9ab3cedd
    Parent ID      :
    ID             : b68d02da6dd97213
    Name           : HTTP GET
    Kind           : Client
    Start time     : 2022-12-01 14:45:41.7633 +0000 UTC
    End time       : 2022-12-01 14:45:41.7713 +0000 UTC
    Status code    : Unset
    Status message :
Attributes:
     -> component: Str(fetch)
     -> http.method: Str(GET)
     -> http.url: Str(http://localhost:5000/express_backend)
     -> http.status_code: Int(200)
     -> http.status_text: Str(OK)
     -> http.host: Str(localhost:5000)
     -> http.scheme: Str(http)
     -> http.user_agent: Str(Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36)
     -> http.response_content_length: Int(0)
Events:
SpanEvent #0
     -> Name: fetchStart
     -> Timestamp: 2022-12-01 14:45:41.7639 +0000 UTC
     -> DroppedAttributesCount: 0
SpanEvent #1
     -> Name: domainLookupStart
     -> Timestamp: 2022-12-01 14:45:37.8655 +0000 UTC
     -> DroppedAttributesCount: 0
SpanEvent #2
     -> Name: domainLookupEnd
     -> Timestamp: 2022-12-01 14:45:37.8655 +0000 UTC
     -> DroppedAttributesCount: 0
SpanEvent #3
     -> Name: connectStart
     -> Timestamp: 2022-12-01 14:45:37.8655 +0000 UTC
     -> DroppedAttributesCount: 0
SpanEvent #4
     -> Name: secureConnectionStart
     -> Timestamp: 2022-12-01 14:45:37.8655 +0000 UTC
     -> DroppedAttributesCount: 0
SpanEvent #5
     -> Name: connectEnd
     -> Timestamp: 2022-12-01 14:45:37.8655 +0000 UTC
     -> DroppedAttributesCount: 0
SpanEvent #6
     -> Name: requestStart
     -> Timestamp: 2022-12-01 14:45:37.8655 +0000 UTC
     -> DroppedAttributesCount: 0
SpanEvent #7
     -> Name: responseStart
     -> Timestamp: 2022-12-01 14:45:37.8655 +0000 UTC
     -> DroppedAttributesCount: 0
SpanEvent #8
     -> Name: responseEnd
     -> Timestamp: 2022-12-01 14:45:41.7691 +0000 UTC
     -> DroppedAttributesCount: 0
	{"kind": "exporter", "data_type": "traces", "name": "logging"}

frontend-react's People

Contributors

helio-frota avatar pnaik1 avatar dependabot[bot] avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.