The TraceContext specification was recently endorsed as a W3C recommendation. Learn more about why we use it in Elastic APM.

Distributed tracing remains one of the most important features of any tracing system. Nearly a year ago, we <a href="https://www.elastic.co/blog/elastic-apm-6-6-0-released">announced Elastic APM distributed tracing</a>, let’s take a look at how this useful feature works behind the scenes.&nbsp;
Over the past few years, many applications have adopted microservice architecture. Each of the services in a microservice architecture can have their own instrumentation to provide observability into the service. However, since all of these services work together to fulfill a request, it is often desirable to look at the trace as a whole, this is known as distributed tracing. But how does a tracing system provide a unified trace that consists of multiple services running on different machines? The answer is context propagation.
 <h2>The need for context propagation</h2>In order to achieve distributed tracing, each individual service needs to be able to communicate with upstream services and provide information that uniquely identifies the current trace. This is known as context propagation. APM providers, for the most part, have created their own context propagation mechanisms. However, there are a number of benefits with adopting one unified format of context propagation:
<ul>
	<li>Multiple APM vendors can be used to monitor the same microservice architecture without losing observability.</li>
	<li>Network software (proxies, load balancers, etc.) can automatically correlate logs with the current trace and make sure the context is propagated properly.</li>
	<li>Libraries and frameworks can recognize the context propagation mechanism and facilitate capturing different parts of a trace.</li>
	<li>Third-party API providers can provide the context information to their users for further investigation.</li>
	<li>Web browsers can expose the trace context to be used by frontend applications.</li>
</ul>These benefits and many others, motivated the W3C TraceContext working group to define a unified standard for context propagation which has been adopted by many of the APM vendors and libraries.
 <h2>W3C TraceContext</h2>The <a href="https://www.w3.org/TR/trace-context/">TraceContext specification</a> defines a format for the propagation of the trace context. The standard defines two main HTTP headers, namely <code>traceparent</code> and <code>tracestate</code>. The <code>tracestate</code> header can be used to propagate vendor-specific information. The <code>traceparent</code> header is enough to identify a trace within a system. It looks something like:
<pre class="prettyprint">traceparent: 00-286ac3ad697892c406528f13c82e0ce1-16a900d6effd6b38-01
</pre>The header value consists of the following parts (separated by a dash <code>-</code>):
<ul>
	<li>Version</li>
	<li>Trace ID</li>
	<li>Parent ID</li>
	<li>Trace Flags</li>
</ul>By adding the <code>traceparent</code> header to HTTP requests, different components of an application can communicate trace context and report related spans as part of that trace. Once different components of a trace are reported to a central storage, the tracing system can use Trace ID and Parent ID, not only to construct the whole trace but also to show the parent-child relationship between different components. This is usually visualized as a waterfall such as:
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blte2ae531a0605d03e/5e7bbd321cab8108eff54359/elastic-apm-w3c-tracecontext-blog.png" data-sys-asset-uid="blte2ae531a0605d03e" alt="Distributed tracing within Elastic APM" style="display: block; margin: auto;">
The above screenshot is an example waterfall from the Elastic APM trace view. The waterfall contains multiple services (shown in different colors) which contributed to the final response of the original request. Each of the services (instrumented with APM agents) would separately report its internal monitoring of the service. These individual reports are in the form of a collection of spans (individual measurements shown as horizontal bars). Furthermore, the agent would also add the ID of the span that corresponds to an external request to that request in the form of the TraceContext header. Consequently, the upstream service (also instrumented with APM agent) recognizes this header and uses the included trace ID and parent ID to correctly report its own internal monitoring. This process continues until the trace is complete.
 <h2>Elastic APM and TraceContext</h2>Realizing the benefits of adopting W3C TraceContext early on, we at the Elastic APM team, adopted W3C TraceContext as one of the first implementations of the standard. At the time, the specification was in its early stages. Therefore, we decided to implement the standard with a different header name (elastic-apm-traceparent) than the suggested header name. This was done to avoid breaking APM deployments as the standard evolved during its initial phase.&nbsp;
The W3C TraceContext specification <a href="https://www.w3.org/blog/news/archives/8298">recently entered the W3C recommendation status</a>, which means the specification is endorsed by the W3C Advisory Committee. Therefore, we are also taking the final step to be fully compatible with the specification and use the suggested header name. Furthermore, all of our language-specific agents have fully implemented the W3C TraceContext specification. See our <a href="https://www.elastic.co/guide/en/apm/agent/rum-js/5.x/distributed-tracing-guide.html">Distributed tracing guide</a> for more information.
 <h2>Check it out</h2>You can see how your services interact and where they spend their time, discovering bottlenecks, errors, and exceptions, simply by adding a few lines of code to your applications.&nbsp; Get started with Elastic APM by spinning up a <a href="https://www.elastic.co/cloud/elasticsearch-service/signup">free cloud trial</a> or downloading <a href="https://www.elastic.co/downloads/apm">APM server</a> and the free and open <a href="https://www.elastic.co/downloads/">default distribution</a> today.

