Update performance-monitoring.mdx (#13001)

* Update performance-monitoring.mdx

new version to include arcades, reflect the new explore UX, and the removal of performance page.

* resolved comments from alex

* fixed placeholder title

* added h2 to fix ToC

Author: pry0rity

docs/product/sentry-basics/performance-monitoring.mdx

@@ -1,54 +1,81 @@
 ---
 title: "Performance Monitoring"
-sidebar_order: 50
-description: "With performance monitoring, you can track, analyze, and debug your application's performance. Sentry helps you identify performance opportunities and trace issues back to poorly performing code."
+sidebar_order: 1
+description: "Understand and monitor how your application performs in production. Track key metrics, analyze bottlenecks, and resolve performance issues with distributed tracing, detailed transaction data, and automated issue detection."
 ---
 
 <Include name="performance-moving.mdx" />
 
-With performance monitoring, Sentry tracks application performance, measuring metrics like throughput and latency, and displaying the impact of errors across multiple services. Sentry captures [distributed traces](/product/sentry-basics/tracing/distributed-tracing/) consisting of [transactions](/product/insights/overview/transaction-summary/#what-is-a-transaction) and spans to measure individual services and operations within those services.
+In many tools, Performance Monitoring is just about tracking a few key metrics on your web pages. Sentry takes a different approach. By setting up [Tracing])(/concepts/key-terms/tracing/), Sentry captures detailed performance data for every transaction in your entire application stack and automatically presents it in a variety of easy-to-use but powerful features so you can rapidly identify and resolve performance issues as they happen - all in one place.
 
 <Alert>
 
-Learn more about traces in the [full Tracing documentation](/product/sentry-basics/tracing/).
+Set up [Distributed Tracing](/product/sentry-basics/tracing/) to enable Performance Monitoring.
 
 </Alert>
 
-The **Performance** page is the main view in [sentry.io](https://sentry.io) where you can search or browse for transaction data. A transaction represents a single instance of an activity you want to measure or track, such as a page load, page navigation, or an asynchronous task. The page displays graphs that visualize transactions or [trends](/product/insights/overview/trends/), as well as a table where you can view relevant transactions and drill down to get more information about them.
+## Ways to Monitor Performance in Sentry
 
-![Insights Overview Page](../../product/insights/img/backend-performance-overview.png)
+Sentry has multiple tools for monitoring performance which are useful for different aspects of your monitoring & debugging needs:
 
-Using the information on this page, you can trace issues back through services (for instance, frontend to backend) to identify poorly performing code. You'll be able to determine whether your application performance is getting better or worse, see if your last release is running more slowly than previous ones, and identify specific services that are slow. Once you've found the cause of the problem, you'll be able to address the specific code that’s degrading performance.
+### 1: Insights: Opinionated views of performance data for each layer of your stack
 
-## Filter Performance Data
+After turning on Distributed Tracing, you'll automatically see a set of [Insights](/product/insights/) pages that give you a high-level view of performance data for each layer of your stack. This is extremely useful for quickly seeing any major performance outliers that need optimization, or tracking potential regressions across time, environments, releases, etc.
 
-The **Performance** page provides you with several filter and display options so that you can focus on the performance data that's most important to you. You can use the project, environment, and date filters to customize the information displayed on the page, including what's shown in the [widgets](/product/insights/overview/filters-display/#widgets) and [transactions table](/product/insights/overview/filters-display/#transaction-table). You can also search to find and filter for the specific transactions you want to investigate.
+- [**Frontend Insights**](/product/insights/frontend) givews you an easy but powerful way to\ drill into common frontend performance issues with things like Core Web Vitals, as well as transaction performance with things like duration, and error rate.
+- [**Backend Insights**](/product/insights/backend/) show your backend transaction performance, across things like database queries, external API calls, caches, queues, crons, and more.
+- [**Mobile Insights**](/product/insights/mobile/) track vital performance metrics for your mobile apps, including your cold & warm app start times, TTID & TTFD, and time to load or render key screens throughout your app. 
+- [**AI Insights**](/product/insights/ai/) give you a view of your LLM performance. This is currently in beta and only available for certain integrations.
 
-## Analyze Performance Trends
+See the demo video below for a quick tour of the Insights pages:
 
-The [trends view](/product/insights/overview/trends/) allows you to see transactions that have had significant performance changes over time. This view is ideal for insights about transactions with large counts.
+<Arcade src="https://demo.arcade.software/BTvUjriSDjaHiVqPvIFP?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" /><br />
 
-## Investigate Transactions
+All accounts have access to the top level insights pages. Upgrading to the [Team plan](https://sentry.io/signup/?original_referrer=https%3A%2F%2Fwww.google.com%2F&period=annual&plan=am1_team_auf&trial) or higher gets you access to more dedicated insights pages for common monitoring use cases.
 
-When you find a transaction of interest, you can investigate further by going to its [Transaction Summary page](/product/insights/overview/transaction-summary). Every transaction has a summary view that gives you a better understanding of its overall health. With this view, you'll find graphs, instances of these events, stats, facet maps, related errors, and more.
+### 2: Performance Issues: Automatically identify full-stack bottlenecks
 
-The summary page for Frontend transactions has a "Web Vitals" tab, where you can see a detailed view of the [Web Vitals](/product/insights/web-vitals/) associated with the transaction. You can also access a **Transaction Summary** page from the transactions table on the **Performance** page.
+Alongside typical [error issues](/product/issues/issue-details/error-issues/), Sentry will automatically detect common performance issues and group them into [performance issues](/product/issues/issue-details/performance-issues/). For instance: 
+- N+1 Query & API call issues that indicate unnecessary round-trips to your backend
+- Consecutive DB Queries or HTTP Requests that could be batched for better performance
+- Database queries or File I/O running on the main thread, which can block the UI thread and cause performance issues
+- And many more documented [here](/product/issues/performance-issues/). 
 
-## Explore Performance Metrics
 
-There are several types of [metrics](/product/insights/overview/metrics/) that you can visualize in the graphs, such as Apdex, Transactions Per Minute, P50 Duration, and User Misery to get a full understanding of how your software is performing.
+<Arcade src="https://demo.arcade.software/t8kZ9OeigLNrH3fLynIu?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" /> <br />
 
-## Triage Performance Issues
+### 3: Trace Explorer: Find root causes & common patterns for performance issues
 
-<Alert>
+While Performance Issues and Insights give you a high-level view of performance data, the [Trace Explorer](/product/explore/traces/) lets you slice and dice all your performance data by any attribute. This is an extremely powerful tool for finding root causes and common patterns for performance regressions or potential optimizations. For instance, you can find the p95 duration of all spans on the `GET /users/:id` endpoint, or find all pages slowing down because of a particular middleware routing. 
+
+The newest version of the Trace Explorer also lets you quickly calculate metrics based on your span data, like p50, p95, and p99 durations, and then group them by any attribute. This lets you quickly see if there's specific endpoints, versions, user groups, etc. that are performing poorly. For a more thorough dive into how you can use the new Trace Explorer and Span Metrics, take a look at our most recent [blog post](https://blog.sentry.io/find-and-fix-performance-bottlenecks-with-sentrys-trace-explorer/). 
 
-**Issue and Event Quotas**
+<Alert>
 
-Your quota is consumed by events or traces, not issues. Performance issues are generated from your accepted transactions, which **doesn't** directly impact your quota. Performance transaction events use transactions, which **does** directly impact your quota. Sentry provides tools to control the type and number of error and transaction events that are accepted. Learn more in [Quota Management](/pricing/quotas/manage-transaction-quota).
+This demo shows a [new version](/product/explore/new-trace-explorer/) of the Trace Explorer that is available for all self-serve orgs in the Early Adopter program. Enable the EA flag in your [organization settings](https://sentry.io/orgredirect/settings/:orgslug/) to gain access to Span Metrics, Group By, Create Widgets and Alerts. 
 
 </Alert>
 
-If your application is configured for Performance Monitoring, Sentry will detect common performance problems, and group them into issues just like it does with errors. Performance issues help to surface performance problems in your application and provide a workflow for resolving them. Learn more about [performance issues](/product/issues/issue-details/performance-issues/).
+
+<Arcade src="https://demo.arcade.software/E04YSJpq1w8bpk18Q5Kp" /> <br />
+
+### 4: Metrics, Alerts, and Dashboards: Build custom views of performance data
+
+By default, Sentry automatically tracks a set of [performance metrics](/platforms/javascript/tracing/span-metrics/performance-metrics/) for every trace. These are used to pupulate the Insights dashboards, but you can also use them to build custom [dashboards](/product/dashboards/) and [alerts](/product/alerts/).
+
+Opting into the [Early Adopter](https://sentry.io/orgredirect/settings/:orgslug/) program for the Trace Explorer also gives you access to the new [Span Metrics](/product/explore/new-trace-explorer/#span-metrics/) feature, which lets you calculate custom metrics based on your span data. This is extremely useful for building dashboards and alerts that are underpinned by real performance tracing data, so you can quickly debug performance issues. 
+
+## How to set up Performance Monitoring
+
+For basic frontend or backend performance monitoring, just turn on Tracing in your relevant SDK. This will automatically trace every network request and give you a basic set of performance metrics. However, to make sure Sentry is capturing accurate and complete performance data, you need to set up [Distributed Tracing](/product/sentry-basics/distributed-tracing/). NextJS, Laravel, Ruby on Rails and a few others have strong out-of-the-box support for distributed tracing, but for more complex or multi-language applications, you'll need to configure this manually. Learn more about trace propagation [here](/platforms/javascript/tracing/distributed-tracing/). 
+
+## How Performance Monitoring works under the hood
+
+Instead of instrumenting pageloads with specific metrics at set points, ie. `onLoad`, `onUnload`, `onError`, etc., Sentry automatically traces every network request, file I/O, and other operation in your application. This lets you see the performance impact of every request, and any errors that occur during that request. 
+
+These performance metrics are sent by the Sentry SDK as part of each [Span](/concepts/key-terms/tracing/#whats-a-span), which is the smallest unit of work in a [Trace](/concepts/key-terms/tracing/). Traces are assembled in Sentry's backend, and then extrapolated to populate all the tools we have for monitoring performance. 
+
+This differs substantially from other performance monitoring tools that only capture metrics at specific points in your application. Instead, all your holistic metrics are backed up by the raw tracing data, so you can drill into any specific request or operation to get a detailed view of its performance. 
 
 ## Learn More