[KODO-12017] 添加生产模式输出详细日志功能及配置

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
+.vscode
 node_modules
 bower_components
 demo/config.js

src/index.ts

@@ -1,11 +1,9 @@
-import StatisticsLogger from './statisticsLog'
 import createUploadManager, { Extra, Config, UploadOptions, UploadProgress } from './upload'
 import { Observable, IObserver } from './observable'
 import { CustomError } from './utils'
 import { UploadCompleteData } from './api'
 import compressImage from './compress'
-
-const statisticsLogger = new StatisticsLogger()
+import { Logger } from './logger'
 
 /**
  * @param file 上传文件
@@ -22,7 +20,6 @@ function upload(
   putExtra?: Partial<Extra>,
   config?: Partial<Config>
 ): Observable<UploadProgress, CustomError, UploadCompleteData> {
-
   const options: UploadOptions = {
     file,
     key,
@@ -31,12 +28,14 @@ function upload(
     config
   }
 
+  // 为每个任务创建单独的 Logger
+  const logger = new Logger(token, config?.disableStatisticsReport, config?.debugLogLevel)
   return new Observable((observer: IObserver<UploadProgress, CustomError, UploadCompleteData>) => {
     const manager = createUploadManager(options, {
       onData: (data: UploadProgress) => observer.next(data),
       onError: (err: CustomError) => observer.error(err),
       onComplete: (res: any) => observer.complete(res)
-    }, statisticsLogger)
+    }, logger)
     manager.putFile()
     return manager.stop.bind(manager)
   })

src/logger.ts

@@ -0,0 +1,72 @@
+import { createXHR } from './utils'
+
+export type LogLevel = '>=info' | '>=warn' | '>=error' | false
+
+export class Logger {
+  constructor(
+    private token: string,
+    private isReport = false,
+    private level: LogLevel = false,
+  ) { }
+
+  private stack(): string | undefined {
+    const stack = new Error().stack?.split('\n')
+    // 裁掉前三行，显示真正的函数调用点
+    return stack?.slice(3)[0]?.trim()
+  }
+
+  private report(logs: any[], retry = 3) {
+    if (!this.isReport) return
+
+    const xhr = createXHR()
+    xhr.open('POST', 'https://uplog.qbox.me/log/3')
+    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
+    xhr.setRequestHeader('Authorization', 'UpToken ' + this.token)
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === 4 && xhr.status !== 200 && retry > 0) {
+        this.report(logs, retry - 1)
+      }
+    }
+
+    const formattedLogs = logs.map(log => {
+      try { return JSON.stringify(log) }
+      catch (error) { return JSON.stringify(error) }
+    })
+
+    xhr.send(formattedLogs.join('\n'))
+  }
+
+  /**
+   * @param  {any[]} ...args
+   * 输出 info 级别的调试信息
+   */
+  info(...args: any[]) {
+    const allowLevel: LogLevel[] = ['>=info']
+    if (allowLevel.includes(this.level)) {
+      console.log('Qiniu-JS-SDK[info]: ', ...args)
+    }
+  }
+
+  /**
+   * @param  {any[]} ...args
+   * 输出 warn 级别的调试信息
+   */
+  warn(...args: any[]) {
+    const allowLevel: LogLevel[] = ['>=info', '>=warn']
+    if (allowLevel.includes(this.level)) {
+      console.warn('Qiniu-JS-SDK[warn]: ', ...args)
+    }
+  }
+
+  /**
+   * @param  {any[]} ...args
+   * 输出 error 级别的调试信息
+   */
+  error(...args: any[]) {
+    const allowLevel: LogLevel[] = ['>=info', '>=warn', '>=error']
+    if (allowLevel.includes(this.level)) {
+      console.error('Qiniu-JS-SDK[error]: ', ...args)
+      this.report([this.stack(), ...args])
+    }
+  }
+}

src/upload/base.ts

@@ -1,7 +1,7 @@
 import * as utils from '../utils'
 import { getUploadUrl, UploadCompleteData } from '../api'
 
