Custom to Span metrics updates

docs/product/explore/metrics/index.mdx

@@ -12,17 +12,6 @@ Sentry metrics are numerical values that allow you to pinpoint and solve issues
 
 ![Metrics UI](./img/Index.png)
 
-## Metric Types
-
-Metrics at Sentry come in different flavors, in order to help you track your data in the most efficient and cost-effective way. The metric types we currently support are:
-
-- **Counters:** Tracks a value that can only be incremented (for example, button clicks)
-- **Distributions:** Tracks a list of values which can be aggregated over time like `max`, `min`, `avg` (for example, page load times)
-- **Gauges:** Tracks a value that can go up or down (for example, available disk space, memory used)
-- **Sets:** Tracks a set of values on which can be aggregations over time such as `count_unique` (for example, number of unique users)
-
-Each metric also needs to have a unit associated with it, so that you know what you're dealing with. Examples of units are seconds, milliseconds, bytes, or even potatoes if you like.
-
 ## Augmenting Metrics with Tags
 
 Metrics are powerful on their own, but you can enrich them further by adding dimensions in the form of Tags. Metrics can be categorized, organized, and filtered based on these different dimensions, providing more granularity and flexibility in analyzing and querying your data.

docs/product/explore/metrics/metrics-examples.mdx

@@ -4,252 +4,202 @@ sidebar_order: 18
 description: "Get some inspiration by browsing through example use cases for custom metrics."
 ---
 
