feat(web): add client-side logging support

Also modified langauge-web/src/main/js/xtext/ServiceBuilder.js to make
sure the new logger is used as soon as xtext is initialized.

2 files changed, 13 insertions, 3 deletions

diff --git a/language-web/src/main/js/editor/EditorArea.tsx b/language-web/src/main/js/editor/EditorArea.tsx
index f07a0ad8..531a57c9 100644
--- a/language-web/src/main/js/editor/EditorArea.tsx
+++ b/language-web/src/main/js/editor/EditorArea.tsx
@@ -15,8 +15,7 @@ export const EditorArea = observer(() => {
         onChange={(e) => editorStore.updateValue(e.target.value)}
         ref={fallbackTextarea}
         className={`problem-fallback-editor cm-s-${editorStore.codeMirrorTheme}`}
-      >
-      </textarea>
+      />
     );
   }
 
diff --git a/language-web/src/main/js/editor/EditorStore.ts b/language-web/src/main/js/editor/EditorStore.ts
index 1ac2e79f..8b9432dd 100644
--- a/language-web/src/main/js/editor/EditorStore.ts
+++ b/language-web/src/main/js/editor/EditorStore.ts
@@ -8,8 +8,11 @@ import {
 import type { IXtextOptions, IXtextServices } from 'xtext/xtext-codemirror';
 
 import type { IEditorChunk } from './editor';
+import { getLogger } from '../logging';
 import type { ThemeStore } from '../theme/ThemeStore';
 
+const log = getLogger('EditorStore');
+
 const xtextLang = 'problem';
 
 const xtextOptions: IXtextOptions = {
@@ -52,12 +55,20 @@ export class EditorStore {
       xtextServices: observable.ref,
       initialSelection: false,
     });
+    this.loadChunk();
+  }
+
+  private loadChunk(): void {
+    const loadingStartMillis = Date.now();
+    log.info('Requesting editor chunk');
     import('./editor').then(({ editorChunk }) => {
       runInAction(() => {
         this.chunk = editorChunk;
       });
+      const loadingDurationMillis = Date.now() - loadingStartMillis;
+      log.info('Loaded editor chunk in', loadingDurationMillis, 'ms');
     }).catch((error) => {
-      console.warn('Error while loading editor', error);
+      log.error('Error while loading editor', error);
     });
   }