add another opt

Author: Lms24

docs/platforms/javascript/common/tracing/instrumentation/automatic-instrumentation.mdx

@@ -70,7 +70,7 @@ You will need to configure your web server [CORS](https://developer.mozilla.org/
 
 </SdkOption>
 
-<SdkOption name="beforeStartSpan" type='(span: Span) => Span'>
+<SdkOption name="beforeStartSpan" type='(options: StartSpanOptions) => StartSpanOptions'>
 
 `beforeStartSpan` is called at the start of every `pageload` or `navigation` span, and is passed an object containing data about the span which will be started. With `beforeStartSpan` you can modify that data.
 
@@ -94,6 +94,13 @@ By default, spans will be created for all requests.
 
 </SdkOption>
 
+<SdkOption name="onRequestSpanStart" type="(span: Span, requestInformation: { headers?: WebFetchHeaders }): void">
+
+This callback is invoked directly after a span is started for an outgoing fetch or XHR request.
+You can use it to annotate the span with additional data or attributes, for example by setting attributes based on the passed request headers.
+
+</SdkOption>
+
 <SdkOption name="idleTimeout" type='number' defaultValue='1000'>
 
 The idle time, measured in ms, to wait until the pageload/navigation span will be finished, if there are no unfinished spans. The pageload/navigation span will use the end timestamp of the last finished span as the endtime.
@@ -142,7 +149,7 @@ This option determines whether spans for long animation frames get created autom
 
 </SdkOption>
 
-<SdkOption name="enableInp" type='boolean' defaultValue='true' availableSince='7.104.0'>
+<SdkOption name="enableInp" type='boolean' defaultValue='true' availableSince='7.104.0' defaultNote="See note">
 
 This option determines whether interactions spans automatically get created when an [Interaction to Next Paint (INP)](/product/insights/web-vitals/web-vitals-concepts/#interaction-to-next-paint-inp) event is detected. Interactions are scored and surfaced in the [Web Vitals](/product/insights/web-vitals/) module.
 

src/components/sdkOption.tsx

@@ -12,6 +12,7 @@ type Props = {
   availableSince?: string;
   categorySupported?: PlatformCategory[];
   children?: React.ReactNode;
+  defaultNote?: string;
   defaultValue?: string;
   envVar?: string;
 };
@@ -22,6 +23,7 @@ export function SdkOption({
   type,
   availableSince,
   defaultValue,
+  defaultNote,
   envVar,
   categorySupported = [],
 }: Props) {
@@ -34,7 +36,9 @@ export function SdkOption({
           <OptionDefRow label="Available since" value={availableSince} />
         )}
         {type && <OptionDefRow label="Type" value={type} />}
-        {defaultValue && <OptionDefRow label="Default" value={defaultValue} />}
+        {defaultValue && (
+          <OptionDefRow label="Default" value={defaultValue} note={defaultNote} />
+        )}
         <PlatformCategorySection supported={['server', 'serverless']}>
           <PlatformSection notSupported={['javascript.nextjs']}>
             {envVar && <OptionDefRow label="ENV Variable" value={envVar} />}
@@ -50,12 +54,21 @@ export function SdkOption({
   );
 }
 
-function OptionDefRow({label, value}: {label: string; value: string}) {
+function OptionDefRow({
+  label,
+  value,
+  note,
+}: {
+  label: string;
+  value: string;
+  note?: string;
+}) {
   return (
     <tr>
       <th>{label}</th>
       <td>
         <code>{value}</code>
+        {note && <small> ({note})</small>}
       </td>
     </tr>
   );