优化实现

Author: yinxulai

src/logger.ts

@@ -0,0 +1,60 @@
+import { reportV3, V3LogInfo } from './report-v3'
+
+export type LogLevel = 'INFO' | 'WARN' | 'ERROR' | 'OFF'
+
+export class Logger {
+  // 为每个类分配一个 id
+  // 用以区分不同的上传任务
+  private id = Logger.id += 1
+  private static id: number = 0
+
+  constructor(
+    private token: string,
+    private disableReport = true,
+    private level: LogLevel = 'OFF'
+  ) { }
+
+  /**
+   * @param  {V3LogInfo} data 上报的数据。
+   * @param  {boolean} retry 重试次数，可选，默认为 3。
+   * @description 向服务端上报统计信息。
+   */
+  report(data: V3LogInfo, retry?: number) {
+    if (this.disableReport) return
+    try { reportV3(this.token, data, retry) }
+    catch (error) { console.warn(error) }
+  }
+
+  /**
+   * @param  {unknown[]} ...args
+   * @description 输出 info 级别的调试信息。
+   */
+  info(...args: unknown[]) {
+    const allowLevel: LogLevel[] = ['INFO']
+    if (allowLevel.includes(this.level)) {
+      console.log(`Qiniu-JS-SDK [INFO][${this.id}]: `, ...args)
+    }
+  }
+
+  /**
+   * @param  {unknown[]} ...args
+   * @description 输出 warn 级别的调试信息。
+   */
+  warn(...args: unknown[]) {
+    const allowLevel: LogLevel[] = ['INFO', 'WARN']
+    if (allowLevel.includes(this.level)) {
+      console.warn(`Qiniu-JS-SDK [WARN][${this.id}]: `, ...args)
+    }
+  }
+
+  /**
+   * @param  {unknown[]} ...args
+   * @description 输出 error 级别的调试信息。
+   */
+  error(...args: unknown[]) {
+    const allowLevel: LogLevel[] = ['INFO', 'WARN', 'ERROR']
+    if (allowLevel.includes(this.level)) {
+      console.error(`Qiniu-JS-SDK [ERROR][${this.id}]: `, ...args)
+    }
+  }
+}

src/logger/index.ts

@@ -0,0 +1,48 @@
+import { createXHR, getAuthHeaders } from '../utils'
+
+export interface V3LogInfo {
+  code: number
+  reqId: string
+  host: string
+  remoteIp: string
+  port: string
+  duration: number
+  time: number
+  bytesSent: number
+  upType: 'jssdk-h5'
+  size: number
+}
+
+/**
+ * @param  {string} token 上传使用的 token
+ * @param  {V3LogInfo} data 上报的统计数据
+ * @param  {number} retry 重试的次数，默认值 3
+ * @description v3 版本的日志上传接口，参考文档 https://github.com/qbox/product/blob/master/kodo/uplog.md#%E7%89%88%E6%9C%AC-3。
+ */
+export function reportV3(token: string, data: V3LogInfo, retry = 3) {
+  const xhr = createXHR()
+  xhr.open('POST', 'https://uplog.qbox.me/log/3')
+  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
+  xhr.setRequestHeader('Authorization', getAuthHeaders(token).Authorization)
+  xhr.onreadystatechange = () => {
+    if (xhr.readyState === 4 && xhr.status !== 200 && retry > 0) {
+      reportV3(token, data, retry - 1)
+    }
+  }
+
+  // 顺序参考：https://github.com/qbox/product/blob/master/kodo/uplog.md#%E7%89%88%E6%9C%AC-3
+  const stringifyData = [
+    data.code || '',
+    data.reqId || '',
+    data.host || '',
+    data.remoteIp || '',
+    data.port || '',
+    data.duration || '',
+    data.time || '',
+    data.bytesSent || '',
+    data.upType || '',
+    data.size || ''
+  ].join(',')
+
+  xhr.send(stringifyData)
+}

src/logger/report-v3.ts

@@ -119,14 +119,14 @@ export default abstract class Base {
       ...options.config
     }
 
-    logger.info('inited Config', this.config)
+    logger.info('config inited.', this.config)
 
     this.putExtra = {
       fname: '',
       ...options.putExtra
     }
 
-    logger.info('inited putExtra', this.putExtra)
+    logger.info('putExtra inited.', this.putExtra)
 
     this.file = options.file
     this.key = options.key
@@ -139,11 +139,21 @@ export default abstract class Base {
     try {
       this.bucket = utils.getPutPolicy(this.token).bucket
     } catch (e) {
-      this.onError(e)
       logger.error('get bucket from token failed.', e)
+      this.onError(e)
     }
   }
 
