Improve Logging (#1519)

Improve Logging

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

src/components/editor-page/document-bar/revisions/utils.ts

@@ -8,6 +8,9 @@ import { Revision } from '../../../../api/revisions/types'
 import { getUserById } from '../../../../api/users'
 import { UserResponse } from '../../../../api/users/types'
 import { download } from '../../../common/download/download'
+import { Logger } from '../../../../utils/logger'
+
+const log = new Logger('RevisionsUtils')
 
 export const downloadRevision = (noteId: string, revision: Revision | null): void => {
   if (!revision) {
@@ -26,7 +29,7 @@ export const getUserDataForRevision = (authors: string[]): UserResponse[] => {
       .then((userData) => {
         users.push(userData)
       })
-      .catch((error) => console.error(error))
+      .catch((error) => log.error(error))
   })
   return users
 }

src/components/editor-page/editor-page.tsx

@@ -29,6 +29,7 @@ import { useUpdateLocalHistoryEntry } from './hooks/useUpdateLocalHistoryEntry'
 import { useApplicationState } from '../../hooks/common/use-application-state'
 import { EditorDocumentRenderer } from './editor-document-renderer/editor-document-renderer'
 import { EditorToRendererCommunicatorContextProvider } from './render-context/editor-to-renderer-communicator-context-provider'
+import { Logger } from '../../utils/logger'
 
 export interface EditorPagePathParams {
   id: string
@@ -39,6 +40,8 @@ export enum ScrollSource {
   RENDERER
 }
 
+const log = new Logger('EditorPage')
+
 export const EditorPage: React.FC = () => {
   useTranslation()
   const scrollSource = useRef<ScrollSource>(ScrollSource.EDITOR)
@@ -55,7 +58,7 @@ export const EditorPage: React.FC = () => {
       if (scrollSource.current === ScrollSource.RENDERER && editorSyncScroll) {
         setScrollState((old) => {
           const newState = { editorScrollState: newScrollState, rendererScrollState: old.rendererScrollState }
-          console.debug('[EditorPage] set scroll state because of renderer scroll', newState)
+          log.debug('Set scroll state because of renderer scroll', newState)
           return newState
         })
       }
@@ -68,7 +71,7 @@ export const EditorPage: React.FC = () => {
       if (scrollSource.current === ScrollSource.EDITOR && editorSyncScroll) {
         setScrollState((old) => {
           const newState = { rendererScrollState: newScrollState, editorScrollState: old.editorScrollState }
-          console.debug('[EditorPage] set scroll state because of editor scroll', newState)
+          log.debug('Set scroll state because of editor scroll', newState)
           return newState
         })
       }
@@ -87,12 +90,12 @@ export const EditorPage: React.FC = () => {
 
   const setRendererToScrollSource = useCallback(() => {
     scrollSource.current = ScrollSource.RENDERER
-    console.debug('[EditorPage] Make renderer scroll source')
+    log.debug('Make renderer scroll source')
   }, [])
 
   const setEditorToScrollSource = useCallback(() => {
     scrollSource.current = ScrollSource.EDITOR
-    console.debug('[EditorPage] Make editor scroll source')
+    log.debug('Make editor scroll source')
   }, [])
 
   useNotificationTest()

src/components/editor-page/editor-pane/autocompletion/code-block.ts

@@ -7,9 +7,11 @@
 import { Editor, Hint, Hints, Pos } from 'codemirror'
 import { findWordAtCursor, generateHintListByPrefix, Hinter } from './index'
 import { showErrorNotification } from '../../../../redux/ui-notifications/methods'
+import { Logger } from '../../../../utils/logger'
 
 type highlightJsImport = typeof import('../../../common/hljs/hljs')
 
+const log = new Logger('Autocompletion > CodeBlock')
 const wordRegExp = /^```((\w|-|_|\+)*)$/
 let allSupportedLanguages: string[] = []
 
@@ -22,7 +24,7 @@ const loadHighlightJs = async (): Promise<highlightJsImport | null> => {
     return await import('../../../common/hljs/hljs')
   } catch (error) {
     showErrorNotification('common.errorWhileLoadingLibrary', { name: 'highlight.js' })(error as Error)
-    console.error("can't load highlight js", error)
+    log.error('Error while loading highlight.js', error)
     return null
   }
 }

src/components/editor-page/editor-pane/autocompletion/emoji.ts

@@ -10,9 +10,11 @@ import { Emoji, EmojiClickEventDetail, NativeEmoji } from 'emoji-picker-element/
 import { emojiPickerConfig } from '../tool-bar/emoji-picker/emoji-picker'
 import { getEmojiIcon, getEmojiShortCode } from '../tool-bar/utils/emojiUtils'
 import { findWordAtCursor, Hinter } from './index'
+import { Logger } from '../../../../utils/logger'
 
 const emojiIndex = new Database(emojiPickerConfig)
 const emojiWordRegex = /^:([\w-_+]*)$/
+const log = new Logger('Autocompletion > Emoji')
 
 const findEmojiInDatabase = async (emojiIndex: Database, term: string): Promise<Emoji[]> => {
   try {
@@ -26,7 +28,7 @@ const findEmojiInDatabase = async (emojiIndex: Database, term: string): Promise<
       return queryResult
     }
   } catch (error) {
-    console.error(error)
+    log.error('Error while searching for emoji', term, error)
     return []
   }
 }

src/components/editor-page/editor-pane/upload-handler.ts

@@ -9,6 +9,9 @@ import i18n from 'i18next'
 import { uploadFile } from '../../../api/media'
 import { store } from '../../../redux'
 import { supportedMimeTypes } from '../../common/upload-image-mimetypes'
+import { Logger } from '../../../utils/logger'
+
+const log = new Logger('File Uploader Handler')
 
 export const handleUpload = (file: File, editor: Editor): void => {
   if (!file) {
@@ -30,7 +33,7 @@ export const handleUpload = (file: File, editor: Editor): void => {
       insertCode(`![](${link})`)
     })
     .catch((error) => {
-      console.error('error while uploading file', error)
+      log.error('error while uploading file', error)
       insertCode('')
     })
 }

src/components/editor-page/hooks/useLoadNoteFromServer.ts

@@ -9,6 +9,9 @@ import { useParams } from 'react-router'
 import { getNote } from '../../../api/notes'
 import { setNoteDataFromServer } from '../../../redux/note-details/methods'
 import { EditorPagePathParams } from '../editor-page'
+import { Logger } from '../../../utils/logger'
+
+const log = new Logger('Load Note From Server')
 
 export const useLoadNoteFromServer = (): [boolean, boolean] => {
   const { id } = useParams<EditorPagePathParams>()
@@ -21,9 +24,9 @@ export const useLoadNoteFromServer = (): [boolean, boolean] => {
       .then((note) => {
         setNoteDataFromServer(note)
       })
-      .catch((e) => {
+      .catch((error) => {
         setError(true)
-        console.error(e)
+        log.error('Error while fetching note from server', error)
       })
       .finally(() => setLoading(false))
   }, [id])

src/components/editor-page/renderer-pane/hooks/use-on-iframe-load.ts

@@ -6,6 +6,9 @@
 
 import { RefObject, useCallback, useRef } from 'react'
 import { EditorToRendererCommunicator } from '../../../render-page/window-post-message-communicator/editor-to-renderer-communicator'
+import { Logger } from '../../../../utils/logger'
+
+const log = new Logger('IframeLoader')
 
 export const useOnIframeLoad = (
   frameReference: RefObject<HTMLIFrameElement>,
@@ -29,7 +32,7 @@ export const useOnIframeLoad = (
       return
     } else {
       onNavigateAway()
-      console.error('Navigated away from unknown URL')
+      log.error('Navigated away from unknown URL')
       frame.src = renderPageUrl
       sendToRenderPage.current = true
     }

src/components/editor-page/sidebar/upload-input.tsx

@@ -5,6 +5,9 @@
  */
 
 import React, { MutableRefObject, useCallback, useEffect, useRef } from 'react'
+import { Logger } from '../../../utils/logger'
+
+const log = new Logger('UploadInput')
 
 export interface UploadInputProps {
   onLoad: (file: File) => Promise<void>
@@ -30,7 +33,7 @@ export const UploadInput: React.FC<UploadInputProps> = ({ onLoad, acceptedFiles,
           fileInput.value = ''
         })
         .catch((error) => {
-          console.error(error)
+          log.error('Error while uploading file', error)
         })
     })
     fileInput.click()

src/components/editor-page/use-notification-test.tsx

@@ -6,8 +6,10 @@
 
 import { useEffect } from 'react'
 import { dispatchUiNotification } from '../../redux/ui-notifications/methods'
+import { Logger } from '../../utils/logger'
 
 const localStorageKey = 'dontshowtestnotification'
+const log = new Logger('Notification Test')
 
 /**
  * Spawns a notification to test the system. Only for tech demo show case.
@@ -17,7 +19,7 @@ export const useNotificationTest = (): void => {
     if (window.localStorage.getItem(localStorageKey)) {
       return
     }
-    console.debug('[Notifications] Dispatched test notification')
+    log.debug('Dispatched test notification')
     void dispatchUiNotification('notificationTest.title', 'notificationTest.content', {
       icon: 'info-circle',
       buttons: [