Remove the otelExchange from the default exchanges in favour of injecting serverside

The otel api and associated tracing functions add some bundle size to the API client that aren't at all necessary on the browser. The browser can't export spans to our tracing config, so we really don't need this code there. But, we definitely want it server side in the sandbox where it gives us important visibility on how the api client is performing there. Instead of paying the bundle size penalty all the time, we can inject the otel exchange with the new exchange injection facility, and use normal otel monkeypatching to add the other spans.

Before:

```
vite v4.4.7 building for production...
✓ 223 modules transformed.
dist/api-read-stats.html      227.36 kB │ gzip: 48.87 kB
dist/test-bundle-api-read.js  253.91 kB │ gzip: 47.33 kB
dist/api-read-stats.html       227.90 kB │ gzip: 48.94 kB
dist/test-bundle-api-read.cjs  168.40 kB │ gzip: 39.39 kB
✓ built in 1.01s
vite v4.4.7 building for production...
✓ 499 modules transformed.
dist/react-read-stats.html      320.54 kB │ gzip: 59.02 kB
dist/test-bundle-react-read.js  359.09 kB │ gzip: 76.48 kB
dist/react-read-stats.html       323.17 kB │ gzip: 59.05 kB
dist/test-bundle-react-read.cjs  243.18 kB │ gzip: 64.60 kB
✓ built in 1.34s
vite v4.4.7 building for production...
✓ 1033 modules transformed.
dist/shopify-read-stats.html      532.78 kB │ gzip:  79.62 kB
dist/test-bundle-shopify-read.js  678.46 kB │ gzip: 135.16 kB
dist/shopify-read-stats.html       533.31 kB │ gzip:  79.69 kB
dist/test-bundle-shopify-read.cjs  477.27 kB │ gzip: 115.70 kB
```

After:

```
✓ 176 modules transformed.
dist/api-read-stats.html      212.12 kB │ gzip: 47.04 kB
dist/test-bundle-api-read.js  236.85 kB │ gzip: 43.50 kB
dist/api-read-stats.html       212.64 kB │ gzip: 47.09 kB
dist/test-bundle-api-read.cjs  155.96 kB │ gzip: 36.01 kB
✓ built in 861ms
vite v4.4.7 building for production...
✓ 452 modules transformed.
dist/react-read-stats.html      303.58 kB │ gzip: 57.00 kB
dist/test-bundle-react-read.js  342.04 kB │ gzip: 72.64 kB
dist/react-read-stats.html       307.55 kB │ gzip: 57.01 kB
dist/test-bundle-react-read.cjs  230.74 kB │ gzip: 61.17 kB
✓ built in 1.23s
vite v4.4.7 building for production...
✓ 986 modules transformed.
dist/shopify-read-stats.html      517.13 kB │ gzip:  77.52 kB
dist/test-bundle-shopify-read.js  661.41 kB │ gzip: 131.38 kB
dist/shopify-read-stats.html       517.64 kB │ gzip:  77.55 kB
dist/test-bundle-shopify-read.cjs  464.83 kB │ gzip: 112.29 kB
✓ built in 2.39s
```

7% decompressed bundle size savings which seems ok but not great

Author: airhorns

packages/api-client-core/package.json

