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

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

提交即表示您确认您已阅读并同意我们的<a href="/cn/legal/elastic-cloud-account-terms" target="_self">服务条款</a>，并且您同意通过您提供的上述联系方式接收<a href="/cn/legal/privacy-statement#how-we-use-the-information" target="_self">所选的通信</a>。如需了解更多信息，或想随时取消订阅，请参阅 <a href="/cn/legal/privacy-statement/" target="_self">Elastic 的隐私声明</a>。

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

提交即表示您确认您已阅读并同意我们的<a href="/cn/legal/serverless-preview-terms" target="_self">服务条款</a>，并且 Elastic 可以使用您提供的上述详细信息与您联系，以向您介绍我们相关的<a href="/cn/legal/privacy-statement#how-we-use-the-information" target="_self">产品和服务</a>。如需了解更多信息，或想随时取消订阅，请参阅 <a href="/cn/legal/privacy-statement/" target="_self">Elastic 的隐私声明</a>。

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

提交即表示您同意 <a href="/cn/agreements/global/cloud-services-monthly" rel="nofollow">Elastic Cloud 服务条款</a>。我们将会按照 <a href="/cn/legal/privacy-statement">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

提交即表示您确认您已阅读并同意我们的<a href="/cn/legal/terms-of-use" target="_self">服务条款</a>，并且 Elastic 可以使用您提供的上述详细信息与您联系，以向您介绍我们相关的<a href="/cn/legal/privacy-statement#how-we-use-the-information" target="_self">产品和服务</a>。如需了解更多信息，或想随时取消订阅，请参阅 <a href="/cn/legal/privacy-statement/" target="_self">Elastic 的隐私声明</a>。

Explore similar demos

Overview

Speakers

Close

See more insights

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.

本页内容尚不支持所选语言。Elastic 正在不断努力，以实现对多种语言内容的支持。感谢您在此期间给予的耐心与陪伴！

Author

Articles by

Learn more

Watch now (no PT)

Watch now

See all top stories

All (no PT translation)

Contact information

Press Release

Share on Reddit

Share this story

Share by Email

Thank you for your interest!

Contact Info

Follow us on Youtube

Load More

Share on LinkedIn

Follow us on LinkedIn

Search Integrations

All Solutions

Video for

Follow us on Twitter

See when this webinar starts in my time zone

查看本次网络研讨会在我的时区的开始时间

Register to Watch

Register now

See All Posts

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

无法实时参加？注册后我们会给您发送录像。您还将收到相关内容的电子邮件。

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