better apollo error msgs

packages/frontend-2/lib/core/configs/apollo.ts

@@ -304,13 +304,15 @@ function createLink(params: {
 
     const shouldSkip = !!res.operation.getContext().skipLoggingErrors
     if (!isSubTokenMissingError && !shouldSkip) {
+      const errMsg = res.networkError?.message || res.graphQLErrors?.[0]?.message
       logger.error(
         {
           ...omit(res, ['forward', 'response']),
           networkErrorMessage: res.networkError?.message,
-          gqlErrorMessages: res.graphQLErrors?.map((e) => e.message)
+          gqlErrorMessages: res.graphQLErrors?.map((e) => e.message),
+          errorMessage: errMsg
         },
-        'Apollo Client error'
+        'Apollo Client error: {errorMessage}'
       )
     }
 

packages/frontend-2/lib/core/helpers/observability.ts

@@ -3,7 +3,42 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 
 import { Observability } from '@speckle/shared'
-import { noop } from 'lodash-es'
+import { get, isBoolean, isNumber, isObjectLike, isString, noop } from 'lodash-es'
+
+/**
+ * Add pino-pretty like formatting
+ */
+const prettify = (log: object, msg: string) =>
+  msg.replace(/{([^{}]+)}/g, (match: string, p1: string) => {
+    const val = get(log, p1)
+    if (val === undefined) return match
+
+    const formattedValue =
+      isString(val) || isNumber(val) || isBoolean(val) ? val : JSON.stringify(val)
+    return formattedValue as string
+  })
+
+/**
+ * Wrap any logger call w/ logic that prettifies the error message like pino-pretty does
+ */
+const log =
+  (logger: (...args: unknown[]) => void) =>
+  (...vals: unknown[]) => {
+    const finalVals = vals.slice()
+
+    const firstObject = finalVals.find((v) => isObjectLike(v) && !Array.isArray(v))
+    const firstMessageIdx = finalVals.findIndex(isString)
+
+    if (firstMessageIdx !== -1) {
+      const msg = finalVals[firstMessageIdx] as string
+      finalVals.splice(firstMessageIdx, 1) // remove from array
+
+      const finalMsg = prettify(firstObject || {}, msg)
+      finalVals.unshift(finalMsg)
+    }
+
+    logger(...finalVals)
+  }
 
 export function buildFakePinoLogger(
   options?: Partial<{ onError: (...args: any[]) => void }>
@@ -11,16 +46,16 @@ export function buildFakePinoLogger(
   const errLogger = (...args: unknown[]) => {
     const { onError } = options || {}
     if (onError) onError(...args)
-    console.error(...args)
+    log(console.error)(...args)
   }
 
   const logger = {
-    debug: console.debug,
-    info: console.info,
-    warn: console.warn,
+    debug: log(console.debug),
+    info: log(console.info),
+    warn: log(console.warn),
     error: errLogger,
     fatal: errLogger,
-    trace: console.trace,
+    trace: log(console.trace),
     silent: noop
   } as unknown as ReturnType<typeof Observability.getLogger>