stacker.news/components/logger.js

import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
import { useMe } from './me'
import fancyNames from '@/lib/fancy-names.json'
import { gql, useMutation, useQuery } from '@apollo/client'
import { WALLET_LOGS } from '@/fragments/wallet'
import { getWalletBy } from '@/lib/constants'

const generateFancyName = () => {
  // 100 adjectives * 100 nouns * 10000 = 100M possible names
  const pickRandom = (array) => array[Math.floor(Math.random() * array.length)]
  const adj = pickRandom(fancyNames.adjectives)
  const noun = pickRandom(fancyNames.nouns)
  const id = Math.floor(Math.random() * fancyNames.maxSuffix)
  return `${adj}-${noun}-${id}`
}

export function detectOS () {
  if (!window.navigator) return ''

  const userAgent = window.navigator.userAgent
  const platform = window.navigator.userAgentData?.platform || window.navigator.platform
  const macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K']
  const windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE']
  const iosPlatforms = ['iPhone', 'iPad', 'iPod']
  let os = null

  if (macosPlatforms.indexOf(platform) !== -1) {
    os = 'Mac OS'
  } else if (iosPlatforms.indexOf(platform) !== -1) {
    os = 'iOS'
  } else if (windowsPlatforms.indexOf(platform) !== -1) {
    os = 'Windows'
  } else if (/Android/.test(userAgent)) {
    os = 'Android'
  } else if (/Linux/.test(platform)) {
    os = 'Linux'
  }

  return os
}

export const LoggerContext = createContext()

export const LoggerProvider = ({ children }) => {
  return (
    <ServiceWorkerLoggerProvider>
      <WalletLoggerProvider>
        {children}
      </WalletLoggerProvider>
    </ServiceWorkerLoggerProvider>
  )
}

const ServiceWorkerLoggerContext = createContext()

function ServiceWorkerLoggerProvider ({ children }) {
  const me = useMe()
  const [name, setName] = useState()
  const [os, setOS] = useState()

  useEffect(() => {
    let name = window.localStorage.getItem('fancy-name')
    if (!name) {
      name = generateFancyName()
      window.localStorage.setItem('fancy-name', name)
    }
    setName(name)
    setOS(detectOS())
  }, [])

  const log = useCallback(level => {
    return async (message, context) => {
      if (!me || !me.privates?.diagnostics) return
      const env = {
        userAgent: window.navigator.userAgent,
        // os may not be initialized yet
        os: os || detectOS()
      }
      const body = {
        level,
        env,
        // name may be undefined if it wasn't stored in local storage yet
        // we fallback to local storage since on page reloads, the name may wasn't fetched from local storage yet
        name: name || window.localStorage.getItem('fancy-name'),
        message,
        context
      }
      await fetch('/api/log', {
        method: 'post',
        headers: {
          'Content-type': 'application/json'
        },
        body: JSON.stringify(body)
      }).catch(console.error)
    }
  }, [me?.privates?.diagnostics, name, os])

  const logger = useMemo(() => ({
    info: log('info'),
    warn: log('warn'),
    error: log('error'),
    name
  }), [log, name])

  useEffect(() => {
    // for communication between app and service worker
    const channel = new MessageChannel()
    navigator?.serviceWorker?.controller?.postMessage({ action: 'MESSAGE_PORT' }, [channel.port2])
    channel.port1.onmessage = (event) => {
      const { message, level, context } = Object.assign({ level: 'info' }, event.data)
      logger[level](message, context)
    }
  }, [logger])

  return (
    <ServiceWorkerLoggerContext.Provider value={logger}>
      {children}
    </ServiceWorkerLoggerContext.Provider>
  )
}

export function useServiceWorkerLogger () {
  return useContext(ServiceWorkerLoggerContext)
}

const WalletLoggerContext = createContext()
const WalletLogsContext = createContext()

const initIndexedDB = async (dbName, storeName) => {
  return new Promise((resolve, reject) => {
    if (!window.indexedDB) {
      return reject(new Error('IndexedDB not supported'))
    }

    // https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB
    const request = window.indexedDB.open(dbName, 1)

    let db
    request.onupgradeneeded = () => {
      // this only runs if version was changed during open
      db = request.result
      if (!db.objectStoreNames.contains(storeName)) {
        const objectStore = db.createObjectStore(storeName, { autoIncrement: true })
        objectStore.createIndex('ts', 'ts')
        objectStore.createIndex('wallet_ts', ['wallet', 'ts'])
      }
    }

    request.onsuccess = () => {
      // this gets called after onupgradeneeded finished
      db = request.result
      resolve(db)
    }

    request.onerror = () => {
      reject(new Error('failed to open IndexedDB'))
    }
  })
}