-If you're not sure where to start, here are a few examples of how you can use custom metrics.
+If you're not sure where to start, here are a few examples of how you can configure spans in order to extract span metrics.
+
+<Alert title="Note" level="info">
+Keep in mind that metrics need to configured in the UI before they can be seen in the Metrics Explorer.
+Go to [Set Up and Configure](https://develop.sentry.dev/product/explore/metrics/metrics-set-up/) to see how metrics can be configured in the UI.
+</Alert>
+
 
 ## Frontend Examples
 
 <details open>
  <summary>Count button clicks on subpages</summary>
 
- * Metric type: `counter`
+ * Aggregation: `count`
  * Example JavaScript code:
 
  ```JavaScript
- Sentry.metrics.increment("button_click", 1, {
- tags: { browser: "Firefox", subpage: "signup" }
- });
+ Sentry.startSpan({ name: "mySpan"}, (span) => {
+ span.setAttributes({
+  button_click: 1,
+  browser: "Firefox",
+  subpage: "signup",
+ });
+ }
  ```
+
 </details>
 
 <details>
  <summary>Track number of user signups</summary>
 
- * Metric type: `counter`
+ * Aggregation: `count`
  * Example JavaScript code:
 
  ```JavaScript
- Sentry.metrics.increment("signups", 1, {
-  tags: { plan_type: “freemium”, region: "EU" }
+ const span = Sentry.startInactiveSpan({name: "mySpan"});
+  span.setAttributes({
+  signups: 1,
+  plan_type: "freemium",
+  region: "EU",
  });
+ span.end()
  ```
 </details>
 
 <details>
  <summary>Measure UX improvement to signup form</summary>
 
- * Metric type: `distribution`
- * Example JavaScript code:
-
- ```JavaScript
- Sentry.metrics.distribution("login.time_to_finish_form", 14.3, {
-  tags: { subpage: “signup” },
-  unit: “second”
- });
- ```
-</details>
-
-<details>
- <summary>Track the loading time for a component</summary>
-
- * Metric type: `distribution`
+ * Aggregation: `p90`
  * Example JavaScript code:
 
  ```JavaScript
- Sentry.metrics.distribution("component_load_time", 15.0, {
-  tags: { type: "important" },
-  unit: "millisecond"
- });
- ```
-</details>
 
-<details>
- <summary>Track API request payloads</summary>
-
- * Metric type: `distribution`
- * Example JavaScript code:
-
- ```JavaScript
- Sentry.metrics.distribution("api_request_payload", 136.3, {
-  tags: { api_name: “maps_provider”, subpage: “signup” },
-  unit: “kilobyte”
- });
+ Sentry.startSpan({ name: "mySpan"}, (span) => {
+ span.setAttributes({
+  login.time_to_finish_form: 14.3,
+  subpage: "signup",
+ });
+ }
  ```
 </details>
 
 <details>
  <summary>Count concurrent users in application</summary>
 
- * Metric type: `gauge`
+ * Aggregation: `avg`
  * Example JavaScript code:
 
  ```JavaScript
- Sentry.metrics.gauge("concurrent_users", 10, {
-  tags: { browser: "Firefox" }
- });
- ```
-</details>
-
-<details>
- <summary>Track the number of items in a shopping cart</summary>
-
- * Metric type: `gauge`
- * Example JavaScript code:
-
- ```JavaScript
- Sentry.metrics.gauge("shopping_cart_item_count", itemCount, {
-  tags: { platform: "web" }
- });
+ Sentry.startSpan({ name: "mySpan"}, (span) => {
+  span.setAttributes({
+  concurrent_users: 10,
+  browser: "firefox",
+  });
+ }
  ```
 </details>
 
 <details>
  <summary>Count the unique number of users on a page</summary>
 
- * Metric type: `set`
+ * Aggregation: `count_unique`
  * Example JavaScript code:
 
  ```JavaScript
- Sentry.metrics.set("user_view", "jane", {
-  tags: {"page": "/home" }
- });
+ Sentry.startSpan({ name: "mySpan"}, (span) => {
+  span.setAttributes({
+  user_view: "jane",
+  page: "home",
+  });
+ }
  ```
 </details>
 
-<details>
- <summary>Count unique number of user sessions</summary>
-
- * Metric type: `set`
- * Example JavaScript code:
-
- ```JavaScript
- Sentry.metrics.set("unique_active_sessions", sessionId, {
-  tags: { platform: "mobile" }
- });
- ```
-</details>
-
-
 
 ## Backend Examples
 
 <details open>
  <summary>Count of API calls of a 3rd party API</summary>
 
- * Metric type: `counter`
+ * Aggregation: `count`
  * Example Python code:
 
  ```Python
- sentry_sdk.metrics.incr(
-  key = "api_calls",
-  value = 1,
-  tags = {"api": "third_party"}
- )
+ with sentry_sdk.start_span("my_span"):
+  span.set_tag("api", "third_party")
+  span.set_attribute("api_calls", 1)
  ```
 </details>
 
 <details>
  <summary>Count of jobs executed per worker</summary>
 
- * Metric type: `counter`
+ * Aggregation: `count`
  * Example Python code:
 
  ```Python
- sentry_sdk.metrics.incr(
-  key = ”external_api_calls”,
-  value = 1,
-  tags = {”worker_id”: “485ea324-003d-4f30-a0f9”, “type”: ”standard”}
- )
+ with sentry_sdk.start_span("my_span"):
+  span.set_tag("worker_id", "485ea324-003d-4f30-a0f9")
+  span.set_tag("type", "standard")
+  span.set_attribute("external_api_calls", 1)
  ```
 </details>
 
 <details>
  <summary>Processing time for a task</summary>
 
- * Metric type: `distribution`
+ * Aggregation: `p99`
  * Example Python code:
 
  ```Python
- sentry_sdk.metrics.distribution(
-  key = ”processing_time”,
-  value = 0.002,
-  unit = ”second”,
-  tags = {”task”: “example_task”}
- )
+ with sentry_sdk.start_span("my_span"):
+  span.set_tag("task", “example_task")
+  span.set_attribute("processing_time", 0.002)
  ```
 </details>
 
 <details>
  <summary>Track ML model confidence during inference</summary>
 
- * Metric type: `distribution`
+ * Aggregation: `p50`
  * Example Python code:
 
  ```Python
- sentry_sdk.metrics.distribution(
- key = ”model_confidence”,
- value = 0.72,
- unit = ”ratio”,
- tags = {”model_id”: “a294c108”}
- )
+ with sentry_sdk.start_span("model_confidence"):
+  span.set_tag("model_id", “a294c108")
+  span.set_attribute("model_confidence", 0.72)
  ```
 </details>
 
 <details>
  <summary>Track CPU usage over time</summary>
 
- * Metric type: `gauge`
+ * Aggregation: `max`
  * Example Python code:
 
  ```Python
- sentry_sdk.metrics.gauge(
-  key = ”cpu_usage”,
-  value = 94,
-  unit = ”percent”
- )
+ with sentry_sdk.start_span("my_span"):
+  span.set_attribute("cpu_usage", 94)
  ```
 </details>
 
 <details>
  <summary>Track cache hit ratio</summary>
 
- * Metric type: `gauge`
+ * Aggregation: `avg`
  * Example Python code:
 
  ```Python
- sentry_sdk.metrics.gauge(
-  key = ”cache_hit_ratio”,
-  value = 85,
-  unit = ”percent”
- )
+ with sentry_sdk.start_span("my_span"):
+  span.set_attribute("cache_hit_ratio", 85)
  ```
 </details>
 
 <details>
  <summary>Count unique server ids running a software version</summary>
 
- * Metric type: `set`
+ * Aggregation: `count_unique`
  * Example Python code:
 
  ```Python
- sentry_sdk.metrics.set(
-  key = ”server_ids_running”,
-  value = “server_id”,
-  tags = {"software_version": software_version}
- )
+ with sentry_sdk.start_span("my_span"):
+  span.set_tag("software_version", software_version)
+  span.set_attribute("server_ids_running", server_id)
  ```
 </details>
 
 <details>
  <summary>Track number of unique DB queries executed</summary>
 
- * Metric type: `set`
+ * Aggregation: `count_unique`
  * Example Python code:
 
  ```Python
- sentry_sdk.metrics.set(
-  key = ”db_queries”,
-  value = query,
-  tags = {"query_type": "read"}
- )
+ with sentry_sdk.start_span("my_span"):
+  span.set_tag("query_type", "read")
+  span.set_attribute("db_queries", query)
  ```
 </details>