Add setting to send diagnostics back to SN

.env.sample

@@ -65,4 +65,8 @@ DATABASE_URL="postgresql://sn:password@db:5432/stackernews?schema=public"
 # postgres container stuff
 POSTGRES_PASSWORD=password
 POSTGRES_USER=sn
-POSTGRES_DB=stackernews
+POSTGRES_DB=stackernews
+
+# slack
+SLACK_BOT_TOKEN=
+SLACK_CHANNEL_ID=

api/slack/index.js

@@ -0,0 +1,17 @@
+import { WebClient, LogLevel } from '@slack/web-api'
+
+const slackClient = global.slackClient || (() => {
+  if (!process.env.SLACK_BOT_TOKEN && !process.env.SLACK_CHANNEL_ID) {
+    console.warn('SLACK_* env vars not set, skipping slack setup')
+    return null
+  }
+  console.log('initing slack client')
+  const client = new WebClient(process.env.SLACK_BOT_TOKEN, {
+    logLevel: LogLevel.INFO
+  })
+  return client
+})()
+
+if (process.env.NODE_ENV === 'development') global.slackClient = slackClient
+
+export default slackClient

api/typeDefs/user.js

@@ -25,7 +25,7 @@ export default gql`
       noteInvites: Boolean!, noteJobIndicator: Boolean!, noteCowboyHat: Boolean!, hideInvoiceDesc: Boolean!,
       hideFromTopUsers: Boolean!, hideCowboyHat: Boolean!, clickToLoadImg: Boolean!,
       wildWestMode: Boolean!, greeterMode: Boolean!, nostrPubkey: String, nostrRelays: [String!], hideBookmarks: Boolean!,
-      noteForwardedSats: Boolean!, hideWalletBalance: Boolean!, hideIsContributor: Boolean!): User
+      noteForwardedSats: Boolean!, hideWalletBalance: Boolean!, hideIsContributor: Boolean!, diagnostics: Boolean!): User
     setPhoto(photoId: ID!): Int!
     upsertBio(bio: String!): User!
     setWalkthrough(tipPopover: Boolean, upvotePopover: Boolean): Boolean
@@ -87,6 +87,7 @@ export default gql`
     hideBookmarks: Boolean!
     hideWelcomeBanner: Boolean!
     hideWalletBalance: Boolean!
+    diagnostics: Boolean!
     clickToLoadImg: Boolean!
     wildWestMode: Boolean!
     greeterMode: Boolean!

components/logger.js

@@ -0,0 +1,109 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { useMe } from './me'
+import fancyNames from '../lib/fancy-names.json'
+
+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}`
+}
+
+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
+}
+
+const LoggerContext = createContext()
+
+export function LoggerProvider ({ 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.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?.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 (
+    <LoggerContext.Provider value={logger}>
+      {children}
+    </LoggerContext.Provider>
+  )
+}
+
+export function useLogger () {
+  return useContext(LoggerContext)
+}

components/serviceworker.js

@@ -1,6 +1,7 @@
 import { createContext, useContext, useEffect, useState, useCallback } from 'react'
 import { Workbox } from 'workbox-window'
 import { gql, useMutation } from '@apollo/client'
+import { useLogger } from './logger'
 
 const applicationServerKey = process.env.NEXT_PUBLIC_VAPID_PUBKEY
 
@@ -34,6 +35,7 @@ export const ServiceWorkerProvider = ({ children }) => {
           }
         }
       `)
+  const logger = useLogger()
 
   // I am not entirely sure if this is needed since at least in Brave,
   // using `registration.pushManager.subscribe` also prompts the user.
@@ -60,6 +62,8 @@ export const ServiceWorkerProvider = ({ children }) => {
     // Brave users must enable a flag in brave://settings/privacy first
     // see https://stackoverflow.com/a/69624651
     let pushSubscription = await registration.pushManager.subscribe(subscribeOptions)
+    const { endpoint } = pushSubscription
+    logger.info('subscribed to push notifications', { endpoint })
     // convert keys from ArrayBuffer to string
     pushSubscription = JSON.parse(JSON.stringify(pushSubscription))
     // Send subscription to service worker to save it so we can use it later during `pushsubscriptionchange`
@@ -68,24 +72,30 @@ export const ServiceWorkerProvider = ({ children }) => {
       action: 'STORE_SUBSCRIPTION',
       subscription: pushSubscription
     })
