add 'runWithClient' example to http-integration.mdx (#10979)

* add 'runWithClient' example to http-integration.mdx

* move runWithClient to the top

* add default code snippet

* Update docs/platforms/dart/integrations/http-integration.mdx

Co-authored-by: vivianyentran <[email protected]>

* rephrased the `runWithClient` section in dart

* Update docs/platforms/dart/integrations/http-integration.mdx

Co-authored-by: vivianyentran <[email protected]>

---------

Co-authored-by: Martin Haintz <[email protected]>
Co-authored-by: vivianyentran <[email protected]>

Author: 3 people

docs/platforms/dart/integrations/http-integration.mdx

@@ -4,6 +4,37 @@ description: "Learn more about the Sentry HTTP integration for the Dart SDK."
 sidebar_order: 2
 ---
 
+## Using the `SentryHttpClient` function
+
+You can use the `SentryHttpClient` and call its methods directly, or you can use it with the [`runWithClient`](https://pub.dev/documentation/http/latest/http/runWithClient.html) function. If you need to use a fresh instance of the `client` (so that other instances are not affected) or to run in a separate [`Zone`](https://api.dart.dev/stable/3.5.0/dart-async/Zone-class.html), which allows you to override the functionality of the existing [`Zone`](https://api.dart.dev/stable/3.5.0/dart-async/Zone-class.html), then use the `runWithClient` function (see the `runWithClient` tab). Otherwise, just use `SentryHttpClient` directly and call its methods (see the `default` tab).
+
+### Usage
+
+```dart {filename:http_client.dart}{tabTitle: default}
+import 'package:sentry/sentry.dart';
+
+final client = SentryHttpClient();
+
+try {
+  final response = await client.get(Uri.https('www.example.com', ''));
+  print(response.body);
+} finally {
+  client.close();
+}
+```
+
+```dart {filename:http_client.dart}{tabTitle: runWithClient}
+import 'package:http/http.dart';
+import 'package:sentry/sentry.dart';
+
+final sentryHttpClient = SentryHttpClient();
+
+await runWithClient(() async {
+  final response = await get(Uri.https('www.example.com', ''));
+  print(response.body);
+}, () => sentryHttpClient);
+```
+
 ## Reporting Bad HTTP Requests as Errors
 
 The `SentryHttpClient` can also catch exceptions that may occur during requests — for example [`SocketException`](https://api.dart.dev/stable/2.13.4/dart-io/SocketException-class.html).
@@ -13,11 +44,11 @@ import 'package:sentry/sentry.dart';
 
 var client = SentryHttpClient();
 try {
-var uriResponse = await client.post('https://example.com/whatsit/create',
-     body: {'name': 'doodle', 'color': 'blue'});
- print(await client.get(uriResponse.bodyFields['uri']));
+  var uriResponse = await client.post('https://example.com/whatsit/create',
+    body: {'name': 'doodle', 'color': 'blue'});
+  print(await client.get(uriResponse.bodyFields['uri']));
 } finally {
- client.close();
+  client.close();
 }
 ```
 
@@ -54,11 +85,11 @@ var client = SentryHttpClient(
 );
 
 try {
-var uriResponse = await client.post('https://example.com/whatsit/create',
-     body: {'name': 'doodle', 'color': 'blue'});
- print(await client.get(uriResponse.bodyFields['uri']));
+  var uriResponse = await client.post('https://example.com/whatsit/create',
+    body: {'name': 'doodle', 'color': 'blue'});
+  print(await client.get(uriResponse.bodyFields['uri']));
 } finally {
- client.close();
+  client.close();
 }
 ```
 
@@ -83,11 +114,11 @@ final transaction = Sentry.startTransaction(
 
 var client = SentryHttpClient();
 try {
-var uriResponse = await client.post('https://example.com/whatsit/create',
-     body: {'name': 'doodle', 'color': 'blue'});
- print(await client.get(uriResponse.bodyFields['uri']));
+  var uriResponse = await client.post('https://example.com/whatsit/create',
+    body: {'name': 'doodle', 'color': 'blue'});
+  print(await client.get(uriResponse.bodyFields['uri']));
 } finally {
- client.close();
+  client.close();
 }
 
 await transaction.finish(status: SpanStatus.ok());