@@ -28,7 +28,6 @@
     "prerelease": "gitpkg publish"
   },
   "dependencies": {
-    "@opentelemetry/api": "^1.4.0",
     "@urql/core": "^4.0.10",
     "cross-fetch": "^3.1.5",
     "tiny-graphql-query-compiler": "^0.2.2",

packages/api-client-core/src/GadgetConnection.ts

@@ -11,16 +11,8 @@ import { GadgetTransaction, TransactionRolledBack } from "./GadgetTransaction.js
 import type { BrowserStorage } from "./InMemoryStorage.js";
 import { InMemoryStorage } from "./InMemoryStorage.js";
 import { operationNameExchange } from "./exchanges/operationNameExchange.js";
-import { otelExchange } from "./exchanges/otelExchange.js";
 import { urlParamExchange } from "./exchanges/urlParamExchange.js";
-import {
-  GadgetUnexpectedCloseError,
-  GadgetWebsocketConnectionTimeoutError,
-  getCurrentSpan,
-  isCloseEvent,
-  storageAvailable,
-  traceFunction,
-} from "./support.js";
+import { GadgetUnexpectedCloseError, GadgetWebsocketConnectionTimeoutError, isCloseEvent, storageAvailable } from "./support.js";
 
 export type TransactionRun<T> = (transaction: GadgetTransaction) => Promise<T>;
 export interface GadgetSubscriptionClientOptions extends Partial<SubscriptionClientOptions> {
@@ -182,96 +174,90 @@ export class GadgetConnection {
   transaction: {
     <T>(options: GadgetSubscriptionClientOptions, run: TransactionRun<T>): Promise<T>;
     <T>(run: TransactionRun<T>): Promise<T>;
-  } = traceFunction(
-    "api-client.transaction",
-    async <T>(optionsOrRun: GadgetSubscriptionClientOptions | TransactionRun<T>, maybeRun?: TransactionRun<T>): Promise<T> => {
-      let run: TransactionRun<T>;
-      let options: GadgetSubscriptionClientOptions;
-
-      if (maybeRun) {
-        run = maybeRun;
-        options = optionsOrRun as GadgetSubscriptionClientOptions;
-      } else {
-        run = optionsOrRun as TransactionRun<T>;
-        options = {};
-      }
+  } = async <T>(optionsOrRun: GadgetSubscriptionClientOptions | TransactionRun<T>, maybeRun?: TransactionRun<T>): Promise<T> => {
+    let run: TransactionRun<T>;
+    let options: GadgetSubscriptionClientOptions;
 
-      if (this.currentTransaction) {
-        return await run(this.currentTransaction);
-      }
+    if (maybeRun) {
+      run = maybeRun;
+      options = optionsOrRun as GadgetSubscriptionClientOptions;
+    } else {
+      run = optionsOrRun as TransactionRun<T>;
+      options = {};
+    }
 
-      getCurrentSpan()?.setAttributes({ applicationId: this.options.applicationId, environmentName: this.environment });
+    if (this.currentTransaction) {
+      return await run(this.currentTransaction);
+    }
 
-      let subscriptionClient: SubscriptionClient | null = null;
-      let transaction;
+    let subscriptionClient: SubscriptionClient | null = null;
+    let transaction;
+    try {
+      // The server will error if it receives any operations before the auth dance has been completed, so we block on that happening before sending our first operation. It's important that this happens synchronously after instantiating the client so we don't miss any messages
+      subscriptionClient = await this.waitForOpenedConnection({
+        isFatalConnectionProblem(errorOrCloseEvent) {
+          // any interruption of the transaction is fatal to the transaction
+          console.warn("Transport error encountered during transaction processing", errorOrCloseEvent);
+          return true;
+        },
+        connectionAckWaitTimeout: DEFAULT_CONN_ACK_TIMEOUT,
+        ...options,
+        lazy: false,
+        // super ultra critical option that ensures graphql-ws doesn't automatically close the websocket connection when there are no outstanding operations. this is key so we can start a transaction then make mutations within it
+        lazyCloseTimeout: 100000,
+        retryAttempts: 0,
+      });
+
+      const client = new Client({
+        url: "/-", // not used because there's no fetch exchange, set for clarity
+        requestPolicy: "network-only", // skip any cached data during transactions
+        exchanges: [
+          ...this.exchanges.beforeAll,
+          operationNameExchange,
+          ...this.exchanges.beforeAsync,
+          subscriptionExchange({
+            forwardSubscription(request) {
+              const input = { ...request, query: request.query || "" };
+              return {
+                subscribe: (sink) => {
+                  const dispose = subscriptionClient!.subscribe(input, sink as Sink<ExecutionResult>);
+                  return {
+                    unsubscribe: dispose,
+                  };
+                },
+              };
+            },
+            enableAllOperations: true,
+          }),
+          ...this.exchanges.afterAll,
+        ],
+      });
+      (client as any)[$gadgetConnection] = this;
+
+      transaction = new GadgetTransaction(client, subscriptionClient);
+      this.currentTransaction = transaction;
+      await transaction.start();
+      const result = await run(transaction);
+      await transaction.commit();
+      return result;
+    } catch (error) {
       try {
-        // The server will error if it receives any operations before the auth dance has been completed, so we block on that happening before sending our first operation. It's important that this happens synchronously after instantiating the client so we don't miss any messages
-        subscriptionClient = await this.waitForOpenedConnection({
-          isFatalConnectionProblem(errorOrCloseEvent) {
-            // any interruption of the transaction is fatal to the transaction
-            console.warn("Transport error encountered during transaction processing", errorOrCloseEvent);
-            return true;
-          },
-          connectionAckWaitTimeout: DEFAULT_CONN_ACK_TIMEOUT,
-          ...options,
-          lazy: false,
-          // super ultra critical option that ensures graphql-ws doesn't automatically close the websocket connection when there are no outstanding operations. this is key so we can start a transaction then make mutations within it
-          lazyCloseTimeout: 100000,
-          retryAttempts: 0,
-        });
-
-        const client = new Client({
-          url: "/-", // not used because there's no fetch exchange, set for clarity
-          requestPolicy: "network-only", // skip any cached data during transactions
-          exchanges: [
-            ...this.exchanges.beforeAll,
-            operationNameExchange,
-            otelExchange,
-            ...this.exchanges.beforeAsync,
-            subscriptionExchange({
-              forwardSubscription(request) {
-                const input = { ...request, query: request.query || "" };
-                return {
-                  subscribe: (sink) => {
-                    const dispose = subscriptionClient!.subscribe(input, sink as Sink<ExecutionResult>);
-                    return {
-                      unsubscribe: dispose,
-                    };
-                  },
-                };
-              },
-              enableAllOperations: true,
-            }),
-            ...this.exchanges.afterAll,
-          ],
-        });
-        (client as any)[$gadgetConnection] = this;
-
-        transaction = new GadgetTransaction(client, subscriptionClient);
-        this.currentTransaction = transaction;
-        await transaction.start();
-        const result = await run(transaction);
-        await transaction.commit();
-        return result;
-      } catch (error) {
-        try {
-          if (transaction?.open) await transaction.rollback();
-        } catch (rollbackError) {
-          if (!(rollbackError instanceof TransactionRolledBack)) {
-            console.warn("Encountered another error while rolling back a Gadget transaction that errored. The other error:", rollbackError);
-          }
-        }
-        if (isCloseEvent(error)) {
-          throw new GadgetUnexpectedCloseError(error);
-        } else {
-          throw error;
+        if (transaction?.open) await transaction.rollback();
+      } catch (rollbackError) {
+        if (!(rollbackError instanceof TransactionRolledBack)) {
+          console.warn("Encountered another error while rolling back a Gadget transaction that errored. The other error:", rollbackError);
         }
-      } finally {
-        await subscriptionClient?.dispose();
-        this.currentTransaction = null;
       }
+      if (isCloseEvent(error)) {
+        throw new GadgetUnexpectedCloseError(error);
+      } else {
+        throw error;
+      }
+    } finally {
+      await subscriptionClient?.dispose();
+      this.currentTransaction = null;
     }
-  );
+  };
 
   close() {
     this.disposeClient(this.baseSubscriptionClient);
@@ -290,7 +276,7 @@ export class GadgetConnection {
    * // fetch a relative URL from the endpoint this API client is configured to fetch from
    * await api.connection.fetch("/foo/bar");
    **/
-  fetch = traceFunction("api-client.fetch", async (input: RequestInfo | URL, init: RequestInit = {}) => {
+  fetch = async (input: RequestInfo | URL, init: RequestInit = {}) => {
     input = processMaybeRelativeInput(input, this.options.baseRouteURL ?? this.options.endpoint);
 
     if (this.isGadgetRequest(input)) {
@@ -311,7 +297,7 @@ export class GadgetConnection {
     }
 
     return response;
-  });
+  };
 
   private isGadgetRequest(input: RequestInfo | URL) {
     let requestUrl;
@@ -345,7 +331,7 @@ export class GadgetConnection {
   }
 
   private newBaseClient() {
-    const exchanges = [...this.exchanges.beforeAll, operationNameExchange, otelExchange, urlParamExchange];
+    const exchanges = [...this.exchanges.beforeAll, operationNameExchange, urlParamExchange];
 
     // apply urql's default caching behaviour when client side (but skip it server side)
     if (typeof window != "undefined") {

packages/api-client-core/src/exchanges/otelExchange.ts

@@ -1,5 +1,3 @@
-import type { Span, SpanOptions } from "@opentelemetry/api";
-import { SpanStatusCode, context as contextApi, trace as traceApi } from "@opentelemetry/api";
 import type { OperationResult } from "@urql/core";
 import { CombinedError } from "@urql/core";
 import { DataHydrator } from "./DataHydrator.js";
@@ -424,91 +422,6 @@ export const errorMessage = (error: unknown) => {
   }
 };
 
-export const tracer = traceApi.getTracer("gadget-api-client");
-
-export const onSpanError = (span: Span, error: any) => {
-  span.recordException(error);
-  span.setStatus({ code: SpanStatusCode.ERROR, message: errorMessage(error) });
-};
-
-export function withSpan<T>(name: string, fn: (span: Span) => T): T;
-export function withSpan<T>(name: string, options: SpanOptions, fn: (span: Span) => T): T;
-export function withSpan<T>(name: string, fnOrOptions: SpanOptions | ((span: Span) => T), fn?: (span: Span) => T): T {
-  let func: (span: Span) => T;
-  let options: SpanOptions | undefined;
-
-  if (fn) {
-    func = fn;
-    options = fnOrOptions as SpanOptions;
-  } else {
-    func = fnOrOptions as typeof func;
-    options = {};
-  }
-
-  return tracer.startActiveSpan(name, options, (span) => func(span));
-}
-
-export async function trace<T extends Promise<any>>(name: string, fn: (span: Span) => T): Promise<Awaited<T>>;
-export async function trace<T extends Promise<any>>(name: string, options: SpanOptions, fn: (span: Span) => T): Promise<Awaited<T>>;
-export async function trace<T extends Promise<any>>(
-  name: string,
-  fnOrOptions: SpanOptions | ((span: Span) => T),
-  fn?: (span: Span) => T
-): Promise<Awaited<T>> {
-  let func: (span: Span) => T;
-  let options: SpanOptions | undefined;
-
-  if (fn) {
-    func = fn;
-    options = fnOrOptions as SpanOptions;
-  } else {
-    func = fnOrOptions as typeof func;
-    options = {};
-  }
-
-  return await withSpan(name, options, async (span) => {
-    try {
-      const result = await func(span);
-      span.end();
-      return result;
-    } catch (error) {
-      onSpanError(span, error);
-      span.end();
-      throw error;
-    }
-  });
-}
-
-/** Wrap a function in tracing, and return it  */
-export function traceFunction<This, Fn extends (this: This, ...args: any[]) => Promise<any>>(name: string, fn: Fn): Fn;
-export function traceFunction<This, Fn extends (this: This, ...args: any[]) => Promise<any>>(
-  name: string,
-  options: SpanOptions,
-  fn: Fn
-): Fn;
-export function traceFunction<This, Fn extends (this: This, ...args: any[]) => Promise<any>>(
-  name: string,
-  fnOrOptions: SpanOptions | Fn,
-  fn?: Fn
-): Fn {
-  let func: Fn;
-  let options: SpanOptions;
-
-  if (fn) {
-    func = fn;
-    options = fnOrOptions as SpanOptions;
-  } else {
-    func = fnOrOptions as Fn;
-    options = {};
-  }
-
-  return async function (this: any, ...args: Parameters<Fn>) {
-    return await trace(name, options, () => func.apply(this, args));
-  } as Fn;
-}
-
-export const getCurrentSpan = () => traceApi.getSpan(contextApi.active());
-
 // Gadget Storage Test Key that minifies well
 const key = "gstk";