Metrics examples with collapsable list (#10000)

Added Examples Page with use cases for Metrics.

docs/product/metrics/metrics-examples.mdx

@@ -0,0 +1,254 @@
+---
+title: "Example Use Cases"
+sidebar_order: 18
+description: "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.
+
+## Frontend Examples
+
+<details open>
+  <summary>Count button clicks on subpages</summary>
+
+  * Metric type: `counter`
+  * Example JavaScript code: 
+
+  ```JavaScript
+  Sentry.metrics.increment("button_click", 1, {
+    tags: { browser: "Firefox", subpage: "signup" }
+  });
+  ```
+</details>
+
+<details>
+  <summary>Track number of user signups</summary>
+
+  * Metric type: `counter`
+  * Example JavaScript code: 
+
+  ```JavaScript
+  Sentry.metrics.increment("signups", 1, {
+    tags: { plan_type: “freemium”, region: "EU" }
+  });
+  ```
+</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`
+  * 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”
+  });
+  ```
+</details>
+
+<details>
+  <summary>Count concurrent users in application</summary>
+
+  * Metric type: `gauge`
+  * 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" }
+  });
+  ```
+</details>
+
+<details>
+  <summary>Count the unique number of users on a page</summary>
+
+  * Metric type: `set`
+  * Example JavaScript code: 
+
+  ```JavaScript
+  Sentry.metrics.set("user_view", "jane", {
+   tags: {"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`
+  * Example Python code: 
+
+  ```Python
+  sentry_sdk.metrics.incr(
+   key = "api_calls",
+   value = 1,
+   tags = {"api": "third_party"}
+  )
+  ```
+</details>
+
+<details>
+  <summary>Count of jobs executed per worker</summary>
+
+  * Metric type: `counter`
+  * Example Python code: 
+
+  ```Python
+  sentry_sdk.metrics.incr(
+   key = ”external_api_calls”,
+   value = 1,
+   tags = {”worker_id”: “485ea324-003d-4f30-a0f9”, “type”: ”standard”}
+  )
+  ```
+</details>
+
+<details>
+  <summary>Processing time for a task</summary>
+
+  * Metric type: `distribution`
+  * Example Python code: 
+
+  ```Python
+  sentry_sdk.metrics.distribution(
+   key = ”processing_time”,
+   value = 0.002,
+   unit = ”second”,
+   tags = {”task”: “example_task”}
+  )
+  ```
+</details>
+
+<details>
+  <summary>Track ML model confidence during inference</summary>
+
+  * Metric type: `distribution`
+  * Example Python code: 
+
+  ```Python
+  sentry_sdk.metrics.distribution(
+   key = ”model_confidence”,
+   value = 0.72,
+   unit = ”ratio”,
+   tags = {”model_id”: “a294c108”}
+  )
+  ```
+</details>
+
+<details>
+  <summary>Track CPU usage over time</summary>
+
+  * Metric type: `gauge`
+  * Example Python code: 
+
+  ```Python
+  sentry_sdk.metrics.gauge(
+   key=”cpu_usage”,
+   value=94,
+   unit=”percent”
+  )
+  ```
+</details>
+
+<details>
+  <summary>Track cache hit ratio</summary>
+
+  * Metric type: `gauge`
+  * Example Python code: 
+
+  ```Python
+  sentry_sdk.metrics.gauge(
+   key=”cache_hit_ratio”,
+   value=85,
+   unit=”percent”
+  )
+  ```
+</details>
+
+<details>
+  <summary>Count unique server ids running a software version</summary>
+
+  * Metric type: `set`
+  * Example Python code: 
+
+  ```Python
+  sentry_sdk.metrics.set(
+   key=”server_ids_running”,
+   value=“server_id”,
+   tags={"software_version": software_version}
+  )
+  ```
+</details>
+
+<details>
+  <summary>Track number of unique DB queries executed</summary>
+
+  * Metric type: `set`
+  * Example Python code: 
+
+  ```Python
+  sentry_sdk.metrics.set(
+   key=”db_queries”,
+   value=query,
+  tags={"query_type": "read"}
+  )
+  ```
+</details>