otel-ts

OpenTelemetry for web apps, from one init() call.

Press a button. Watch what leaves the page.

This page starts the real init() of the package. The data stays in your browser: a stub in this page takes each export, and nothing goes to a server.

Each button also adds to two metrics.

Spans
0
Metric points
0
Log records
0
Exports
0
Payload
0 B
init() time
-
Requests to other origins
0

Traces

The newest trace comes first. Each row is one span of an export, and a child sits under its parent.

  • Span
  • Log record of the span
  • Failed span

The wire

Each dot is one POST of the OTLP exporters in the last 60 seconds. A larger dot has a larger payload. Press a dot to read its payload.

Point at a dot to read its size and its cause.

Exports

IDSignalItemsSizeCause

Payload

Press an export to read its payload.


        

      


      

        

          
Metrics of the last export

          

            

              The counter demo.actions, by action.
              
                
ActionTemporalityValue

              
              
            

          

          

        

        

          
Log records

          
A log record has the IDs of the active span. Press its span to find it in the traces.

          
    
        
    
      
    

      
    
        
    
          
    Change the options
    
          
    Each option needs a new init(), so the page reloads. Try the checkout with the stack context manager: its timers lose the parent span.
    
          
    
            
            
            
          
    
          
          
    The call of this page
    
          
    
        
    
        
    
          
    Two IDs
    
          
    Each span and log record of this tab has the session ID. Each load gets a new instance ID, so a reload is a new series of metrics.
    
          
    
            
    session.id
    
            
    service.instance.id
    
          
    
          
    
          
    What init() starts
    
          
      
            
    • Spans for the document load, fetch, XHR, clicks and long tasks.
      • 
            
    • The W3C trace context on requests to the origin of the page.
      • 
            
    • A batch of spans, a batch of logs and a periodic metrics reader.
      • 
            
    • A flush each time the page goes to hidden or frozen.
      • 
          
    
        
    
      
    

      
    
        
    How this page works
    
        
      
          
    1. Before init(), the page replaces fetch with a small stub.
      2. 
          
    2. The fetch instrumentation of the package wraps that stub. The OTLP exporters call the stub directly, so an export makes no span.
      3. 
          
    3. The stub keeps each POST to https://collector.invalid, and it answers 200. That host name does not resolve.
      4. 
          
    4. The page decodes the body of each POST, and it draws the result. The console has the same records in otelLab.exports().
      5. 
        
    
        
    The button Fetch a file gets a real file from this site. The button Call another origin gets its answer from the stub, and the page tells you so.
    
        
    Faro stays off on this page. init() starts Faro only with faroCollectorUrl, and Faro has its own tracing. This page leaves it out, so each span shows once.
    
        
    Install
    
        
    
          
    pnpm add @mark1russell7/otel-ts