fix(fe2): nuxt state being missing in some cases (#5287)

packages/frontend-2/composables/logging.ts

@@ -44,6 +44,38 @@ export const useStrictLogger = async (
   return logger
 }
 
+/**
+ * Use when you need to be sure that the real structured pino logger is available
+ * (it isn't in some early startup contexts like apollo link setup)
+ *
+ * The async version is better in that it will build a real pino logger, but in sync contexts
+ * you can use this one that will at least fallback to console.log/warn/error
+ */
+export const useStrictLoggerSync = (
+  options?: Partial<{ dontNotifyFallback: boolean }>
+) => {
+  const { dontNotifyFallback } = options || {}
+
+  let nuxtApp: Optional<NuxtApp> = undefined
+  try {
+    nuxtApp = useNuxtApp()
+  } catch {
+    // suppress 'nuxt is not available'
+  }
+
+  if (nuxtApp?.$logger) return nuxtApp?.$logger
+
+  // Nuxt app not found in this scope
+  const err = new Error(
+    'Nuxt app for logger not found! Initializing fallback structured logger...'
+  )
+  const logger = buildFakePinoLogger()
+
+  if (!dontNotifyFallback) logger.error(err)
+
+  return logger
+}
+
 /**
  * Short-cut to useLogger().debug, useful when you quickly want to console.log something during development.
  * Calls to this are skipped outside of dev mode.

packages/frontend-2/lib/auth/composables/auth.ts

@@ -140,7 +140,7 @@ const useResetAuthState = (
   const resolveDistinctId = useResolveUserDistinctId()
   const { cbs } = useOnAuthStateChangeState()
   const authToken = useAuthCookie()
-  const logger = useLogger()
+  const logger = useStrictLoggerSync()
 
   return async (
     resetOptions?: Partial<{
@@ -229,7 +229,7 @@ export const useAuthManager = (
   const getMixpanel = useDeferredMixpanel()
   const postAuthRedirect = usePostAuthRedirect()
   const { markLoggedOut } = useJustLoggedOutTracking()
-  const logger = useLogger()
+  const logger = useStrictLoggerSync()
 
   /**
    * Invite token, if any

packages/frontend-2/lib/common/composables/async.ts

@@ -13,7 +13,7 @@ export type { AsyncWritableComputedOptions, AsyncWritableComputedRef }
  * @param params
  */
 export const writableAsyncComputed: typeof originalWritableAsyncComputed = (params) => {
-  const logger = useLogger()
+  const logger = useStrictLoggerSync()
   return originalWritableAsyncComputed({
     ...params,
     debugging: params.debugging?.log
@@ -34,7 +34,7 @@ export const writableAsyncComputed: typeof originalWritableAsyncComputed = (para
  */
 export const watchAsync = ((...args: Parameters<typeof watch>) => {
   const [source, cb, options] = args
-  const logger = useLogger()
+  const logger = useStrictLoggerSync()
 
   const watches = shallowRef<Array<Promise<unknown>>>([])
 

packages/frontend-2/lib/common/helpers/debugging.ts

@@ -11,7 +11,7 @@ export function wrapRefWithTracking<R extends Ref<unknown>>(
 ): R {
   const { writesOnly, readsOnly } = options || {}
   const getTrace = () => (new Error('Trace:').stack || '').substring(7)
-  const logger = useLogger()
+  const logger = useStrictLoggerSync()
 
   return computed({
     get: () => {

packages/frontend-2/lib/common/helpers/graphql.ts

@@ -195,7 +195,7 @@ export function updateCacheByFilter<TData, TVariables = unknown>(
 ): boolean {
   const { fragment, query } = filter
   const { ignoreCacheErrors = true, overwrite = true } = options
-  const logger = useLogger()
+  const logger = useStrictLoggerSync()
 
   if (!fragment && !query) {
     throw new Error(
@@ -382,7 +382,7 @@ export function modifyObjectFields<
 ) {
   const { fieldNameWhitelist, debug = false } = options || {}
 
-  const logger = useLogger()
+  const logger = useStrictLoggerSync()
   const invocationId = nanoid()
   const log = (...args: Parameters<typeof logger.debug>) => {
     if (!debug) return

packages/frontend-2/lib/common/helpers/route.ts

@@ -203,7 +203,7 @@ export const doesRouteFitTarget = (fullPathA: string, fullPathB: string) => {
     urlA = new URL(fullPathA, fakeOrigin)
     urlB = new URL(fullPathB, fakeOrigin)
   } catch (e) {
-    useLogger().warn('Failed to parse URLs', e)
+    useStrictLoggerSync().warn('Failed to parse URLs', e)
     return false
   }
 

packages/frontend-2/lib/viewer/composables/setup/embed.ts

@@ -37,7 +37,7 @@ export function isEmbedOptions(obj: unknown): obj is EmbedOptions {
 }
 
 export function deserializeEmbedOptions(embedString: string | null): EmbedOptions {
-  const logger = useLogger()
+  const logger = useStrictLoggerSync()
   if (!embedString) {
     return { isEnabled: false }
   }