+    logger.info('sent STORE_SUBSCRIPTION to service worker', { endpoint })
     // send subscription to server
     const variables = {
-      endpoint: pushSubscription.endpoint,
+      endpoint,
       p256dh: pushSubscription.keys.p256dh,
       auth: pushSubscription.keys.auth
     }
     await savePushSubscription({ variables })
+    logger.info('sent push subscription to server', { endpoint })
   }
 
   const unsubscribeFromPushNotifications = async (subscription) => {
     await subscription.unsubscribe()
     const { endpoint } = subscription
+    logger.info('unsubscribed from push notifications', { endpoint })
     await deletePushSubscription({ variables: { endpoint } })
+    logger.info('deleted push subscription from server', { endpoint })
   }
 
   const togglePushSubscription = useCallback(async () => {
     const pushSubscription = await registration.pushManager.getSubscription()
-    if (pushSubscription) return unsubscribeFromPushNotifications(pushSubscription)
+    if (pushSubscription) {
+      return unsubscribeFromPushNotifications(pushSubscription)
+    }
     return subscribeToPushNotifications()
   })
 
@@ -100,12 +110,17 @@ export const ServiceWorkerProvider = ({ children }) => {
     // we sync with server manually by checking on every page reload if the push subscription changed.
     // see https://medium.com/@madridserginho/how-to-handle-webpush-api-pushsubscriptionchange-event-in-modern-browsers-6e47840d756f
     navigator?.serviceWorker?.controller?.postMessage?.({ action: 'SYNC_SUBSCRIPTION' })
+    logger.info('sent SYNC_SUBSCRIPTION to service worker')
   }, [])
 
   useEffect(() => {
-    if (!support.serviceWorker) return
+    if (!support.serviceWorker) {
+      logger.info('device does not support service worker')
+      return
+    }
     const wb = new Workbox('/sw.js', { scope: '/' })
     wb.register().then(registration => {
+      logger.info('service worker registration successful')
       setRegistration(registration)
     })
   }, [support.serviceWorker])

fragments/users.js

@@ -31,6 +31,7 @@ export const ME = gql`
       hideFromTopUsers
       hideCowboyHat
       clickToLoadImg
+      diagnostics
       wildWestMode
       greeterMode
       lastCheckedJobs
@@ -62,6 +63,7 @@ export const SETTINGS_FIELDS = gql`
     hideIsContributor
     clickToLoadImg
     hideWalletBalance
+    diagnostics
     nostrPubkey
     nostrRelays
     wildWestMode
@@ -91,14 +93,14 @@ mutation setSettings($tipDefault: Int!, $turboTipping: Boolean!, $fiatCurrency:
   $noteInvites: Boolean!, $noteJobIndicator: Boolean!, $noteCowboyHat: Boolean!, $hideInvoiceDesc: Boolean!,
   $hideFromTopUsers: Boolean!, $hideCowboyHat: Boolean!, $clickToLoadImg: Boolean!,
   $wildWestMode: Boolean!, $greeterMode: Boolean!, $nostrPubkey: String, $nostrRelays: [String!], $hideBookmarks: Boolean!,
-  $noteForwardedSats: Boolean!, $hideWalletBalance: Boolean!, $hideIsContributor: Boolean!) {
+  $noteForwardedSats: Boolean!, $hideWalletBalance: Boolean!, $hideIsContributor: Boolean!, $diagnostics: Boolean!) {
   setSettings(tipDefault: $tipDefault, turboTipping: $turboTipping,  fiatCurrency: $fiatCurrency,
     noteItemSats: $noteItemSats, noteEarning: $noteEarning, noteAllDescendants: $noteAllDescendants,
     noteMentions: $noteMentions, noteDeposits: $noteDeposits, noteInvites: $noteInvites,
     noteJobIndicator: $noteJobIndicator, noteCowboyHat: $noteCowboyHat, hideInvoiceDesc: $hideInvoiceDesc,
     hideFromTopUsers: $hideFromTopUsers, hideCowboyHat: $hideCowboyHat, clickToLoadImg: $clickToLoadImg,
     wildWestMode: $wildWestMode, greeterMode: $greeterMode, nostrPubkey: $nostrPubkey, nostrRelays: $nostrRelays, hideBookmarks: $hideBookmarks,
-    noteForwardedSats: $noteForwardedSats, hideWalletBalance: $hideWalletBalance, hideIsContributor: $hideIsContributor) {
+    noteForwardedSats: $noteForwardedSats, hideWalletBalance: $hideWalletBalance, hideIsContributor: $hideIsContributor, diagnostics: $diagnostics) {
       ...SettingsFields
     }
   }