ログの改善 (#1910)

* Improve: ログに情報を足す

* Change: createLog -> createLogger

* Change: helpers/log -> domain/frontend/log

* Code: TODOを追加

* Change: ログの単位を変える

* Delete: 残っているのを削除

* Code: 目的語を追加

src/components/Dialog/HelpDialog/HelpDialog.vue

@@ -98,6 +98,7 @@ import ContactInfo from "./ContactInfo.vue";
 import { UpdateInfo as UpdateInfoObject, UrlString } from "@/type/preload";
 import { useStore } from "@/store";
 import { useFetchNewUpdateInfos } from "@/composables/useFetchNewUpdateInfos";
+import { createLogger } from "@/domain/frontend/log";
 
 type PageItem = {
   type: "item";
@@ -128,6 +129,7 @@ const modelValueComputed = computed({
 
 // エディタのアップデート確認
 const store = useStore();
+const { warn } = createLogger("HelpDialog");
 
 const updateInfos = ref<UpdateInfoObject[]>();
 store.dispatch("GET_UPDATE_INFOS").then((obj) => (updateInfos.value = obj));
@@ -216,7 +218,7 @@ const pagedata = computed(() => {
     for (const id of store.getters.GET_SORTED_ENGINE_INFOS.map((m) => m.uuid)) {
       const manifest = store.state.engineManifests[id];
       if (!manifest) {
-        store.dispatch("LOG_WARN", `manifest not found: ${id}`);
+        warn(`manifest not found: ${id}`);
         continue;
       }
 

src/components/Dialog/SettingDialog.vue

@@ -1025,6 +1025,7 @@ import {
   RootMiscSettingType,
   EngineId,
 } from "@/type/preload";
+import { createLogger } from "@/domain/frontend/log";
 
 type SamplingRateOption = EngineSettingType["outputSamplingRate"];
 
@@ -1049,6 +1050,7 @@ const emit =
   }>();
 
 const store = useStore();
+const { warn } = createLogger("SettingDialog");
 
 const settingDialogOpenedComputed = computed({
   get: () => props.modelValue,
@@ -1163,7 +1165,7 @@ if (navigator.mediaDevices) {
   );
   updateAudioOutputDevices();
 } else {
-  store.dispatch("LOG_WARN", "navigator.mediaDevices is not available.");
+  warn("navigator.mediaDevices is not available.");
 }
 
 const acceptRetrieveTelemetryComputed = computed({

src/components/ErrorBoundary.vue

@@ -4,11 +4,9 @@
 
 <script setup lang="ts">
 import { onErrorCaptured, onMounted } from "vue";
-import { useStore } from "@/store";
 
-const store = useStore();
 const logError = (error: Error): void => {
-  store.dispatch("LOG_ERROR", error.stack);
+  window.backend.logError(error);
 };
 
 onMounted(() => {

src/components/Sing/ScoreSequencer.vue

@@ -259,6 +259,7 @@ import SequencerPhraseIndicator from "@/components/Sing/SequencerPhraseIndicator
 import CharacterPortrait from "@/components/Sing/CharacterPortrait.vue";
 import SequencerPitch from "@/components/Sing/SequencerPitch.vue";
 import { isOnCommandOrCtrlKeyDown } from "@/store/utility";
+import { createLogger } from "@/domain/frontend/log";
 import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
 import { useShiftKey } from "@/composables/useModifierKey";
 
@@ -270,6 +271,7 @@ const isSelfEventTarget = (event: UIEvent) => {
 };
 
 const store = useStore();
+const { warn } = createLogger("ScoreSequencer");
 const state = store.state;
 
 // 分解能（Ticks Per Quarter Note）
@@ -619,7 +621,7 @@ const selectOnlyThis = (note: Note) => {
 
 const startPreview = (event: MouseEvent, mode: PreviewMode, note?: Note) => {
   if (nowPreviewing.value) {
-    store.dispatch("LOG_WARN", "startPreview was called during preview.");
+    warn("startPreview was called during preview.");
     return;
   }
   const sequencerBodyElement = sequencerBody.value;

src/components/Talk/AudioInfo.vue

@@ -317,13 +317,15 @@ import {
 import { EngineManifest } from "@/openapi";
 import { useDefaultPreset } from "@/composables/useDefaultPreset";
 import { SLIDER_PARAMETERS } from "@/store/utility";
+import { createLogger } from "@/domain/frontend/log";
 
 const props =
   defineProps<{
     activeAudioKey: AudioKey;
   }>();
 
 const store = useStore();
+const { info } = createLogger("AudioInfo");
 
 // accent phrase
 const uiLocked = computed(() => store.getters.UI_LOCKED);
@@ -920,7 +922,7 @@ const adjustSliderValue = (
   const convertedInputStr = convertFullWidthNumbers(inputStr);
   const inputNum = Number(convertedInputStr);
 
-  store.dispatch("LOG_INFO", `${inputItemName}:${inputStr}`);
+  info(`${inputItemName}: ${inputStr}`);
 
   if (isNaN(inputNum)) {
     return minimalVal;

src/domain/frontend/log.ts

@@ -0,0 +1,14 @@
+/** ログ出力用の関数を生成する。ブラウザ専用。 */
+// TODO: window.backendをDIできるようにする
+export function createLogger(scope: string) {
+  const createInner =
+    (method: "logInfo" | "logError" | "logWarn") =>
+    (message: string, ...args: unknown[]) => {
+      window.backend[method](`[${scope}] ${message}`, ...args);
+    };
+  return {
+    info: createInner("logInfo"),
+    error: createInner("logError"),
+    warn: createInner("logWarn"),
+  };
+}

src/plugins/hotkeyPlugin.ts

@@ -14,6 +14,7 @@ import {
   HotkeyCombination,
   HotkeySettingType,
 } from "@/type/preload";
+import { createLogger } from "@/domain/frontend/log";
 
 const hotkeyManagerKey = "hotkeyManager";
 export const useHotkeyManager = () => {
@@ -101,9 +102,7 @@ export class HotkeyManager {
 
   constructor(
     hotkeys_: HotkeysJs = hotkeys,
-    log: Log = (message: string, ...args: unknown[]) => {
-      window.backend.logInfo(`[HotkeyManager] ${message}`, ...args);
-    }
+    log: Log = createLogger("HotkeyManager").info
   ) {
     this.log = log;
     this.hotkeys = hotkeys_;

src/store/engine.ts

@@ -1,6 +1,7 @@
 import { EngineState, EngineStoreState, EngineStoreTypes } from "./type";
 import { createUILockAction } from "./ui";
 import { createPartialStore } from "./vuex";
+import { createLogger } from "@/domain/frontend/log";
 import type { EngineManifest } from "@/openapi";
 import type { EngineId, EngineInfo } from "@/type/preload";
 
@@ -9,6 +10,7 @@ export const engineStoreState: EngineStoreState = {
   engineSupportedDevices: {},
   altPortInfos: {},
 };
+const { info, error } = createLogger("store/engine");
 
 export const engineStore = createPartialStore<EngineStoreTypes>({
   GET_ENGINE_INFOS: {
@@ -178,7 +180,7 @@ export const engineStore = createPartialStore<EngineStoreTypes>({
           } catch {
             await new Promise((resolve) => setTimeout(resolve, 1000));
 
-            window.backend.logInfo(`Waiting engine ${engineId}`);
+            info(`Waiting engine ${engineId}`);
             continue;
           }
           engineState = "READY";
@@ -204,10 +206,7 @@ export const engineStore = createPartialStore<EngineStoreTypes>({
           try {
             return window.backend.restartEngine(engineId);
           } catch (e) {
-            dispatch("LOG_ERROR", {
-              error: e,
-              message: `Failed to restart engine: ${engineId}`,
-            });
+            error(`Failed to restart engine: ${engineId}`);
             await dispatch("DETECTED_ENGINE_ERROR", { engineId });
             return {
               success: false,

src/store/index.ts

@@ -306,24 +306,6 @@ export const indexStore = createPartialStore<IndexStoreTypes>({
     },
   },
 
-  LOG_ERROR: {
-    action(_, ...params: unknown[]) {
-      window.backend.logError(...params);
-    },
-  },
-
-  LOG_WARN: {
-    action(_, ...params: unknown[]) {
-      window.backend.logWarn(...params);
-    },
-  },
-
-  LOG_INFO: {
-    action(_, ...params: unknown[]) {
-      window.backend.logInfo(...params);
-    },
-  },
-
   INIT_VUEX: {
     async action({ dispatch }) {
       const promises = [];

src/store/singing.ts

@@ -69,8 +69,11 @@ import {
   createPromiseThatResolvesWhen,
   round,
 } from "@/sing/utility";
+import { createLogger } from "@/domain/frontend/log";
 import { noteSchema } from "@/domain/project/schema";
 
+const { info, warn } = createLogger("store/singing");
+
 const generateAudioEvents = async (
   audioContext: BaseAudioContext,
   time: number,
@@ -1025,7 +1028,7 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
           }
         }
 
-        window.backend.logInfo("Phrases updated.");
+        info("Phrases updated.");
 
         if (startRenderingRequested() || stopRenderingRequested()) {
           return;
@@ -1088,9 +1091,7 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
             });
 
             const phonemes = getPhonemes(frameAudioQuery);
-            window.backend.logInfo(
-              `Fetched frame audio query. Phonemes are "${phonemes}".`
-            );
+            info(`Fetched frame audio query. Phonemes are "${phonemes}".`);
 
             shiftGuidePitch(phrase.keyRangeAdjustment, frameAudioQuery);
             scaleGuideVolume(volumeRangeAdjustment, frameAudioQuery);
@@ -1134,7 +1135,7 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
           if (!phraseData.blob) {
             phraseData.blob = phraseAudioBlobCache.get(phraseKey);
             if (phraseData.blob) {
-              window.backend.logInfo(`Loaded audio buffer from cache.`);
+              info(`Loaded audio buffer from cache.`);
             } else {
               const blob = await synthesize(phrase.singer, phrase.query).catch(
                 (error) => {
@@ -1149,7 +1150,7 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
               phraseData.blob = blob;
               phraseAudioBlobCache.set(phraseKey, phraseData.blob);
 
-              window.backend.logInfo(`Synthesized.`);
+              info(`Synthesized.`);
             }
 
             // 音源とシーケンスを作成し直して、再接続する
@@ -1221,12 +1222,12 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
   STOP_RENDERING: {
     action: createUILockAction(async ({ state, commit }) => {
       if (state.nowRendering) {
-        window.backend.logInfo("Waiting for rendering to stop...");
+        info("Waiting for rendering to stop...");
         commit("SET_STOP_RENDERING_REQUESTED", {
           stopRenderingRequested: true,
         });
         await createPromiseThatResolvesWhen(() => !state.nowRendering);
-        window.backend.logInfo("Rendering stopped.");
+        info("Rendering stopped.");
       }
     }),
   },
@@ -2103,9 +2104,9 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
   },
 
   CANCEL_AUDIO_EXPORT: {
-    async action({ state, commit, dispatch }) {
+    async action({ state, commit }) {
       if (!state.nowAudioExporting) {
-        dispatch("LOG_WARN", "CANCEL_AUDIO_EXPORT on !nowAudioExporting");
+        warn("CANCEL_AUDIO_EXPORT on !nowAudioExporting");
         return;
       }
       commit("SET_CANCELLATION_OF_AUDIO_EXPORT_REQUESTED", {

src/store/type.ts

@@ -1326,18 +1326,6 @@ export type IndexStoreTypes = {
     action(): SpeakerId[];
   };
 
-  LOG_ERROR: {
-    action(...payload: unknown[]): void;
-  };
-
-  LOG_WARN: {
-    action(...payload: unknown[]): void;
-  };
-
-  LOG_INFO: {
-    action(...payload: unknown[]): void;
-  };
-
   INIT_VUEX: {
     action(): void;
   };