feat(database): Query sources (#8670)

* Add content for Query Sources
* Convert queries page to mdx

Co-authored-by: vivianyentran <[email protected]>

Author: gggritso

.vscode/settings.json

@@ -7,10 +7,10 @@
 
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "git.ignoreLimitWarning": true,
   "search.exclude": {
-    "**/src/wizard/**": true,
+    "**/src/wizard/**": true
   }
 }

src/docs/product/performance/queries.md renamed to src/docs/product/performance/queries.mdx

@@ -15,9 +15,18 @@ Starting with the [**Queries** page](#queries-page), you get a high-level overvi
 
 The gif below demonstrates how to use performance monitoring for queries.
 
-<div style="position: relative; padding-bottom: calc(48.68055555555556% + 41px); height: 0; width: 100%"><iframe src="https://demo.arcade.software/miaHF3SwPiABh9bZnMoq?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;" title="Performance - Queries - Walkthrough"></iframe></div>
-
-</br>
+<div style="position: relative; padding-bottom: calc(48.68055555555556% + 41px); height: 0; width: 100%">
+  <iframe
+    src="https://demo.arcade.software/miaHF3SwPiABh9bZnMoq?embed"
+    frameborder="0"
+    loading="lazy"
+    webkitallowfullscreen
+    mozallowfullscreen
+    allowfullscreen
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;"
+    title="Performance - Queries - Walkthrough"
+  ></iframe>
+</div>
 
 ## Prerequisites and Limitations
 
@@ -65,9 +74,20 @@ To view more details, click on a query from the table to open its **Query Summar
 
 The gif below provides a detailed walkthrough of the **Queries** page.
 
-<div style="position: relative; padding-bottom: calc(48.68055555555556% + 41px); height: 0; width: 100%"><iframe src="https://demo.arcade.software/v66mxydrZRsNxRgNMYUl?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;" title="Performance - Queries - Queries Page Walkthrough"></iframe></div>
-
-</br>
+<div style="position: relative; padding-bottom: calc(48.68055555555556% + 41px); height: 0; width: 100%">
+  <iframe
+    src="https://demo.arcade.software/v66mxydrZRsNxRgNMYUl?embed"
+    frameborder="0"
+    loading="lazy"
+    webkitallowfullscreen
+    mozallowfullscreen
+    allowfullscreen
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;"
+    title="Performance - Queries - Queries Page Walkthrough"
+  ></iframe>
+</div>
+
+<br />
 
 ### Query Parameterization
 
@@ -84,17 +104,40 @@ You can see the full query by hovering on a truncated description, or clicking i
 
 To open a query's **Query Summary** page, click on the query from either the table in the "Most Time-Consuming Queries" widget on the **Performance** page or the table in the **Queries** page.
 
-At the top of the page, queries per minute, average duration, and time spent are shown for the selected time range. The full query is shown below these metrics, followed by graphs for queries per minute and average duration.
+At the top of the page, queries per minute, average duration, and time spent are shown for the selected time range. The full query is shown below these metrics, followed by graphs for queries per minute and average duration. The query's source in the code is also shown if it is available.
 
 At the bottom, you can find a list of endpoints the query is found in, sorted by the most time your application spent in that span.
 
 If you want to investigate a specific endpoint, click on it to open a sidebar showing some sample events.
 
 The gif below provides a detailed walkthrough of the **Query Summary** page.
 
-<div style="position: relative; padding-bottom: calc(48.68055555555556% + 41px); height: 0; width: 100%"><iframe src="https://demo.arcade.software/MTzviZtIiN7ZCmNFVJg4?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;" title="Performance - Queries - Query Summary Page Walkthrough"></iframe></div>
+<div style="position: relative; padding-bottom: calc(48.68055555555556% + 41px); height: 0; width: 100%">
+  <iframe
+    src="https://demo.arcade.software/MTzviZtIiN7ZCmNFVJg4?embed"
+    frameborder="0"
+    loading="lazy"
+    webkitallowfullscreen
+    mozallowfullscreen
+    allowfullscreen
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;"
+    title="Performance - Queries - Query Summary Page Walkthrough"
+  ></iframe>
+</div>
+
+## Query Sources
+
+<Note>
+
+Query Sources are currently supported in Sentry's [Laravel](/platforms/php/guides/laravel/configuration/laravel-options/) (enabled with the `SENTRY_TRACE_SQL_ORIGIN_ENABLED` option) and [Python](/platforms/python/configuration/options/#enable-db-query-source) (enabled with the `enable-db-query-source` option) SDKs. For Python, Sentry only attaches query sources to queries that are slower than a [configurable threshold](/platforms/python/configuration/options/#db-query-source-threshold-ms) to reduce the performance impact.
 
-</br>
+</Note>
+
+A query's source is the location in your application's code that triggered the query. Sentry automatically determines the query source by examining the stack trace and attaches the source to the query data.
+
+You can see the query's source underneath the query description on the **Query Summary** page, as shown in the image below. You can also find the query's source on the [**Event Details** page](/product/sentry-basics/concepts/tracing/event-detail/) next to other span properties in the span waterfall. If you have a [source code management integration](/product/integrations/source-code-mgmt/) enabled, Sentry will also show a link to open the query's source in the relevant repository.
+
+![Example of Query Source](./query-source-laravel.png)
 
 ## Sample List
 
@@ -112,9 +155,18 @@ From the sample list, you can drill down to specific good, average, or bad examp
 
 The gif below explains how to navigate the sample list.
 
-<div style="position: relative; padding-bottom: calc(48.68055555555556% + 41px); height: 0; width: 100%"><iframe src="https://demo.arcade.software/dr7yesA9RCqfpSyICbmP?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;" title="Performance - Queries - Sample List Walkthrough"></iframe></div>
-
-</br>
+<div style="position: relative; padding-bottom: calc(48.68055555555556% + 41px); height: 0; width: 100%">
+  <iframe
+    src="https://demo.arcade.software/dr7yesA9RCqfpSyICbmP?embed"
+    frameborder="0"
+    loading="lazy"
+    webkitallowfullscreen
+    mozallowfullscreen
+    allowfullscreen
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;"
+    title="Performance - Queries - Sample List Walkthrough"
+  ></iframe>
+</div>
 
 ## What is Time Spent