blog-banner-release-apm.png

screenshot-apm-distributed-tracing-blog.jpg

Elastic APM adopts W3C TraceContext

We’re thrilled to announce that our <a href="https://www.elastic.co/observability/real-user-monitoring" target="_self">Real User Monitoring (RUM)</a> agent for JavaScript is now generally available.<a href="/solutions/apm">Elastic Application Performance Monitoring</a> (APM) is our open source solution to the performance monitoring problem and with the addition of the RUM agent you can now gain insight into the end-user’s experience with your application. Elastic APM also has native support for <a href="https://github.com/elastic/apm-agent-nodejs">Node.js</a>, <a href="https://github.com/elastic/apm-agent-python">Python</a>, <a href="https://github.com/elastic/apm-agent-ruby">Ruby</a>, <a href="https://github.com/elastic/apm-agent-go">Go (beta)</a> and <a href="https://github.com/elastic/apm-agent-java">Java (beta)</a>.Unlike our backend agents which monitor requests and responses, the RUM JS agent monitors the real user experience within your client-side application. You will be able to measure metrics such as "Time to First Byte", domInteractive, and domComplete which helps you discover performance issues within your client-side application as well as issues that relate to the latency of your server-side application.Our RUM JS agent is framework-agnostic so it can be used with any frontend JavaScript application.<h2>How to Instrument your Application</h2>The RUM JS agent will need to report the monitoring data to an APM Server instance, see our documentations on <a href="/guide/en/apm/server/6.4/installing.html">how to install the APM Server</a>. Please note that our RUM endpoint is public facing and therefore it’s not enabled by default, see <a href="/guide/en/apm/server/6.4/rum.html">our guide on how to enable it</a>.Once you have an APM Server running, you can start instrumenting your application with the agent. The RUM agent is designed to be used with any frontend JavaScript application as well as different packaging solutions. Here is an example that uses npm to install the agent:<pre class="prettyprint">npm install elastic-apm-js-base --save </pre>Then you need to initialize the agent:<pre class="prettyprint">import { init as initApm } from 'elastic-apm-js-base' var apm = initApm({ // Set required service name (allowed characters: a-z, A-Z, 0-9, -, _, and space) serviceName: '', // Set custom APM Server URL (default: http://localhost:8200) serverUrl: 'http://localhost:8200', }) </pre>That's it.<h2>What it Does</h2>After initialization the agent will automatically start gathering performance metrics as well as monitoring unhandled errors. Some of the performance metrics include Navigation timing, Resource timing, and XMLHttpRequest instrumentation.You also have the possibility to instrument your application further using <a href="/guide/en/apm/agent/js-base/1.x/custom-transactions.html">our custom transactions API</a>. Furthermore, you can enrich our monitoring data with additional information which will help you identify and debug issues. Please see <a href="/guide/en/apm/agent/js-base/1.x/api.html#apm-set-user-context">user context</a>, <a href="/guide/en/apm/agent/js-base/1.x/api.html#apm-set-custom-context">custom context</a>, and <a href="/guide/en/apm/agent/js-base/1.x/api.html#apm-set-tags">tags</a> to find out more.You can access the monitoring data in Kibana using the discover panel or via our curated APM UI or the customizable dashboards. You can see an overview of how your application is performing, for example here you can see the page load times and transactions per minute:<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt3d95f93fc8fb5fac/5c6c4812e9cab20962928d90/image3.png" data-sys-asset-uid="blt3d95f93fc8fb5fac" alt="page_load_times_transactions_per_minute.png" style="display: block;margin: auto;" data-image="mvsoru6y0ro5"/>You can also look into a transaction group and drill down to its spans:<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt0ba59e988f7aec63/5c6c47ef2b22f9f161d6d356/image1.png" data-sys-asset-uid="blt0ba59e988f7aec63" alt="transaction_group.png" style="display: block;margin: auto;" data-image="fmnnkh6g5c96"/><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt298b5b707fed9afe/5bc43ab478fe8e6b137ed21b/image.png" data-sys-asset-uid="blt298b5b707fed9afe" alt="image.png" style="display: block;margin: auto;" data-image="sgsz638snzm3"/>Notice that the transaction is marked with the important events during the page load, for example, the domInteractive&nbsp;mark is visible in the above screenshot. Moreover, you can use our <a href="/guide/en/apm/agent/js-base/1.x/api.html#transaction-mark">mark</a> api to add your own custom marks to a transaction.<h2>What’s Coming Next</h2>Some of the features we are very excited to provide in the near future include distributed tracing and providing framework-specific information (e.g., route change times) for some of the frontend frameworks such as React, Angular, Vue.js, etc.If you have any questions/comments/feature requests, feel free to reach out to us via our <a href="https://discuss.elastic.co/c/apm">Discuss forum</a> or create an issue in our <a href="https://github.com/elastic/apm-agent-js-base">Github repository</a>. The agent is open source and we do all the development and planning there. You can also fill out <a href="https://goo.gl/forms/nLCXGCvziqalzjlP2">our survey</a> to help us decide on the upcoming features.

elastic_apm_go_banner.jpg

rum_thumb2.png

Elastic APM RUM JS Agent is Generally Available

Start free trial

Blog Footer CTA

Sign up for Elastic Cloud free trial

Hamidreza Jahtalabziabari

The content on this page is not available in the selected language. As Elastic grows globally, we continue to support content in multiple languages.

The content on this page is not available in the selected language.

El contenido de esta página no está disponible en el idioma seleccionado. Elastic está trabajando para garantizar que el contenido esté disponible en varios idiomas. Gracias por tu paciencia mientras trabajamos.

By submitting you acknowledge that you've read and agree to our <a href="/legal/elastic-cloud-account-terms" target="_self">Terms of Service</a>, and you agree to receive the <a href="/legal/privacy-statement#how-we-use-the-information" target="_self">selected communications</a> at the contact details you provided above. See <a href="/legal/privacy-statement/" target="_self">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.

Communication Preferences - ONLY for /communication-preferences

Al enviar, confirma que ha leído y acepta nuestras <a href="/es/legal/elastic-cloud-account-terms" target="_self">Condiciones de servicio</a>, y que acepta recibir las <a href="/es/legal/privacy-statement#how-we-use-the-information" target="_self">comunicaciones seleccionadas</a> en los detalles de contacto que proporcionó anteriormente. Consulte la <a href="/es/legal/privacy-statement/" target="_self">Declaración de privacidad de Elastic</a> para obtener más información o para cancelar su suscripción en cualquier momento.

By submitting you acknowledge that you've read and agree to our <a href="/legal/serverless-preview-terms" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.

Serverless GDPR Text

Al enviar, confirma que ha leído y acepta nuestras <a href="/es/legal/serverless-preview-terms" target="_self">Condiciones de servicio</a>, y que Elastic puede <a href="/es/legal/privacy-statement#how-we-use-the-information" target="_self">ponerse en contacto con usted</a> acerca de nuestros productos y servicios relacionados. Consulte la <a href="/es/legal/privacy-statement/" target="_self">Declaración de privacidad de Elastic</a> para obtener más información o para cancelar su suscripción en cualquier momento.

By submitting you agree to <a href="/agreements/global/cloud-services-monthly" rel="nofollow">Elastic Cloud Terms of Service</a>. Your personal data will be processed in accordance with <a href="/legal/privacy-statement">Elastic's Privacy Statement</a>.

Cloud Trial GDPR Text

Al enviar esta información, aceptas los <a href="/es/agreements/global/cloud-services-monthly" rel="nofollow">Términos de servicio de Elastic</a>. Los datos personales se procesarán de conformidad con la <a href="/es/legal/privacy-statement">declaración de privacidad de Elastic</a>.

By submitting you acknowledge that you've read and agree to our <a href="/legal/terms-of-use" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.

Newsletter GDPR Text

Al enviar, confirma que ha leído y acepta nuestras <a href="/es/legal/terms-of-use" target="_self">Condiciones de servicio</a>, y que Elastic puede <a href="/es/legal/privacy-statement#how-we-use-the-information" target="_self">ponerse en contacto con usted</a> acerca de nuestros productos y servicios relacionados. Consulte la <a href="/es/legal/privacy-statement/" target="_self">Declaración de privacidad de Elastic</a> para obtener más información o para cancelar su suscripción en cualquier momento.

Hosted by

All Solutions

Follow us on Youtube

Watch now (no PT)

Articles by

Share by Email

Filters

All (no PT translation)

Contact information

See when this webinar starts in my time zone

Ver cuándo comienza este webinar en mi zona horaria

Thank you for your interest!

Register to Attend

Small image for

Register to Watch

Continue reading

Featured webinar

What to explore next...

Reset all

Load more press releases

Sign In to Attend

Share

Upcoming webinar

Learn more

Search Integrations

Share on Reddit

Share on Twitter

Share on Facebook

Load more news

View more posts

On-demand webinar

Follow us on Facebook

Author

Press Release

You'll also receive an email with related content.

You'll also receive an email with related content

Además, te enviaremos contenidos relevantes

Print

Contact Info

Overview

Video for

Read less

Register now

Share this story

See All Posts

See all top stories

View next

Can't make it? Register and we'll send you the recording. You'll also receive an email with related content

¿No puedes asistir? Regístrate y te enviaremos la grabación. También recibirás un correo electrónico con contenido relacionado.

Follow us on LinkedIn

Highlights

Explore similar demos

Follow us on Twitter

Share on LinkedIn

Load More

See more insights

Speakers

Close

Thank you for registering. We will send you a confirmation email soon.

Gracias por registrarte. Te enviaremos un correo electrónico de confirmación pronto.

Author

Articles by Hamidreza Jahtalabziabari

Elastic APM adopts W3C TraceContext

Elastic APM RUM JS Agent is Generally Available

Sign up for Elastic Cloud free trial