feat: add client side tracing

package.json

@@ -26,14 +26,21 @@
     "@galoymoney/client": "^0.1.50",
     "@galoymoney/react": "^0.1.13",
     "@opentelemetry/api": "^1.1.0",
+    "@opentelemetry/context-zone": "^1.7.0",
     "@opentelemetry/core": "^1.5.0",
+    "@opentelemetry/exporter-collector": "^0.25.0",
     "@opentelemetry/exporter-jaeger": "^1.5.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.33.0",
     "@opentelemetry/instrumentation": "^0.31.0",
+    "@opentelemetry/instrumentation-document-load": "^0.30.0",
+    "@opentelemetry/instrumentation-fetch": "^0.33.0",
     "@opentelemetry/instrumentation-http": "^0.31.0",
     "@opentelemetry/resources": "^1.5.0",
     "@opentelemetry/sdk-trace-base": "^1.5.0",
     "@opentelemetry/sdk-trace-node": "^1.5.0",
+    "@opentelemetry/sdk-trace-web": "^1.7.0",
     "@opentelemetry/semantic-conventions": "^1.5.0",
+    "@opentelemetry/tracing": "^0.24.0",
     "@ory/client": "^0.2.0-alpha.4",
     "@ory/integrations": "^0.2.6",
     "@ory/kratos-client": "^0.10.1",

src/components/login/auth-code.tsx

@@ -5,6 +5,7 @@ import { Spinner } from "@galoymoney/react"
 import { config, translate, history, useRequest, useAuthContext } from "store/index"
 
 import Icon from "components/icon"
+import { recordTrace } from "store/client-tracing/tracing"
 
 type FCT = React.FC<{ phoneNumber: string }>
 