-import StatisticsLogger from '../statisticsLog'
+import { Logger, LogLevel } from '../logger'
 import { region } from '../config'
 
 export const DEFAULT_CHUNK_SIZE = 4 // 单位 MB
@@ -32,14 +32,16 @@ export interface Config {
   uphost: string
   /** 自定义分片上传并发请求量 */
   concurrentRequestLimit: number
-  /** 是否禁止静态日志上报 */
-  disableStatisticsReport: boolean
   /** 分片大小，单位为 MB */
   chunkSize: number
   /** 上传域名协议 */
   upprotocol: 'http:' | 'https:'
   /** 上传区域 */
   region?: typeof region[keyof typeof region]
+  /** 是否禁止静态日志上报 */
+  disableStatisticsReport: boolean
+  /** 设置调试日志输出模式，默认 false，不输出任何日志 */
+  debugLogLevel?: LogLevel
 }
 
 export interface UploadOptions {
@@ -103,7 +105,7 @@ export default abstract class Base {
 
   protected abstract run(): utils.Response<any>
 
-  constructor(options: UploadOptions, handlers: UploadHandler, private statisticsLogger: StatisticsLogger) {
+  constructor(options: UploadOptions, handlers: UploadHandler, protected logger: Logger) {
     this.config = {
       useCdnDomain: true,
       disableStatisticsReport: false,
@@ -117,69 +119,80 @@ export default abstract class Base {
       ...options.config
     }
 
+    logger.info('inited Config', this.config)
+
     this.putExtra = {
       fname: '',
       ...options.putExtra
     }
 
+    logger.info('inited putExtra', this.putExtra)
+
     this.file = options.file
     this.key = options.key
     this.token = options.token
 
     this.onData = handlers.onData
     this.onError = handlers.onError
     this.onComplete = handlers.onComplete
+
     try {
       this.bucket = utils.getPutPolicy(this.token).bucket
     } catch (e) {
       this.onError(e)
+      logger.error('get bucket from token failed.', e)
     }
   }
 
-  public async putFile(): Promise<utils.ResponseSuccess<UploadCompleteData>> {
+  public async putFile(): Promise<void> {
     this.aborted = false
     if (!this.putExtra.fname) {
+      this.logger.info('use file.name as fname.')
       this.putExtra.fname = this.file.name
     }
 
     if (this.file.size > 10000 * GB) {
-      const err = new Error('file size exceed maximum value 10000G')
+      const errorMessage = 'file size exceed maximum value 10000G'
+      const err = new Error(errorMessage)
+      this.logger.error(errorMessage)
       this.onError(err)
       throw err
     }
 
     if (this.putExtra.customVars) {
       if (!utils.isCustomVarsValid(this.putExtra.customVars)) {
-        const err = new Error('customVars key should start width x:')
+        const errorMessage = 'customVars key should start width x:'
+        const err = new Error(errorMessage)
+        this.logger.error(errorMessage)
         this.onError(err)
         throw err
       }
     }
 
     if (this.putExtra.metadata) {
       if (!utils.isMetaDataValid(this.putExtra.metadata)) {
-        const err = new Error('metadata key should start with x-qn-meta-')
+        const errorMessage = 'metadata key should start with x-qn-meta-'
+        const err = new Error(errorMessage)
+        this.logger.error(errorMessage)
         this.onError(err)
         throw err
       }
     }
 
     try {
+      this.logger.info('getUploadUrl')
       this.uploadUrl = await getUploadUrl(this.config, this.token)
       this.uploadAt = new Date().getTime()
 
       const result = await this.run()
       this.onComplete(result.data)
-
-      if (!this.config.disableStatisticsReport) {
-        this.sendLog(result.reqId, 200)
-      }
-
-      return result
-
+      this.sendLog(result.reqId, 200) // 收集成功的日志感觉没啥用？
+      return
     } catch (err) {
+      this.logger.error(err)
+
       this.clear()
-      if (err.isRequestError && !this.config.disableStatisticsReport) {
+      if (err.isRequestError) {
         const reqId = this.aborted ? '' : err.reqId
         const code = this.aborted ? -2 : err.code
         this.sendLog(reqId, code)
@@ -191,20 +204,23 @@ export default abstract class Base {
       // 1. 满足 needRetry 的条件且 retryCount 不为 0
       // 2. uploadId 无效时在 resume 里会清除本地数据，并且这里触发重新上传
       if (needRetry && notReachRetryCount || err.code === 612) {
+        this.logger.warn(`error auto retry: ${this.retryCount}/${this.config.retryCount}`)
         return this.putFile()
       }
 
       this.onError(err)
-      throw err
     }
   }
 
   private clear() {
+    this.logger.info('start cleaning all xhr.')
     this.xhrList.forEach(xhr => xhr.abort())
+    this.logger.info('cleanup completed.')
     this.xhrList = []
   }
 
   public stop() {
+    this.logger.info('stop.')
     this.clear()
     this.aborted = true
   }
@@ -214,7 +230,7 @@ export default abstract class Base {
   }
 
   private sendLog(reqId: string, code: number) {
-    this.statisticsLogger.log({
+    this.logger.info({
       code,
       reqId,
       host: utils.getDomainFromUrl(this.uploadUrl),
@@ -225,7 +241,7 @@ export default abstract class Base {
       bytesSent: this.progress ? this.progress.total.loaded : 0,
       upType: 'jssdk-h5',
       size: this.file.size
-    }, this.token)
+    })
   }
 
   public getProgressInfoItem(loaded: number, size: number) {

src/upload/direct.ts

@@ -5,6 +5,8 @@ import { UploadCompleteData } from '../api'
 export default class Direct extends Base {
 
   protected async run() {
+    this.logger.info('start run Direct.')
+
     const formData = new FormData()
     formData.append('file', this.file)
     formData.append('token', this.token)
@@ -14,10 +16,13 @@ export default class Direct extends Base {
     formData.append('fname', this.putExtra.fname)
 
     if (this.putExtra.customVars) {
+      this.logger.info('inited customVars.')
       const { customVars } = this.putExtra
       Object.keys(customVars).forEach(key => formData.append(key, customVars[key].toString()))
     }
 
+    this.logger.info('inited formData.')
+
     const result = await request<UploadCompleteData>(this.uploadUrl, {
       method: 'POST',
       body: formData,
@@ -27,6 +32,7 @@ export default class Direct extends Base {
       onCreate: xhr => this.addXhr(xhr)
     })
 
+    this.logger.info('finishDirectProgress.')
     this.finishDirectProgress()
     return result
   }
@@ -40,6 +46,7 @@ export default class Direct extends Base {
   private finishDirectProgress() {
     // 在某些浏览器环境下，xhr 的 progress 事件无法被触发，progress 为 null，这里 fake 下
     if (!this.progress) {
+      this.logger.warn('progress is null')
       this.progress = { total: this.getProgressInfoItem(this.file.size, this.file.size) }
       this.onData(this.progress)
       return

src/upload/index.ts

@@ -1,7 +1,7 @@
 import Resume from './resume'
 import Direct from './direct'
 import { UploadOptions, UploadHandler } from './base'
-import StatisticsLogger from '../statisticsLog'
+import { Logger } from '../logger'
 import { MB } from '../utils'
 
 export * from './base'
@@ -10,13 +10,18 @@ export * from './resume'
 export default function createUploadManager(
   options: UploadOptions,
   handlers: UploadHandler,
-  statisticsLogger: StatisticsLogger
+  logger: Logger
 ) {
   if (options.config && options.config.forceDirect) {
-    return new Direct(options, handlers, statisticsLogger)
+    logger.info('ues forceDirect mode.')
+    return new Direct(options, handlers, logger)
   }
 
-  return options.file.size > 4 * MB
-    ? new Resume(options, handlers, statisticsLogger)
-    : new Direct(options, handlers, statisticsLogger)
+  if (options.file.size > 4 * MB) {
+    logger.info('file size over 4M, use Resume.')
+    return new Resume(options, handlers, logger)
+  }
+
+  logger.info('file size less than 4M, use Direct.')
+  return new Direct(options, handlers, logger)
 }