chore: updated quick-start guide for interop-otel package

Author: artus9033

docs/docs/docs/interop-otel/quick-start.mdx

@@ -31,6 +31,80 @@ The global C++ Tracer and Meter Providers are registered - respectively - from `
 > [!WARNING]
 > Invoking the aforementioned install methods more than once will discard all previously registered C++ tracer/meter exporters. It is important to first register all the tracer/meter exporters in JS, and then call the `register()` methods of `OttreliteTracerProvider` and `OttreliteMeterProvider` in JS.
 
+```typescript
+import { resourceFromAttributes } from '@opentelemetry/resources';
+import { SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
+import {
+  ATTR_SERVICE_NAME,
+  ATTR_SERVICE_VERSION,
+} from '@opentelemetry/semantic-conventions';
+import {
+  DevSpanProcessorInterceptor,
+  OttreliteExporterOTLP,
+  OttreliteMeterProvider,
+  OttreliteTracerProvider,
+} from '@ottrelite/interop-otel';
+
+// optional step: resource attributes; below: example options, this can be customized as needed
+const resource = resourceFromAttributes({
+  [ATTR_SERVICE_NAME]: appName,
+  [ATTR_SERVICE_VERSION]: getVersion(),
+  'device.id': getDeviceId(),
+  'os.name': Platform.OS,
+  'os.version': getSystemVersion(),
+});
+
+const tracerProvider = new OttreliteTracerProvider({
+  spanProcessors: [
+    // optional step: configure Ottrelite's span processor (required for live tracing in dev)
+    new DevSpanProcessorInterceptor(),
+
+    // optional step: configure Ottrelite's actual exporter using a preferred processor of choice
+    new SimpleSpanProcessor(
+      new OttreliteExporterOTLP({
+        endpoint: 'http://localhost:4318/v1/',
+      })
+    ),
+  ],
+  resource,
+});
+
+// register the React Native tracer provider
+tracerProvider.register();
+
+// configure the OpenTelemetry MeterProvider to use Ottrelite's capabilities
+const meterProvider = new OttreliteMeterProvider({
+  resource,
+});
+
+meterProvider.register();
+```
+
+##### OTEL Instrumentations
+
+Optionally, configure automatic instrumentation of various JS APIs using OpenTelemetry community instrumentations.
+
+```typescript
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
+import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
+
+// optional step: register instrumentations; Ottrelite integrates with the OTEL JS API, therefore allowing to
+// use the same instrumentations as you would with OpenTelemetry JS
+// the below example shows a few common instrumentations, but you can add more as needed, inspired by https://opentelemetry.io/docs/demo/services/react-native-app/
+registerInstrumentations({
+  instrumentations: [
+    new FetchInstrumentation({
+      clearTimingResources: false,
+      propagateTraceHeaderCorsUrls: /.*/,
+    }),
+    new XMLHttpRequestInstrumentation({
+      ignoreUrls: [/\/fetch-urls\/.*/],
+    }),
+  ],
+});
+```
+
 #### Configuration
 
 The `Ottrelite.install` method accepts 3 C++ OTEL SDK - specific configuration options: