diff --git a/src/client/web/src/common/errors.ts b/src/client/web/src/common/errors.ts
new file mode 100644
index 0000000..0ec1b4d
--- /dev/null
+++ b/src/client/web/src/common/errors.ts
@@ -0,0 +1,5 @@
+export const errUpdater = "err.updater";
+export const errUploadMgr = "err.uploadMgr";
+export const errServer = "err.server";
+export const errCorsScript = "err.script.cors";
+export const errUnknown = "err.unknown";
diff --git a/src/client/web/src/common/log_error.ts b/src/client/web/src/common/log_error.ts
new file mode 100644
index 0000000..d4a3bd2
--- /dev/null
+++ b/src/client/web/src/common/log_error.ts
@@ -0,0 +1,46 @@
+import { ILocalStorage, Storage } from "./localstorage";
+import { ISettingsClient } from "../client";
+import { SettingsClient } from "../client/settings";
+
+export interface IErrorLogger {
+  setClient: (client: ISettingsClient) => void;
+  setStorage: (storage: ILocalStorage) => void;
+  error: (key: string, msg: string) => void;
+  report: () => void;
+}
+
+export class ErrorLog {
+  private client: ISettingsClient;
+  private storage: ILocalStorage = Storage();
+
+  constructor(client: ISettingsClient) {
+    this.client = client;
+  }
+
+  setClient(client: ISettingsClient) {
+    this.client = client;
+  }
+
+  setStorage(storage: ILocalStorage) {
+    this.storage = storage;
+  }
+
+  error = (key: string, msg: string) => {
+    const existKey = this.storage.get(key);
+    if (existKey === "") {
+      this.storage.set(key, msg);
+    }
+  };
+
+  report = () => {
+    // TODO:
+    // check last submitting, and set submit time
+    // report all errors to backend
+    // clean storage
+  };
+}
+
+const errorLogger = new ErrorLog(new SettingsClient(""));
+export const ErrorLogger = (): IErrorLogger => {
+  return errorLogger;
+};
diff --git a/src/client/web/src/common/utils.ts b/src/client/web/src/common/utils.ts
new file mode 100644
index 0000000..f1479f4
--- /dev/null
+++ b/src/client/web/src/common/utils.ts
@@ -0,0 +1,15 @@
+import { Map } from "immutable";
+
+export function getItemPath(dirPath: string, itemName: string): string {
+  return dirPath.endsWith("/")
+    ? `${dirPath}${itemName}`
+    : `${dirPath}/${itemName}`;
+}
+
+export function getErrMsg(
+  msgPkg: Map<string, string>,
+  msg: string,
+  status: string
+): string {
+  return `${msgPkg.get(msg)}: ${msgPkg.get(status)}`;
+}