[Javascript] Manual Instrumentation for cache module (#10099)

* add js manual instrumentation docs

* Update cache-module.mdx

* change order

* update link

* Apply suggestions from code review

Co-authored-by: Liza Mock <liza.mock@sentry.io>

---------

Co-authored-by: Liza Mock <liza.mock@sentry.io>

docs/platforms/javascript/common/performance/instrumentation/custom-instrumentation/cache-module.mdx

@@ -0,0 +1,102 @@
+---
+title: Instrument Caches
+sidebar_order: 1000
+description: "Learn how to manually instrument your code to use Sentry's Cache module. "
+---
+
+A cache can be used to speed up data retrieval, thereby improving application performance. Because instead of getting data from a potentially slow data layer, your application will be getting data from memory (in a best case scenario). Caching can speed up read-heavy workloads for applications like Q&A portals, gaming, media sharing, and social networking.
+
+Sentry offers a [cache-monitring dashboard](https://sentry.io/orgredirect/organizations/:orgslug/performance/caches/) that can be auto-instrumented using Sentry's redis integration (more coming soon).
+
+
+## Manual Instrumentation
+
+If you're using anything other than Sentry's redis integration, you'll need to manually instrument the [Cache Module](<(https://sentry.io/orgredirect/organizations/:orgslug/performance/caches/)>) by following the steps below.
+
+You'll need to create two spans - one indicating that something is being put into the cache, and a second one indicating that something is being fetched from the cache.
+
+Make sure that there's a transaction running when you create the spans. If you're using a web framework those transactions will be created for you automatically. See <PlatformLink to="/performance/">Performance Monitoring</PlatformLink> for more information.
+
+For detailed information about which data can be set, see the [Cache Module Developer Specification](https://develop.sentry.dev/sdk/performance/modules/caches/).
+
+
+
+
+### Initialize Sentry
+
+<PlatformContent includePath="getting-started-config" />
+
+### Add Span When Putting Data Into the Cache
+
+If the cache you’re using isn’t supported by the auto instrumentation mentioned above, you can use the custom instrumentation instructions below to emit cache spans instead:
+
+1. Set the cache value with whatever cache library you happen to be using.
+2. Wrap the part of your application that uses the cached value with `Sentry.startSpan(...)`.
+3. Set the `name` to something descriptive like "Setting auth cache".
+4. Set `op` to `cache.set`.
+5. Set `cache.key` to a string array representing the key(s) you're setting.
+6. Optionally, you can set other attributes such as `cache.item_size`. (See [Cache Module Span Data Conventions](https://develop.sentry.dev/sdk/performance/modules/caches/#span-data) for more information.)
+
+(The steps described above are also documented in the snippet.)
+
+```js
+const key = "myCacheKey123";
+const value = "The value I want to cache.";
+
+Sentry.startSpan(
+  {
+    name: "Setting auth cache",
+    attributes: {
+      "cache.key": [key],
+      "cache.item_size": JSON.stringify(value).length, // Warning: if value is very big this could use lots of memory
+      "network.peer.address": "cache.example.com/supercache",
+      "network.peer.port": 9000,
+    },
+    op: "cache.put",
+  },
+  (span) => {
+    // Set a key in your caching using your custom caching solution
+    my_caching.set(key, value);
+  }
+);
+```
+
+### Add Span When Retrieving Data From the Cache
+
+If the cache you’re using isn’t supported by the auto instrumentation mentioned above, you can use the custom instrumentation instructions below to emit cache spans instead:
+
+1. Get the cached value from whatever cache library you happen to be using.
+2. Wrap the part of your application that fetches from the cache with `Sentry.startSpan(...)`.
+3. Set the `name` to something descriptive like "Getting auth cache".
+4. Set `op` to `cache.get`.
+5. Set `cache.key` to a string array representing the key(s) you're setting.
+6. Set `cache.hit` to a boolean value representing whether the value was successfully fetched from the cache or not.
+7. Optionally, you can set other attributes such as `cache.item_size`. (See [Cache Module Span Data Conventions](https://develop.sentry.dev/sdk/performance/modules/caches/#span-data) for more information.)
+   (The steps described above are also documented in the snippet.)
+
+```js
+const key = "myCacheKey123";
+
+Sentry.startSpan(
+  {
+    name: "Getting auth cache",
+    attributes: {
+      "cache.key": [key],
+      "network.peer.address": "cache.example.com/supercache",
+      "network.peer.port": 9000,
+    },
+    op: "cache.get",
+  },
+  (span) => {
+    // Set a key in your caching using your custom caching solution
+    const value = my_caching.get(key);
+    const cacheHit = Boolean(value);
+    if (cacheHit) {
+      span.setAttribute("cache.item_size", JSON.stringify(value).length, // Warning: if value is very big this could use lots of memory);
+    }
+    span.setAttribute("cache.hit", cacheHit);
+  }
+);
+```
+
+You should now have the right spans in place. Head over to the [Cache dashboard](https://sentry.io/orgredirect/organizations/:orgslug/performance/caches/) to see how your cache is performing.

docs/platforms/javascript/common/performance/instrumentation/requests-module.mdx → docs/platforms/javascript/common/performance/instrumentation/custom-instrumentation/requests-module.mdx

@@ -1,6 +1,6 @@
 ---
-title: Custom Instrumentation for Requests Module
-sidebar_order: 9999
+title: Instrument HTTP Requests
+sidebar_order: 2000
 description: "Learn how to manually instrument your code to use Sentry's Requests module."
 ---
 

docs/platforms/python/performance/instrumentation/custom-instrumentation/caches-module.mdx

@@ -5,19 +5,19 @@ description: "Learn how to manually instrument your code to use Sentry's Caches
 ---
 A cache can be used to speed up data retrieval, thereby improving application performance. Because instead of getting data from a potentially slow data layer, your application will be getting data from memory (in a best case scenario). Caching can speed up read-heavy workloads for applications like Q&A portals, gaming, media sharing, and social networking.
 
-Sentry offers a [cache-monitoring dashboard](https://sentry.io/orgredirect/organizations/:orgslug/performance/cache/) that can be auto-instrumented for popular Python caching setups (like <PlatformLink to="/integrations/django/">Django</PlatformLink>, <PlatformLink to="/integrations/redis/">Redis</PlatformLink>, and memcached (coming soon)).
+Sentry offers a [cache-monitoring dashboard](https://sentry.io/orgredirect/organizations/:orgslug/performance/caches/) that can be auto-instrumented for popular Python caching setups (like <PlatformLink to="/integrations/django/">Django</PlatformLink>, <PlatformLink to="/integrations/redis/">Redis</PlatformLink>, and memcached (coming soon)).
 
 If you're using a custom caching solution that doesn't have auto instrumentation, you can manually instrument it and use Sentry to get a look into how your caching solution is performing by following the setup instructions below.
 
 To make it possible for Sentry to give you an overview of your cache performance, you'll need to create two spans - one indicating that something is being put into the cache, and a second one indicating that something is being fetched from the cache.
 
 Make sure that there's a transaction running when you create the spans. If you're using a web framework those transactions will be created for you automatically. See <PlatformLink to="/performance/">Performance Monitoring</PlatformLink> for more information.
 
-For detailed information about which data can be set, see the [Cache Module Developer Specification](https://develop.sentry.dev/sdk/performance/modules/cache/).
+For detailed information about which data can be set, see the [Cache Module Developer Specification](https://develop.sentry.dev/sdk/performance/modules/caches/).
 
 ## Manual Instrumentation
 
-If you're using anything other than <PlatformLink to="/integrations/django/">Django</PlatformLink>, <PlatformLink to="/integrations/redis/">Redis</PlatformLink>,  memcached (comming soon), you'll need to manually instrument the [Cache Module]((https://sentry.io/orgredirect/organizations/:orgslug/performance/cache/)) by following the steps below.
+If you're using anything other than <PlatformLink to="/integrations/django/">Django</PlatformLink>, <PlatformLink to="/integrations/redis/">Redis</PlatformLink>,  memcached (comming soon), you'll need to manually instrument the [Cache Module]((https://sentry.io/orgredirect/organizations/:orgslug/performance/caches/)) by following the steps below.
 
 ### Initialize Sentry
 
@@ -98,4 +98,4 @@ with sentry_sdk.start_span(op="cache.get_item") as span:
         span.set_data("cache.hit", False)
 ```
 
-You should now have the right spans in place. Head over to [Cache dashboard](https://sentry.io/orgredirect/organizations/:orgslug/performance/cache/) to see how your cache is performing.
+You should now have the right spans in place. Head over to the [Cache dashboard](https://sentry.io/orgredirect/organizations/:orgslug/performance/caches/) to see how your cache is performing.