Skip to main content

API Logger (in-device/in-web)

API Logger store

an API logger within the native app’s embedded web view (web container) or in-web via DevTools panel so users can easily monitor all API calls made by the web page.

References:

  • Current implementation:
  • Continuation of prior RFC (deprecated)

Implementation Overview

  • Use WeakMap for storing logs with capping:
    • Server-side: WeakMap keyed by req (Node IncomingMessage) to isolate logs per SSR/ISR/CSP request
    • Client-side: WeakMap keyed by a provider context object created by ApiLoggerProvider
    • Max entries: MAX_LOG_ENTRIES (100). When exceeded, append a single CAPPED_LOG_NOTICE with tag log-limit
  • Hydration and retrieval:
    • Next context exposes getters for serverApiLogs and cspApiLogs so they hydrate into __NEXT_DATA__
    • getSharedCacheableServerProps() attaches serverApiLogs via conditionallyAddServerApiLogsGetter(serverCtx, cacheableCtx)
    • cacheableServerProps() attaches cspApiLogs via conditionallyAddCspApiLogsGetter(cacheableCtx)
    • DevTools getServerSideApiLogs() reads both serverApiLogs and cspApiLogs from __NEXT_DATA__.props.pageProps and concatenates
  • CSR logging funnels through callAPIClientSide, appending entries directly without React dispatches
  • Env gating ensures no production exposure:
    • Gate: process.env.NODE_CONFIG_ENV !== 'production' (aka ALLOW_API_LOGGING_ENV_GATE)
    • Toggle: cookie tv-api-logger must be set to "1"
  • Server-side flow
    • getConditionalApiLoggerObj(ctx) returns { appendApiLog } only when cookie is enabled and env gate allows
    • Cookie is detected from ctx.req.cookies['tv-api-logger'] (SSR) or ctx.viewCacheKey['tv-api-logger'] (CSP; extracted via extractViewCacheKey)
    • callAPIServerSide() calls appendApiLog() to add to WeakMap<req, ApiLogEntry[]>
    • Getters: conditionallyAddServerApiLogsGetter(serverCtx, cacheableCtx) and conditionallyAddCspApiLogsGetter(cacheableCtx) enable hydration for SSR and CSP pages
  • Client-side flow
    • ApiLoggerProvider creates a context object and registers it via setClientApiLoggerContext(contextObj)
    • callAPIClientSide() calls logClientApiCall() to add entries to WeakMap<contextObj, ApiLogEntry[]>
    • DevTools reads getClientApiLogs() and merges with SSR+CSP logs for unified display
  • DevTools Integration
    • Toggle Enable API Logger writes/removes cookie and refreshes page
    • Show API Logger opens the modal/panel displaying combined entries
    • Provider upsert: DevTools conditionally injects ApiLoggerProvider via upsertProvider(<ApiLoggerProvider />) when the cookie is enabled, ensuring a single instance and clean removal when disabled