feat(frontend): add request-id observability logs for api calls

src/lib/api-client.ts

@@ -13,11 +13,44 @@ function createClient(): AxiosInstance {
 
   instance.interceptors.request.use((request) => {
     const { apiKey } = getRuntimeConfig()
+    const requestId = crypto.randomUUID()
     if (apiKey) request.headers['x-api-key'] = apiKey
-    request.headers['x-request-id'] = crypto.randomUUID()
+    request.headers['x-request-id'] = requestId
+    request.headers['x-client-name'] = 'fabric-frontend'
+
+    console.info('[api:request]', {
+      method: request.method,
+      url: `${request.baseURL ?? ''}${request.url ?? ''}`,
+      requestId,
+    })
     return request
   })
 
+  instance.interceptors.response.use(
+    (response) => {
+      const requestId = response.headers['x-request-id'] ?? response.config.headers['x-request-id']
+      console.info('[api:response]', {
+        method: response.config.method,
+        url: `${response.config.baseURL ?? ''}${response.config.url ?? ''}`,
+        status: response.status,
+        requestId,
+      })
+      return response
+    },
+    (error) => {
+      const response = error?.response
+      const config = error?.config ?? {}
+      const requestId = response?.headers?.['x-request-id'] ?? config?.headers?.['x-request-id']
+      console.error('[api:error]', {
+        method: config.method,
+        url: `${config.baseURL ?? ''}${config.url ?? ''}`,
+        status: response?.status,
+        requestId,
+      })
+      return Promise.reject(error)
+    },
+  )
+
   return instance
 }