const WalletLoggerProvider = ({ children }) => {
  const me = useMe()
  const [logs, setLogs] = useState([])
  let dbName = 'app:storage'
  if (me) {
    dbName = `${dbName}:${me.id}`
  }
  const idbStoreName = 'wallet_logs'
  const idb = useRef()
  const logQueue = useRef([])

  useQuery(WALLET_LOGS, {
    fetchPolicy: 'network-only',
    // required to trigger onCompleted on refetches
    notifyOnNetworkStatusChange: true,
    onCompleted: ({ walletLogs }) => {
      setLogs((prevLogs) => {
        const existingIds = prevLogs.map(({ id }) => id)
        const logs = walletLogs
          .filter(({ id }) => !existingIds.includes(id))
          .map(({ createdAt, wallet: walletType, ...log }) => {
            return {
              ts: +new Date(createdAt),
              wallet: getWalletBy('type', walletType).logTag,
              ...log
            }
          })
        return [...prevLogs, ...logs].sort((a, b) => a.ts - b.ts)
      })
    }
  })

  const [deleteServerWalletLogs] = useMutation(
    gql`
      mutation deleteWalletLogs($wallet: String) {
        deleteWalletLogs(wallet: $wallet)
      }
    `,
    {
      onCompleted: (_, { variables: { wallet: walletType } }) => {
        setLogs((logs) => {
          return logs.filter(l => walletType ? l.wallet !== getWalletBy('type', walletType).logTag : false)
        })
      }
    }
  )

  const saveLog = useCallback((log) => {
    if (!idb.current) {
      // IDB may not be ready yet
      return logQueue.current.push(log)
    }
    const tx = idb.current.transaction(idbStoreName, 'readwrite')
    const request = tx.objectStore(idbStoreName).add(log)
    request.onerror = () => console.error('failed to save log:', log)
  }, [])

  useEffect(() => {
    initIndexedDB(dbName, idbStoreName)
      .then(db => {
        idb.current = db

        // load all logs from IDB
        const tx = idb.current.transaction(idbStoreName, 'readonly')
        const store = tx.objectStore(idbStoreName)
        const index = store.index('ts')
        const request = index.getAll()
        request.onsuccess = () => {
          const logs = request.result
          setLogs((prevLogs) => {
            // sort oldest first to keep same order as logs are appended
            return [...prevLogs, ...logs].sort((a, b) => a.ts - b.ts)
          })
        }

        // flush queued logs to IDB
        logQueue.current.forEach(q => {
          const isLog = !!q.wallet
          if (isLog) saveLog(q)
        })

        logQueue.current = []
      })
      .catch(console.error)
    return () => idb.current?.close()
  }, [])

  const appendLog = useCallback((wallet, level, message) => {
    const log = { wallet: wallet.logTag, level, message, ts: +new Date() }
    saveLog(log)
    setLogs((prevLogs) => [...prevLogs, log])
  }, [saveLog])

  const deleteLogs = useCallback(async (wallet) => {
    if (!wallet || wallet.server) {
      await deleteServerWalletLogs({ variables: { wallet: wallet?.type } })
    }
    if (!wallet || !wallet.server) {
      const tx = idb.current.transaction(idbStoreName, 'readwrite')
      const objectStore = tx.objectStore(idbStoreName)
      const idx = objectStore.index('wallet_ts')
      const request = wallet ? idx.openCursor(window.IDBKeyRange.bound([wallet.logTag, -Infinity], [wallet.logTag, Infinity])) : idx.openCursor()
      request.onsuccess = function (event) {
        const cursor = event.target.result
        if (cursor) {
          cursor.delete()
          cursor.continue()
        } else {
          // finished
          setLogs((logs) => logs.filter(l => wallet ? l.wallet !== wallet.logTag : false))
        }
      }
    }
  }, [setLogs])

  return (
    <WalletLogsContext.Provider value={logs}>
      <WalletLoggerContext.Provider value={{ appendLog, deleteLogs }}>
        {children}
      </WalletLoggerContext.Provider>
    </WalletLogsContext.Provider>
  )
}

export function useWalletLogger (wallet) {
  const { appendLog, deleteLogs: innerDeleteLogs } = useContext(WalletLoggerContext)

  const log = useCallback(level => message => {
    // TODO:
    //   also send this to us if diagnostics was enabled,
    //   very similar to how the service worker logger works.
    appendLog(wallet, level, message)
    console[level !== 'error' ? 'info' : 'error'](`[${wallet.logTag}]`, message)
  }, [appendLog, wallet])

  const logger = useMemo(() => ({
    ok: (...message) => log('ok')(message.join(' ')),
    info: (...message) => log('info')(message.join(' ')),
    error: (...message) => log('error')(message.join(' '))
  }), [log, wallet])

  const deleteLogs = useCallback((w) => innerDeleteLogs(w || wallet), [innerDeleteLogs, wallet])

  return { logger, deleteLogs }
}

export function useWalletLogs (wallet) {
  const logs = useContext(WalletLogsContext)
  return logs.filter(l => !wallet || l.wallet === wallet.logTag)
}