+  private handleError(message: string) {
+    const err = new Error(message)
+    this.logger.error(message)
+    this.onError(err)
+  }
+
+
+  /**
+   * @description 上传文件，状态信息请通过 [Subscriber] 获取。
+   */
   public async putFile(): Promise<void> {
     this.aborted = false
     if (!this.putExtra.fname) {
@@ -152,41 +162,32 @@ export default abstract class Base {
     }
 
     if (this.file.size > 10000 * GB) {
-      const errorMessage = 'file size exceed maximum value 10000G'
-      const err = new Error(errorMessage)
-      this.logger.error(errorMessage)
-      this.onError(err)
-      throw err
+      this.handleError('file size exceed maximum value 10000G.')
+      return
     }
 
     if (this.putExtra.customVars) {
       if (!utils.isCustomVarsValid(this.putExtra.customVars)) {
-        const errorMessage = 'customVars key should start width x:'
-        const err = new Error(errorMessage)
-        this.logger.error(errorMessage)
-        this.onError(err)
-        throw err
+        this.handleError('customVars key should start width x:.')
+        return
       }
     }
 
     if (this.putExtra.metadata) {
       if (!utils.isMetaDataValid(this.putExtra.metadata)) {
-        const errorMessage = 'metadata key should start with x-qn-meta-'
-        const err = new Error(errorMessage)
-        this.logger.error(errorMessage)
-        this.onError(err)
-        throw err
+        this.handleError('metadata key should start with x-qn-meta-.')
+        return
       }
     }
 
     try {
-      this.logger.info('getUploadUrl')
       this.uploadUrl = await getUploadUrl(this.config, this.token)
+      this.logger.info('get uploadUrl from api.', this.uploadUrl)
       this.uploadAt = new Date().getTime()
 
       const result = await this.run()
       this.onComplete(result.data)
-      this.sendLog(result.reqId, 200) // 收集成功的日志感觉没啥用？
+      this.sendLog(result.reqId, 200)
       return
     } catch (err) {
       this.logger.error(err)
@@ -204,17 +205,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.logger.warn(`error auto retry: ${this.retryCount}/${this.config.retryCount}.`)
+        this.putFile()
+        return
       }
 
       this.onError(err)
     }
   }
 
   private clear() {
+    // abort 会触发 onreadystatechange
+    // MDN 文档表示：readyState 为 0 并且 status 为 0
     this.logger.info('start cleaning all xhr.')
-    this.xhrList.forEach(xhr => xhr.abort())
+    this.xhrList.forEach(xhr => {
+      xhr.onreadystatechange = null
+      xhr.abort()
+    })
     this.logger.info('cleanup completed.')
     this.xhrList = []
   }
@@ -230,7 +237,7 @@ export default abstract class Base {
   }
 
   private sendLog(reqId: string, code: number) {
-    this.logger.info({
+    this.logger.report({
       code,
       reqId,
       host: utils.getDomainFromUrl(this.uploadUrl),

src/statisticsLog.ts

@@ -16,13 +16,13 @@ export default class Direct extends Base {
     formData.append('fname', this.putExtra.fname)
 
     if (this.putExtra.customVars) {
-      this.logger.info('inited customVars.')
+      this.logger.info('init customVars.')
       const { customVars } = this.putExtra
       Object.keys(customVars).forEach(key => formData.append(key, customVars[key].toString()))
+      this.logger.info('customVars inited.')
     }
 
-    this.logger.info('inited formData.')
-
+    this.logger.info('formData inited.')
     const result = await request<UploadCompleteData>(this.uploadUrl, {
       method: 'POST',
       body: formData,
@@ -32,7 +32,7 @@ export default class Direct extends Base {
       onCreate: xhr => this.addXhr(xhr)
     })
 
-    this.logger.info('finishDirectProgress.')
+    this.logger.info('Direct progress finish.')
     this.finishDirectProgress()
     return result
   }
@@ -46,7 +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.logger.warn('progress is null.')
       this.progress = { total: this.getProgressInfoItem(this.file.size, this.file.size) }
       this.onData(this.progress)
       return

src/upload/base.ts

@@ -22,6 +22,6 @@ export default function createUploadManager(
     return new Resume(options, handlers, logger)
   }
 
-  logger.info('file size less than 4M, use Direct.')
+  logger.info('file size less or equal than 4M, use Direct.')
   return new Direct(options, handlers, logger)
 }