[RUM-12424] GraphQL Documentation (#32784)

* graphQL documentation

* Enhance documentation

* Nitpick

* Consistency with other parameter

* Add a link to graphql doc in attributes

* Modify title

Author: rgaignault

content/en/real_user_monitoring/application_monitoring/browser/data_collected.md

@@ -143,6 +143,19 @@ Detailed network timing data for the loading of an application's resources are c
 | `resource.provider.domain` | string | The resource provider domain.                                                                        |
 | `resource.provider.type`   | string | The resource provider type (for example, `first-party`, `cdn`, `ad`, or `analytics`).                |
 
+### GraphQL attributes
+
+For GraphQL requests configured in `allowedGraphQlUrls`, additional metadata is automatically collected. See [Track GraphQL requests][15] for configuration details.
+
+| Attribute                       | Type   | Description                                                                                          |
+|---------------------------------|--------|------------------------------------------------------------------------------------------------------|
+| `resource.graphql.operation_type` | string | The GraphQL operation type: `query`, `mutation`, or `subscription`.                                  |
+| `resource.graphql.operation_name` | string | The GraphQL operation name, if provided in the request.                                              |
+| `resource.graphql.variables`      | string | The GraphQL variables sent with the request.                                            |
+| `resource.graphql.payload`        | string | The GraphQL query (limited to 32 KB, available only if `trackPayload` is enabled).                   |
+| `resource.graphql.errors_count`   | number | Number of errors returned in the GraphQL response (available only if `trackResponseErrors` is enabled). |
+| `resource.graphql.errors`         | array  | Array of GraphQL errors with `message`, `code`, `locations`, and `path` (available only if `trackResponseErrors` is enabled). |
+
 ### Long task timing attributes
 
 | Attribute  | Type   | Description                |
@@ -222,3 +235,4 @@ Source errors include code-level information about the error. For more informati
 [12]: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming
 [13]: /real_user_monitoring/application_monitoring/browser/tracking_user_actions/?tab=npm#action-timing-telemetry
 [14]: /real_user_monitoring/application_monitoring/browser/tracking_user_actions/?tab=npm#custom-actions
+[15]: /real_user_monitoring/application_monitoring/browser/monitoring_resource_performance/#track-graphql-requests

content/en/real_user_monitoring/application_monitoring/browser/monitoring_resource_performance.md

@@ -34,7 +34,53 @@ See [Connect RUM and Traces][2] for information about setting up this feature.
 
 {{< img src="real_user_monitoring/browser/resource_performance_graph.png" alt="APM Trace information for a RUM Resource" >}}
 
-## Resource attributes
+## Track GraphQL requests
+
+The Browser SDK can automatically enrich GraphQL requests with operation-specific metadata, making it easier to identify and debug individual operations in RUM.
+
+### Setup
+
+Configure `allowedGraphQlUrls` during SDK initialization to specify which endpoints should be treated as GraphQL:
+
+```javascript
+import { datadogRum } from '@datadog/browser-rum'
+
+datadogRum.init({
+    applicationId: '<DATADOG_APPLICATION_ID>',
+    clientToken: '<DATADOG_CLIENT_TOKEN>',
+    site: 'datadoghq.com',
+    allowedGraphQlUrls: [
+        // String: matches any URL starting with the value
+        "https://api.example.com/graphql",
+        // RegExp: tests against the full URL
+        /\/graphql$/,
+        // Function: evaluates with the URL as parameter, returning true for a match
+        (url) => url.includes("graphql")
+    ]
+})
+```
+
+### Advanced options
+
+To collect additional data, use the extended configuration:
+
+```javascript
+datadogRum.init({
+    allowedGraphQlUrls: [
+        {
+            match: "https://api.example.com/graphql",
+            trackPayload: true,          // Include GraphQL query (limited to 32 KB)
+            trackResponseErrors: true    // Capture GraphQL errors from responses
+        }
+    ]
+})
+```
+
+For matching requests, the SDK automatically extracts operation type, operation name, variables, and optionally the GraphQL query payload and response errors. See [GraphQL attributes][8] for the complete list of collected attributes.
+
+**Note**: You can modify GraphQL variables in the [`beforeSend` callback][9] if needed (for example, to redact sensitive data).
+
+## Resource timing attributes
 
 Detailed network timing data for resources is collected from the Fetch and XHR native browser methods and from the [Performance Resource Timing API][3].
 
@@ -96,3 +142,5 @@ To collect the resource status code, add the `Access-Control-Allow-Origin` HTTP
 [5]: https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/Resource_timing#cross-origin_timing_information
 [6]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Access-Control-Allow-Origin
 [7]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin
+[8]: /real_user_monitoring/application_monitoring/browser/data_collected/#graphql-attributes
+[9]: /real_user_monitoring/application_monitoring/browser/advanced_configuration/#modify-the-content-of-a-rum-event