New tracing product page (#11607)

* update defs * add tracing section * Update docs/product/tracing/index.mdx * Update docs/product/tracing/index.mdx * Update docs/product/tracing/index.mdx * Update docs/product/tracing/index.mdx * Update docs/product/tracing/index.mdx * Update docs/product/tracing/index.mdx * Update docs/product/tracing/index.mdx * Update docs/product/tracing/index.mdx * Update docs/product/tracing/index.mdx * Update docs/product/tracing/index.mdx * Update docs/product/tracing/index.mdx * Update docs/product/tracing/index.mdx * Update docs/product/tracing/index.mdx * Update docs/product/tracing/index.mdx * Update docs/product/tracing/index.mdx * Update docs/product/tracing/index.mdx * Update docs/product/tracing/index.mdx * Update docs/product/tracing/index.mdx * add images * Update docs/product/tracing/index.mdx Co-authored-by: Alex Krawiec <[email protected]> * Update docs/product/tracing/index.mdx Co-authored-by: Alex Krawiec <[email protected]> * Update docs/product/tracing/index.mdx * Update docs/product/tracing/index.mdx * Update docs/product/tracing/index.mdx * Update docs/product/tracing/index.mdx * Update docs/product/tracing/index.mdx --------- Co-authored-by: Alex Krawiec <[email protected]>
getsentry · Oct 30, 2024 · fe05be6 · fe05be6
1 parent e9b0074
commit fe05be6
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 0 deletions.
diff --git a/docs/product/tracing/img/Performance-page.png b/docs/product/tracing/img/Performance-page.png
diff --git a/docs/product/tracing/img/The-anatomy-of-a-trace.png b/docs/product/tracing/img/The-anatomy-of-a-trace.png
diff --git a/docs/product/tracing/img/Trace-view-page.png b/docs/product/tracing/img/Trace-view-page.png
diff --git a/docs/product/tracing/img/Traces-details-page.png b/docs/product/tracing/img/Traces-details-page.png
diff --git a/docs/product/tracing/img/Traces-page.png b/docs/product/tracing/img/Traces-page.png
diff --git a/docs/product/tracing/index.mdx b/docs/product/tracing/index.mdx
@@ -0,0 +1,52 @@
+---
+title: Tracing
+sidebar_order: 20
+description: "Learn how instrumenting tracing for both your frontend and backend can help identify and debug application performance issues. Distributed tracing will allow you to see the impact of errors across your full stack and microservices."
+---
+
+## What's Tracing?
+
+Tracing is the process of capturing the timing and flow of requests and operations as they happen in your application. It's a powerful debugging tool, helping you identify which link in a sequence of events may be causing a problem, such as slow performance.
+
+![An illustrated image of the anatomy of a trace, showing 8 span blocks cascading in a waterfall pattern.](./img/The-anatomy-of-a-trace.png)
+
+### What's Distributed Tracing?
+
+Distributed tracing provides a unified view of how a single request moves from the frontend to the backend and beyond. This is particularly useful in modern applications, which are often composed of multiple separate services working together. To get a distributed view of your application, instrument Sentry in both your frontend and your backend.
+
+With distributed tracing, you can identify performance bottlenecks that are affecting your application no matter where in your application's workflow they occur. You can then use Sentry tools such as the [Trace Explorer](/product/explore/traces/) or [Trace View](/concepts/key-terms/tracing/trace-view/) page to dig deeper and find the root cause of the problem. Distributed tracing is particularly helpful for identifying problems in production that you can't debug using console logs, such as race conditions, [N+1 queries](/product/issues/issue-details/performance-issues/n-one-queries/), and [caching issues](/product/insights/caches/).
+
+### What's a Trace?
+
+A trace is a record of a series of connected events and operations coming from your application. Each trace has a string of globally unique characters called a trace ID that's passed between frontend and backend services. The trace ID connects all the actions that take place, starting from the moment a user performs an action on the frontend, all the way through to the actions this triggers across your application and services. Each trace is composed of multiple spans.
+
+### What's a Span?
+A span is a named, timed operation that represents a part of the application workflow. The data captured for each span provides granular insights into specific tasks, like API requests or database queries. Multiple spans are pieced together to create a trace, providing a comprehensive overview of how your application works. This makes it easier to troubleshoot and analyze performance issues.
+
+### What's a Transaction?
+
+In Sentry, a "transaction" is a specific unit that represents any event that your application sends to Sentry, like loading a web page or processing an API call. Each transaction is made up of one or more spans. Transactions have a unique transaction ID and include the associated child spans that capture the operation’s entire process from start to finish.
+
+## How to Use Tracing in Sentry
+
+If you instrument Sentry for a single part of your app (just the frontend for example), looking at a trace will provide useful context for debugging issues within that app or service. But to get the most out of tracing in Sentry, you'll need to instrument the frontend, the backend, and any services in-between with Sentry's SDK. Once this is done, there are several places where you can view and interact with tracing data:
+
+### Traces to Trace View
+
+You can view all the traces in your organization by going to the [Traces](https://sentry.io/orgredirect/organizations/:orgslug/traces/) page in Sentry. You'll see a chart and a list of traces and be able to see at-a-glance how long each trace took to complete and the number of spans it contains.
+
+![A view of the Sentry Traces page showing traces and spans](./img/Traces-page.png)
+
+If you want more information, click on any trace ID. This will take you to the [Trace View](/concepts/key-terms/tracing/trace-view/) page, which provides a more detailed view of the trace and its spans. Here, you'll see a waterfall view of the spans in the trace, which will show you how much time each service and operation took to complete, and may give you an indicator of where a problem may be coming from. 
+
+![A detailed view of the Senty Traces page showing an expaned trace and spans](./img/Trace-view-page.png)
+
+Alternatively, you can use the search bar to look for spans by name, project, or other criteria. You can also use the tags section to filter spans by specific tags. Learn more about the Sentry [Trace Explorer](/product/explore/traces/).
+
+![An illustrated image of the anatomy of a trace, showing 8 span blocks cascading in a waterfall pattern.](./img/Traces-details-page.png)
+
+### Performance to Trace View
+
+Depending on the size and volume of your app, you may have a lot of traces to sort through. The [Performance](https://sentry.io/orgredirect/organizations/:orgslug/performance/) page in Sentry is a good place to get a high-level, aggregated view of your application's performance and focus in on the traces you care about. You'll see a list of transactions for specific pages, endpoints and parts of your application. Clicking on the transaction ID will take you to the Trace View page for that transaction. Learn more about using Sentry's [Performance Monitoring](/product/performance/).
+
+![An overview of the Performance page in Sentry.](./img/Performance-page.png)