@@ -40,7 +41,12 @@ const AuthCode: FCT = ({ phoneNumber }) => {
   const handleAuthCodeSubmit: React.FormEventHandler<HTMLFormElement> = async (event) => {
     event.preventDefault()
     setErrorMessage("")
-    submitLoginRequest(event.currentTarget.authCode.value)
+    await recordTrace({
+      spanName: "auth-code-login",
+      fnName: submitLoginRequest.name,
+      exception: errorMessage,
+      fn: () => submitLoginRequest(event.currentTarget.authCode.value),
+    })
   }
 
   const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {

src/components/pages/send.tsx

@@ -26,6 +26,7 @@ import useMyUpdates from "hooks/use-my-updates"
 import Link, { ButtonLink } from "components/link"
 import SendAction from "components/send/send-action"
 import Header from "components/header"
+import { recordTrace } from "store/client-tracing/tracing"
 
 export type InvoiceInput = {
   view?: "destination" | "amount" | "confirm"
@@ -112,8 +113,19 @@ const Send: FCT = ({ to }) => {
 
           if (errorsMessage) {
             newInputState.errorMessage = errorsMessage
+            recordTrace({
+              spanName: "fetch recipient-wallet-id",
+              fnName: userDefaultWalletIdQuery.name,
+              exception: errorsMessage,
+              attachSpan: true
+            })
           } else {
             newInputState.recipientWalletId = data?.userDefaultWalletId
+            recordTrace({
+              spanName: "fetch recipient-wallet-id",
+              fnName: userDefaultWalletIdQuery.name,
+              attachSpan: true
+            })
           }
         }
       }

src/components/root.tsx

@@ -9,6 +9,7 @@ import { KratosFlowData } from "kratos/index"
 
 import { AuthProvider } from "components/auth-provider"
 import RootComponent from "components/root-component"
+import TraceProvider from "store/client-tracing/trace-provider"
 
 type RootFCT = React.FC<{ GwwState: GwwStateType }>
 
@@ -38,12 +39,14 @@ const Root: RootFCT = ({ GwwState }) => {
   return (
     <AuthProvider authIdentity={state.authIdentity}>
       <GwwContext.Provider value={{ state, dispatch }}>
-        <RootComponent
-          key={state.key}
-          path={state.path}
-          flowData={state.flowData}
-          {...state.props}
-        />
+        <TraceProvider>
+          <RootComponent
+            key={state.key}
+            path={state.path}
+            flowData={state.flowData}
+            {...state.props}
+          />
+        </TraceProvider>
       </GwwContext.Provider>
     </AuthProvider>
   )

src/components/send/send-action-display.tsx

@@ -2,8 +2,8 @@ import { MouseEvent } from "react"
 
 import { formatUsd, GaloyGQL } from "@galoymoney/client"
 import { SatFormat, Spinner, SuccessCheckmark } from "@galoymoney/react"
-
 import { translate } from "store/index"
+import { recordTrace } from "store/client-tracing/tracing"
 
 import useMyUpdates from "hooks/use-my-updates"
 
@@ -60,6 +60,7 @@ const SendActionDisplay: SendActionDisplayFCT = ({
   handleSend,
 }) => {
   if (error) {
+    recordTrace({ spanName: "payment-send-error", exception: error })
     return <div className="error">{error}</div>
   }
 

src/components/send/send-intra-ledger-action.tsx

@@ -1,8 +1,9 @@
 import { useMutation } from "@galoymoney/client"
-import { MouseEvent } from "react"
+import React, { MouseEvent } from "react"
 
 import SendActionDisplay from "components/send/send-action-display"
 import { SendActionProps } from "components/send/send-action"
+import { recordTrace } from "store/client-tracing/tracing"
 
 export type SendIntraLedgerActionProps = SendActionProps & {
   recipientWalletId: string
@@ -15,16 +16,23 @@ const SendIntraLedgerAction: FCT = (props) => {
   const [sendPayment, { loading, errorsMessage, data }] =
     useMutation.intraLedgerPaymentSend()
 
-  const handleSend = (event: MouseEvent<HTMLButtonElement>) => {
+  const handleSend = async (event: MouseEvent<HTMLButtonElement>) => {
     event.preventDefault()
-    sendPayment({
-      variables: {
-        input: {
-          walletId: props.btcWalletId,
-          recipientWalletId: props.recipientWalletId,
-          amount: props.satAmount,
-          memo: props.memo,
-        },
+    await recordTrace({
+      spanName: "intra-ledger-send",
+      fnName: sendPayment.name,
+      exception: errorsMessage,
+      fn: () => {
+        sendPayment({
+          variables: {
+            input: {
+              walletId: props.btcWalletId,
+              recipientWalletId: props.recipientWalletId,
+              amount: props.satAmount,
+              memo: props.memo,
+            },
+          },
+        })
       },
     })
   }

src/components/send/send-onchain-action.tsx

@@ -1,8 +1,9 @@
 import { useMutation, useQuery } from "@galoymoney/client"
-import { MouseEvent } from "react"
+import React, { MouseEvent } from "react"
 
 import SendActionDisplay from "components/send/send-action-display"
 import { SendActionProps } from "components/send/send-action"
+import { recordTrace } from "store/client-tracing/tracing"
 
 export type SendOnChainActionProps = SendActionProps & {
   address: string
@@ -29,16 +30,23 @@ const SendOnChainAction: FCT = (props) => {
 
   const feeSatAmount = feeData?.onChainTxFee?.amount
 
-  const handleSend = (event: MouseEvent<HTMLButtonElement>) => {
+  const handleSend = async (event: MouseEvent<HTMLButtonElement>) => {
     event.preventDefault()
-    sendPayment({
-      variables: {
-        input: {
-          walletId: props.btcWalletId,
-          address: props.address,
-          amount: props.satAmount,
-          memo: props.memo,
-        },
+    await recordTrace({
+      spanName: "on-chain-send",
+      fnName: sendPayment.name,
+      exception: paymentError,
+      fn: () => {
+        sendPayment({
+          variables: {
+            input: {
+              walletId: props.btcWalletId,
+              address: props.address,
+              amount: props.satAmount,
+              memo: props.memo,
+            },
+          },
+        })
       },
     })
   }

src/components/transactions/list.tsx

@@ -6,6 +6,7 @@ import { Spinner } from "@galoymoney/react"
 import useMainQuery from "hooks/use-main-query"
 import TransactionItem from "components/transactions/item"
 import { translate, NoPropsFCT } from "store/index"
+import { recordTrace } from "store/client-tracing/tracing"
 
 const TRANSACTIONS_PER_PAGE = 25
 const EMPTY_CONNECTION = {
@@ -67,7 +68,19 @@ const TransactionList: NoPropsFCT = () => {
         </div>
       ) : (
         pageInfo.hasNextPage && (
-          <div className="load-more link" onClick={fetchNextTransactionsPage}>
+          <div
+            className="load-more link"
+            onClick={async () => {
+              await recordTrace({
+                spanName: "fetch transaction-list",
+                fnName: fetchNextTransactionsPage.name,
+                attr: { key: "pageInfo", value: pageInfo.__typename ?? "unkown" },
+                fn: () => {
+                  fetchNextTransactionsPage()
+                },
+              })
+            }}
+          >
             {translate("Load more transactions")}
           </div>
         )

src/store/client-tracing/trace-provider.tsx

@@ -0,0 +1,50 @@
+import { trace } from "@opentelemetry/api"
+import { ZoneContextManager } from "@opentelemetry/context-zone"
+import { registerInstrumentations } from "@opentelemetry/instrumentation"
+import { FetchInstrumentation } from "@opentelemetry/instrumentation-fetch"
+import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http"
+import { SemanticResourceAttributes } from "@opentelemetry/semantic-conventions"
+import { Resource } from "@opentelemetry/resources"
+import { WebTracerProvider } from "@opentelemetry/sdk-trace-web"
+import { BatchSpanProcessor, ConsoleSpanExporter } from "@opentelemetry/sdk-trace-base"
+
+const provider = new WebTracerProvider({
+  resource: new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: "galoy-web-wallet-profile",
+  }),
+})
+const exporter = new OTLPTraceExporter({
+  url: "https://api.honeycomb.io:443/v1/traces",
+  headers: {
+    "Content-Type": "application/json",
+    "x-honeycomb-team": "CLov9kTZIbWamzaucsjvgC",
+  },
+  concurrencyLimit: 10,
+})
+
+provider.addSpanProcessor(new BatchSpanProcessor(new ConsoleSpanExporter()))
+provider.addSpanProcessor(new BatchSpanProcessor(exporter))
+
+trace.setGlobalTracerProvider(provider)
+const name = "galoy-web-wallet"
+const version = "0.1.0"
+export const tracer = trace.getTracer(name, version)
+
+const fetchInstrumentation = new FetchInstrumentation()
+fetchInstrumentation.setTracerProvider(provider)
+
+provider.register({
+  contextManager: new ZoneContextManager(),
+})
+
+registerInstrumentations({
+  instrumentations: [fetchInstrumentation],
+})
+
+export type TraceProviderProps = {
+  children?: React.ReactNode
+}
+
+export default function TraceProvider({ children }: TraceProviderProps) {
+  return <>{children}</>
+}

src/store/client-tracing/tracing.ts

@@ -0,0 +1,78 @@
+import { context, SpanKind, SpanStatusCode, trace } from "@opentelemetry/api"
+import { SemanticAttributes } from "@opentelemetry/semantic-conventions"
+
+type Attr = {
+  key: string
+  value: string
+}
+
+type TracingFields = {
+  spanName: string
+  attachSpan?: boolean
+  fnName?: string
+  attr?: Attr
+  fn?: () => void
+  fnArgs?: string[] | number[]
+  exception?: string
+}
+
+export const recordTrace = async ({
+  spanName,
+  attachSpan,
+  attr,
+  fnName,
+  fn,
+  fnArgs,
+  exception,
+}: TracingFields) => {
+  const functionName = fnName || fn?.name || "unknown"
+  const tracer = trace.getTracer("galoy-web-wallet")
+  const ctx = context.active()
+  const currentSpan = trace.getSpan(ctx)
+
+  tracer.startActiveSpan(spanName, { kind: SpanKind.CLIENT }, async (rootSpan) => {
+    if (attachSpan && currentSpan) {
+      // eslint-disable-next-line no-param-reassign
+      rootSpan = currentSpan
+    }
+    rootSpan.setAttribute("pageUrlwindow", window.location.href)
+    if (attr) {
+      rootSpan.setAttribute(attr.key, attr.value)
+    }
+    try {
+      if (fn) {
+        rootSpan.setAttribute(SemanticAttributes.CODE_FUNCTION, functionName)
+        if (fnArgs) {
+          rootSpan.setAttribute("fn.arguments", fnArgs)
+        }
+        const resp = await Promise.resolve(fn())
+        if ((resp as unknown) instanceof Error) {
+          rootSpan.recordException(resp as unknown as Error)
+          rootSpan.setStatus({
+            code: SpanStatusCode.ERROR,
+          })
+        }
+        rootSpan.setStatus({
+          code: SpanStatusCode.OK,
+        })
+      }
+      if (exception) {
+        rootSpan.setStatus({
+          code: SpanStatusCode.ERROR,
+          message: exception,
+        })
+      }
+    } catch (err) {
+      rootSpan.recordException(err)
+      rootSpan.setStatus({
+        code: SpanStatusCode.ERROR,
+        message: err.message,
+      })
+    }
+    rootSpan.end()
+  })
+}
+
+export const getTracer = () => {
+  return trace.getTracer("galoy-web-wallet")
+}