4 files changed, 154 insertions, 12 deletions

diff --git a/client/src/root-helpers/images.ts b/client/src/root-helpers/images.ts
index fb229ce6d..c4b09ec3c 100644
--- a/client/src/root-helpers/images.ts
+++ b/client/src/root-helpers/images.ts
@@ -1,8 +1,10 @@
+import { logger } from './logger'
+
 function imageToDataURL (input: File | Blob) {
   return new Promise<string>(res => {
     const reader = new FileReader()
 
-    reader.onerror = err => console.error('Cannot read input file.', err)
+    reader.onerror = err => logger.error('Cannot read input file.', err)
     reader.onloadend = () => res(reader.result as string)
     reader.readAsDataURL(input)
   })
diff --git a/client/src/root-helpers/index.ts b/client/src/root-helpers/index.ts
index a19855761..86301eafa 100644
--- a/client/src/root-helpers/index.ts
+++ b/client/src/root-helpers/index.ts
@@ -2,6 +2,7 @@ export * from './users'
 export * from './bytes'
 export * from './images'
 export * from './local-storage-utils'
+export * from './logger'
 export * from './peertube-web-storage'
 export * from './plugins-manager'
 export * from './string'
diff --git a/client/src/root-helpers/logger.ts b/client/src/root-helpers/logger.ts
new file mode 100644
index 000000000..cd559cfa7
--- /dev/null
+++ b/client/src/root-helpers/logger.ts
@@ -0,0 +1,138 @@
+import { ClientLogCreate } from '@shared/models/server'
+import { peertubeLocalStorage } from './peertube-web-storage'
+import { UserTokens } from './users'
+
+export type LoggerHook = (message: LoggerMessage, meta?: LoggerMeta) => void
+export type LoggerLevel = 'info' | 'warn' | 'error'
+
+export type LoggerMessage = string | Error | object
+export type LoggerMeta = Error | { [ id: string ]: any, err?: Error }
+
+declare global {
+  interface Window {
+    logger: Logger
+  }
+}
+
+class Logger {
+  private readonly hooks: { level: LoggerLevel, hook: LoggerHook }[] = []
+
+  info (message: LoggerMessage, meta?: LoggerMeta) {
+    this.runHooks('info', message, meta)
+
+    if (meta) console.log(message, meta)
+    else console.log(message)
+  }
+
+  warn (message: LoggerMessage, meta?: LoggerMeta) {
+    this.runHooks('warn', message, meta)
+
+    if (meta) console.warn(message, meta)
+    else console.warn(message)
+  }
+
+  error (message: LoggerMessage, meta?: LoggerMeta) {
+    this.runHooks('error', message, meta)
+
+    if (meta) console.error(message, meta)
+    else console.error(message)
+  }
+
+  addHook (level: LoggerLevel, hook: LoggerHook) {
+    this.hooks.push({ level, hook })
+  }
+
+  registerServerSending (serverUrl: string) {
+    this.addHook('warn', (message, meta) => this.sendClientLog(serverUrl, this.buildServerLogPayload('warn', message, meta)))
+    this.addHook('error', (message, meta) => this.sendClientLog(serverUrl, this.buildServerLogPayload('error', message, meta)))
+  }
+
+  sendClientLog (serverUrl: string, payload: ClientLogCreate | null) {
+    if (!payload) return
+
+    const headers = new Headers({
+      Accept: 'application/json',
+      'Content-Type': 'application/json'
+    })
+
+    try {
+      const tokens = UserTokens.getUserTokens(peertubeLocalStorage)
+
+      if (tokens) headers.set('Authorization', `${tokens.tokenType} ${tokens.accessToken}`)
+    } catch (err) {
+      console.error('Cannot set tokens to client log sender.', { err })
+    }
+
+    try {
+      fetch(serverUrl + '/api/v1/server/logs/client', {
+        headers,
+        method: 'POST',
+        body: JSON.stringify(payload)
+      })
+    } catch (err) {
+      console.error('Cannot send client warn/error to server.', err)
+    }
+  }
+
+  private buildServerLogPayload (level: Extract<LoggerLevel, 'warn' | 'error'>, message: LoggerMessage, meta?: LoggerMeta) {
+    if (!message) return null
+
+    return {
+      message: this.buildMessageServerLogPayload(message),
+      userAgent: navigator.userAgent,
+      url: window.location.href,
+      level,
+      stackTrace: this.buildStackServerLogPayload(message, meta),
+      meta: this.buildMetaServerLogPayload(meta)
+    }
+  }
+
+  private buildMessageServerLogPayload (message: LoggerMessage) {
+    if (typeof message === 'string') return message
+    if (message instanceof Error) return message.message
+
+    return JSON.stringify(message)
+  }
+
+  private buildStackServerLogPayload (message: LoggerMessage, meta?: LoggerMeta) {
+    if (message instanceof Error) return message.stack
+    if (meta instanceof Error) return meta.stack
+    if (meta?.err instanceof Error) return meta.err.stack
+
+    return undefined
+  }
+
+  private buildMetaServerLogPayload (meta?: LoggerMeta) {
+    if (!meta) return undefined
+    if (meta instanceof Error) return undefined
+
+    let result: string
+
+    try {
+      result = JSON.stringify(meta, (key, value) => {
+        if (key === 'err') return undefined
+
+        return value
+      })
+    } catch (err) {
+      console.error('Cannot stringify meta.', err)
+    }
+
+    return result
+  }
+
+  private runHooks (level: LoggerLevel, message: LoggerMessage, meta?: LoggerMeta) {
+    for (const hookObj of this.hooks) {
+      if (hookObj.level !== level) continue
+
+      hookObj.hook(message, meta)
+    }
+  }
+}
+
+const logger = window.logger || new Logger()
+window.logger = logger
+
+export {
+  logger
+}
diff --git a/client/src/root-helpers/plugins-manager.ts b/client/src/root-helpers/plugins-manager.ts
index 49a19781b..37a52be72 100644
--- a/client/src/root-helpers/plugins-manager.ts
+++ b/client/src/root-helpers/plugins-manager.ts
@@ -21,6 +21,7 @@ import {
 } from '@shared/models'
 import { environment } from '../environments/environment'
 import { ClientScript } from '../types'
+import { logger } from './logger'
 
 interface HookStructValue extends RegisterClientHookOptions {
   plugin: ServerConfigPlugin
@@ -48,7 +49,7 @@ type OnSettingsScripts = (pluginInfo: PluginInfo, options: RegisterClientSetting
 
 type OnClientRoute = (options: RegisterClientRouteOptions) => void
 
-const logger = debug('peertube:plugins')
+const debugLogger = debug('peertube:plugins')
 
 class PluginsManager {
   private hooks: Hooks = {}
@@ -109,10 +110,10 @@ class PluginsManager {
     const hookType = getHookType(hookName)
 
     for (const hook of this.hooks[hookName]) {
-      console.log('Running hook %s of plugin %s.', hookName, hook.plugin.name)
+      logger.info(`Running hook ${hookName} of plugin ${hook.plugin.name}`)
 
       result = await internalRunHook(hook.handler, hookType, result, params, err => {
-        console.error('Cannot run hook %s of script %s of plugin %s.', hookName, hook.clientScript.script, hook.plugin.name, err)
+        logger.error(`Cannot run hook ${hookName} of script ${hook.clientScript.script} of plugin ${hook.plugin.name}`, err)
       })
     }
 
@@ -170,7 +171,7 @@ class PluginsManager {
 
     this.loadingScopes[scope] = true
 
-    logger('Loading scope %s', scope)
+    debugLogger('Loading scope %s', scope)
 
     try {
       if (!isReload) this.loadedScopes.push(scope)
@@ -180,7 +181,7 @@ class PluginsManager {
         this.loadingScopes[scope] = false
         this.pluginsLoaded[scope].next(true)
 
-        logger('Nothing to load for scope %s', scope)
+        debugLogger('Nothing to load for scope %s', scope)
         return
       }
 
@@ -200,9 +201,9 @@ class PluginsManager {
       this.pluginsLoaded[scope].next(true)
       this.loadingScopes[scope] = false
 
-      logger('Scope %s loaded', scope)
+      debugLogger('Scope %s loaded', scope)
     } catch (err) {
-      console.error('Cannot load plugins by scope %s.', scope, err)
+      logger.error(`Cannot load plugins by scope ${scope}`, err)
     }
   }
 
@@ -211,7 +212,7 @@ class PluginsManager {
 
     const registerHook = (options: RegisterClientHookOptions) => {
       if (clientHookObject[options.target] !== true) {
-        console.error('Unknown hook %s of plugin %s. Skipping.', options.target, plugin.name)
+        logger.error(`Unknown hook ${options.target} of plugin ${plugin.name}. Skipping.`)
         return
       }
 
@@ -252,7 +253,7 @@ class PluginsManager {
 
     const peertubeHelpers = this.peertubeHelpersFactory(pluginInfo)
 
-    console.log('Loading script %s of plugin %s.', clientScript.script, plugin.name)
+    logger.info(`Loading script ${clientScript.script} of plugin ${plugin.name}`)
 
     const absURL = (environment.apiUrl || window.location.origin) + clientScript.script
     return dynamicImport(absURL)
@@ -266,7 +267,7 @@ class PluginsManager {
         })
       })
       .then(() => this.sortHooksByPriority())
-      .catch(err => console.error('Cannot import or register plugin %s.', pluginInfo.plugin.name, err))
+      .catch(err => logger.error(`Cannot import or register plugin ${pluginInfo.plugin.name}`, err))
   }
 
   private sortHooksByPriority () {
@@ -294,7 +295,7 @@ async function dynamicImport (url: string) {
     // eslint-disable-next-line no-new-func
     return new Function(`return import('${url}')`)()
   } catch {
-    console.log('Fallback to import polyfill')
+    logger.info('Fallback to import polyfill')
 
     return new Promise((resolve, reject) => {
       const vector = '$importModule$' + Math.random().toString(32).slice(2)