What is Traceparent and Request-id Http Request Headers? And why/how does a raw fetch automatically add these while Angular's HttpClient doesn't?

[BrilliantBrilliant is verified member.]

What Are Traceparent and Request-Id HTTP Headers?

1. Traceparent Header:

Part of the W3C Trace Context standard for distributed tracing.

Used to propagate tracing information (e.g., trace IDs, span IDs, and sampling decisions) across services in a distributed system.

Example value:

00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01



Version: 00



Trace ID: 4bf92f3577b34da6a3ce929d0e0e4736



Span ID: 00f067aa0ba902b7



Flags: 01 (indicating sampling decision)

Purpose: Helps correlate logs, traces, and metrics across different services for debugging and performance monitoring.


2. Request-Id Header:

A non-standard header commonly used for tracing purposes.

It carries a unique identifier for a specific request.

Example value:

|4bf92f3577b34da6a3ce929d0e0e4736.00f067aa0ba902b7.

Purpose: Provides a simpler identifier to track individual requests without requiring full trace context.




---

Why Do These Headers Appear in a Raw fetch?

The fetch API does not inherently add these headers. However, if you're seeing them in fetch requests, it's likely because:

1. Browser or Environment-Specific Instrumentation:

Some environments (like Azure App Insights or browser extensions) automatically instrument fetch to inject these headers for tracing purposes.

For example, Azure Application Insights automatically adds Request-Id and Traceparent for outgoing requests if its JavaScript SDK is loaded.



2. Tracing Libraries:

If you are using a library like OpenTelemetry or another tracing solution, it might instrument fetch and attach these headers.



3. Custom Middleware or Proxies:

Proxies or middleware (e.g., within a service worker or a Content Delivery Network (CDN)) could modify requests by adding tracing headers.





---

Why Doesn't Angular's HttpClient Add These Automatically?

Angular's HttpClient does not add Traceparent or Request-Id headers by default because:

1. Explicitness:

Angular prioritizes giving developers full control over what headers are sent. Automatically adding these could be unexpected or undesired.



2. No Built-In Instrumentation:

Unlike fetch, Angular's HttpClient does not include out-of-the-box tracing or logging features. This is left to third-party libraries or custom implementations.



3. Cross-Browser/Environment Neutrality:

Angular's HttpClient is designed to work in any browser or environment, so it avoids environment-specific behaviors like automatic tracing headers.





---

How to Add These Headers in Angular's HttpClient?

If you want to add Traceparent or Request-Id headers in Angular's HttpClient, you can use HTTP Interceptors.

Example: Add Tracing Headers

import { Injectable } from '@angular/core';

import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';



@Injectable()

export class TracingInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler) {

    const traceparent = '00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01';

    const requestId = '|4bf92f3577b34da6a3ce929d0e0e4736.00f067aa0ba902b7.';



    const modifiedReq = req.clone({

      setHeaders: {

        Traceparent: traceparent,

        'Request-Id': requestId,

      },

    });



    return next.handle(modifiedReq);

  }

}



Register the Interceptor:



import { HTTP_INTERCEPTORS } from '@angular/common/http';



@NgModule({

  providers: [

    {

      provide: HTTP_INTERCEPTORS,

      useClass: TracingInterceptor,

      multi: true,

    },

  ],

})

export class AppModule {}





---

Conclusion

Traceparent and Request-Id are headers for distributed tracing.

If a raw fetch automatically adds them, it's due to instrumentation (e.g., Azure App Insights, OpenTelemetry, or a browser extension).

Angular’s HttpClient doesn't add them by default because it avoids implicit behavior.

You can manually add them using interceptors for custom or library-based tracing setups.