feat: add availableSince for a reusable availability check

JPeer264 · JPeer264 · commit bdcee0c5e5ac · 2025-11-03T13:10:54.000+01:00
diff --git a/docs/contributing/pages/components.mdx b/docs/contributing/pages/components.mdx
@@ -106,6 +106,33 @@ Attributes:
 
 - `src` (string) - the URL of the Arcade embed
 
+## AvailableSince
+
+Display version availability information in a consistent format. Use this component to indicate when a feature, API, or configuration option became available in an SDK.
+
+<AvailableSince version="10" />
+
+```markdown {tabTitle:Basic Usage}
+<AvailableSince version="10.17.0" />
+```
+
+Attributes:
+
+- `version` (string) - required, the version number (e.g., "10", "8.5.0")
+
+**When to use:**
+
+- Use `AvailableSince` to indicate when a feature or option first became available
+- For prominent minimum version requirements, use the [`VersionRequirement`](#versionrequirement) component instead
+
+**Examples in the wild:**
+
+The `AvailableSince` component is automatically used within:
+- `SdkOption` component for configuration options
+- `SdkApi` component for API methods
+
+You can also use it directly in MDX content to indicate availability for features or entire sections.
+
 ## Expandable
 
 Render an expandable section to provide additional information to users on demand.
diff --git a/docs/platforms/javascript/common/opentelemetry/custom-setup.mdx b/docs/platforms/javascript/common/opentelemetry/custom-setup.mdx
@@ -100,7 +100,7 @@ If you want to add your own http/node-fetch instrumentation, you have to follow
 
 ### Custom HTTP Instrumentation
 
-_Available since SDK version 8.35.0_
+<AvailableSince version="8.35.0" />
 
 You can add your own `@opentelemetry/instrumentation-http` instance in your OpenTelemetry setup. However, in this case, you need to disable span creation in Sentry's `httpIntegration`:
 
diff --git a/docs/platforms/javascript/common/tracing/instrumentation/index.mdx b/docs/platforms/javascript/common/tracing/instrumentation/index.mdx
@@ -109,7 +109,7 @@ To add spans that aren't active, you can create independent spans. This is usefu
 
   ### Setting an inactive span active (browser only)
 
-  _Available Since: `10.15.0`_
+  <AvailableSince version="10.15.0" />
 
   In browser environments, you might run into use cases, where the callback-based span APIs are not sufficient.
   In such cases (see example below), you can use `startInactiveSpan` to start an initially inactive span and then
@@ -231,7 +231,7 @@ Sentry maintains a [list of well-known span operations](https://develop.sentry.d
 
 ### Updating the Span Name
 
-_Available since: v8.47.0_
+<AvailableSince version="8.47.0" />
 
 You can update the name of a span at any time:
 
diff --git a/docs/platforms/javascript/guides/nestjs/features/sentry-cron-decorator.mdx b/docs/platforms/javascript/guides/nestjs/features/sentry-cron-decorator.mdx
@@ -3,9 +3,7 @@ title: SentryCron Decorator
 description: "Learn about Sentry's SentryCron decorator."
 ---
 
-<Alert>
-  The `@SentryCron` decorator is available from version `@sentry/nestjs` 8.16.0 and up.
-</Alert>
+<AvailableSince version="8.16.0" />
 
 The NestJS SDK includes a `@SentryCron` decorator that can be used to augment the native NestJS `@Cron` decorator to
 send check-ins to Sentry before and after each cron job run.
diff --git a/docs/platforms/javascript/guides/nestjs/features/sentry-traced-decorator.mdx b/docs/platforms/javascript/guides/nestjs/features/sentry-traced-decorator.mdx
@@ -3,9 +3,7 @@ title: SentryTraced Decorator
 description: "Learn about Sentry's SentryTraced decorator."
 ---
 
-<Alert>
-  The `@SentryTraced` decorator is available from version `@sentry/nestjs` 8.15.0 and up.
-</Alert>
+<AvailableSince version="8.15.0" />
 
 The NestJS SDK includes a `@SentryTraced` decorator that will create spans whenever the method it decorates is invoked.
 This feature enables more granular performance monitoring and helps you gather detailed insights into the performance
diff --git a/docs/platforms/javascript/guides/nuxt/features/nitro-server-features.mdx b/docs/platforms/javascript/guides/nuxt/features/nitro-server-features.mdx
@@ -7,13 +7,13 @@ The Sentry Nuxt SDK automatically instruments various Nitro server APIs to provi
 
 ## Server Middleware
 
-<Alert>Available from version `@sentry/nuxt` 10.17.0 and up.</Alert>
+<AvailableSince version="10.17.0" />
 
 The Sentry Nuxt SDK automatically instruments [server middleware handlers](https://nuxt.com/docs/4.x/guide/directory-structure/server#server-middleware) in addition to server event handlers. This includes the handler functions and their `onBeforeResponse` and `onRequest` callbacks.
 
 ## Cache
 
-<Alert>Available from version `@sentry/nuxt` 10.21.0 and up.</Alert>
+<AvailableSince version="10.21.0" />
 
 The Sentry Nuxt SDK automatically instruments [cache APIs](https://nitro.build/guide/cache) for the following Nitro functions:
 
@@ -25,15 +25,15 @@ This provides spans in your transactions that represent cache operations and the
 
 ## Storage
 
-<Alert>Available from version `@sentry/nuxt` 10.21.0 and up.</Alert>
+<AvailableSince version="10.21.0" />
 
 The Sentry Nuxt SDK automatically instruments [storage APIs](https://nuxt.com/docs/4.x/guide/directory-structure/server#server-storage) (also known as KV storage) and common operations.
 
 Keep in mind that only the storage mounts configured under `nitro.storage` in your `nuxt.config.ts` will be instrumented. Storage spans will show up in a similar way to [cache](#cache) spans since they both utilize the same underlying Nitro storage API.
 
 ## Database
 
-<Alert>Available from version `@sentry/nuxt` 10.21.0 and up.</Alert>
+<AvailableSince version="10.21.0" />
 
 The Sentry Nuxt SDK automatically instruments Nitro's [database API](https://nitro.build/guide/database). This provides spans in your transactions that represent database query operations and their durations, enabling you to identify slow queries, track query frequency, and optimize your database interactions.
 
diff --git a/docs/platforms/kotlin/guides/kotlin-multiplatform/configuration/options.mdx b/docs/platforms/kotlin/guides/kotlin-multiplatform/configuration/options.mdx
@@ -34,7 +34,7 @@ If you are using Sentry in your mobile app, read our [frequently asked questions
 
 <Alert>
 
-This options is available since SDK version `0.13.0`
+<AvailableSince version="0.13.0" />
 
 </Alert>
 
diff --git a/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx b/platform-includes/distributed-tracing/custom-instrumentation/javascript.mdx
@@ -40,7 +40,7 @@ The two services are now connected with your custom distributed tracing implemen
 
 ### Starting a New Trace
 
-Available since SDK version `8.5.0`.
+<AvailableSince version="8.5.0" />
 
 In case the SDK's [default behavior](../#trace-duration) for the trace duration does not fit your needs, you can manually start a new trace that will no longer be connected to the current (distributed) trace.
 This means that spans or errors collected by the SDK during this new trace will not be connected to spans or errors collected before or after this new trace.
diff --git a/platform-includes/distributed-tracing/how-to-use/javascript.nextjs.mdx b/platform-includes/distributed-tracing/how-to-use/javascript.nextjs.mdx
@@ -73,7 +73,7 @@ If your app crashes while a user is uploading a photo, you can trace exactly whe
 
 ### Strict Trace Continuation
 
-_Available since SDK version 10_
+<AvailableSince version="10" />_
 
 When your application receives requests, they might include `sentry-trace` and `baggage` headers from an upstream service that is also using Sentry.
 By default, the SDK will continue the trace from these incoming headers. However, this behavior can be undesirable if the requests are from a third-party service,
diff --git a/platform-includes/distributed-tracing/how-to-use/javascript.node.mdx b/platform-includes/distributed-tracing/how-to-use/javascript.node.mdx
@@ -64,7 +64,7 @@ If your app crashes while a user is uploading a photo, you can trace exactly whe
 
 ### Strict Trace Continuation
 
-_Available since SDK version 10_
+<AvailableSince version="10" />
 
 When your application receives requests, they might include `sentry-trace` and `baggage` headers from an upstream service that is also using Sentry.
 By default, the SDK will continue the trace from these incoming headers. However, this behavior can be undesirable if the requests are from a third-party service,
diff --git a/platform-includes/distributed-tracing/how-to-use/javascript.nuxt.mdx b/platform-includes/distributed-tracing/how-to-use/javascript.nuxt.mdx
@@ -63,7 +63,7 @@ If your app crashes while a user is uploading a photo, you can trace exactly whe
 
 ### Strict Trace Continuation
 
-_Available since SDK version 10_
+<AvailableSince version="10" />
 
 When your application receives requests, they might include `sentry-trace` and `baggage` headers from an upstream service that is also using Sentry.
 By default, the SDK will continue the trace from these incoming headers. However, this behavior can be undesirable if the requests are from a third-party service,
diff --git a/platform-includes/distributed-tracing/how-to-use/javascript.remix.mdx b/platform-includes/distributed-tracing/how-to-use/javascript.remix.mdx
@@ -102,7 +102,7 @@ If your app crashes while a user is uploading a photo, you can trace exactly whe
 
 ### Strict Trace Continuation
 
-_Available since SDK version 10_
+<AvailableSince version="10" />
 
 When your application receives requests, they might include `sentry-trace` and `baggage` headers from an upstream service that is also using Sentry.
 By default, the SDK will continue the trace from these incoming headers. However, this behavior can be undesirable if the requests are from a third-party service,
diff --git a/platform-includes/distributed-tracing/how-to-use/javascript.solidstart.mdx b/platform-includes/distributed-tracing/how-to-use/javascript.solidstart.mdx
@@ -96,7 +96,7 @@ If your app crashes while a user is uploading a photo, you can trace exactly whe
 
 ### Strict Trace Continuation
 
-_Available since SDK version 10_
+<AvailableSince version="10" />
 
 When your application receives requests, they might include `sentry-trace` and `baggage` headers from an upstream service that is also using Sentry.
 By default, the SDK will continue the trace from these incoming headers. However, this behavior can be undesirable if the requests are from a third-party service,
diff --git a/platform-includes/distributed-tracing/how-to-use/javascript.sveltekit.mdx b/platform-includes/distributed-tracing/how-to-use/javascript.sveltekit.mdx
@@ -73,7 +73,7 @@ If your app crashes while a user is uploading a photo, you can trace exactly whe
 
 ### Strict Trace Continuation
 
-_Available since SDK version 10_
+<AvailableSince version="10" />
 
 When your application receives requests, they might include `sentry-trace` and `baggage` headers from an upstream service that is also using Sentry.
 By default, the SDK will continue the trace from these incoming headers. However, this behavior can be undesirable if the requests are from a third-party service,
diff --git a/src/components/availableSince.tsx b/src/components/availableSince.tsx
@@ -0,0 +1,21 @@
+type AvailableSinceProps = {
+  version: string;
+};
+
+/**
+ * AvailableSince displays version availability information in a consistent format.
+ *
+ * Use this component to indicate when a feature, API, or option became available.
+ *
+ * @param version - The version number (e.g., "10.0.0", "8.5.0")
+ */
+export function AvailableSince({
+  version,
+}: AvailableSinceProps) {
+  return (
+    <p className="italic">
+      Available since: <code>v{version.replace(/^v/, '')}</code>
+    </p>
+  );
+}
+
diff --git a/src/components/sdkApi.tsx b/src/components/sdkApi.tsx
@@ -4,6 +4,7 @@ import {getCurrentPlatform} from 'sentry-docs/docTree';
 import {serverContext} from 'sentry-docs/serverContext';
 import {PlatformCategory} from 'sentry-docs/types';
 
+import {AvailableSince} from './availableSince';
 import {Expandable} from './expandable';
 import {codeToJsx} from './highlightCode';
 import {SdkDefinition} from './sdkDefinition';
@@ -54,11 +55,7 @@ export function SdkApi({
         <div className="italic text-sm">Only available on Server</div>
       )}
       <pre className="mt-2 mb-2 text-sm">{codeToJsx(signature, lang)}</pre>
-      {availableSince && (
-        <p className="italic">
-          Available Since: <code>{availableSince}</code>
-        </p>
-      )}
+      {availableSince && <AvailableSince version={availableSince} />}
       {parameters.length ? (
         <Expandable title="Parameters">
           <div className="space-y-3">
diff --git a/src/components/sdkOption.tsx b/src/components/sdkOption.tsx
@@ -2,6 +2,7 @@ import {getCurrentPlatformOrGuide} from 'sentry-docs/docTree';
 import {serverContext} from 'sentry-docs/serverContext';
 import {PlatformCategory} from 'sentry-docs/types';
 
+import {AvailableSince} from './availableSince';
 import {SdkDefinition, SdkDefinitionTable} from './sdkDefinition';
 
 type Props = {
diff --git a/src/mdxComponents.ts b/src/mdxComponents.ts
@@ -1,5 +1,6 @@
 import {Alert} from './components/alert';
 import {Arcade} from './components/arcade';
+import {AvailableSince} from './components/availableSince';
 import {Break} from './components/break';
 import {Card} from './components/card';
 import {CliChecksumTable} from './components/cliChecksumTable';
@@ -56,6 +57,7 @@ export function mdxComponents(
   return {
     Alert,
     Arcade,
+    AvailableSince,
     Break,
     Card,
     CliChecksumTable,
