Improve Logging (#1519)

Improve Logging

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

CONTRIBUTING.md

@@ -162,6 +162,16 @@ React components
 - should be named in [PascalCase](https://en.wikipedia.org/wiki/Pascal_case).
 
 
+### Logging
+
+- Don't log directly to the console. Use our logging class `Logger` in "src/utils".
+- Create one instance of `Logger` per file. Don't pass or share the instances.
+- The first argument of the constructor is the scope. Use the name of the class or component whose behaviour you want to log or choose an explanatory name.
+- If you want to add a sub scope (because e.g. you have two components that are similar or are used together, like the sub-classes of the iframe communicator), separate the main and sub scope with " > ".
+- Scopes should be upper camel case.
+- Log messages should never start with a lowercase letter.
+- Log messages should never end with a colon or white space.
+
 #### Example File: `increment-number-button.tsx`:
 ```typescript=
 
@@ -172,6 +182,8 @@ export interface IncrementNumberButtonProps {
     prefix: string
 }
 
+const logger = new Logger("IncrementNumberButton")
+
 /**
  * Shows a button that contains a text and a number that gets incremented each time you click it.
  *
@@ -180,7 +192,10 @@ export interface IncrementNumberButtonProps {
 export const IncrementNumberButton: React.FC<IncrementNumberButtonProps> = ({ prefix }) => {
     const [counter, setCounter] = useState(0)
 
-    const incrementCounter = useCallback(() => setCounter((lastCounter) => lastCounter + 1), [])
+    const incrementCounter = useCallback(() => {
+        setCounter((lastCounter) => lastCounter + 1)
+        logger.info("Increased counter")
+    }, [])
 
     return <button onClick={incrementCounter}>{prefix}: {counter}</button>
 }

src/components/application-loader/application-loader.tsx

@@ -11,6 +11,9 @@ import { createSetUpTaskList, InitTask } from './initializers'
 import { LoadingScreen } from './loading-screen'
 import { useCustomizeAssetsUrl } from '../../hooks/common/use-customize-assets-url'
 import { useFrontendAssetsUrl } from '../../hooks/common/use-frontend-assets-url'
+import { Logger } from '../../utils/logger'
+
+const log = new Logger('ApplicationLoader')
 
 export const ApplicationLoader: React.FC = ({ children }) => {
   const frontendAssetsUrl = useFrontendAssetsUrl()
@@ -36,7 +39,7 @@ export const ApplicationLoader: React.FC = ({ children }) => {
   useEffect(() => {
     for (const task of initTasks) {
       runTask(task.task).catch((reason: Error) => {
-        console.error(reason)
+        log.error('Error while initialising application', reason)
         setFailedTitle(task.name)
       })
     }

src/components/application-loader/initializers/fetch-and-set-banner.ts

@@ -6,8 +6,10 @@
 
 import { setBanner } from '../../../redux/banner/methods'
 import { defaultFetchConfig } from '../../../api/utils'
+import { Logger } from '../../../utils/logger'
 
 export const BANNER_LOCAL_STORAGE_KEY = 'banner.lastModified'
+const log = new Logger('Banner')
 
 export const fetchAndSetBanner = async (customizeAssetsUrl: string): Promise<void> => {
   const cachedLastModified = window.localStorage.getItem(BANNER_LOCAL_STORAGE_KEY)
@@ -42,7 +44,7 @@ export const fetchAndSetBanner = async (customizeAssetsUrl: string): Promise<voi
 
   const lastModified = response.headers.get('Last-Modified')
   if (!lastModified) {
-    console.warn("'Last-Modified' not found for banner.txt!")
+    log.warn("'Last-Modified' not found for banner.txt!")
   }
 
   setBanner({

src/components/common/copyable/copy-overlay.tsx

@@ -9,12 +9,15 @@ import { Overlay, Tooltip } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { v4 as uuid } from 'uuid'
 import { ShowIf } from '../show-if/show-if'
+import { Logger } from '../../../utils/logger'
 
 export interface CopyOverlayProps {
   content: string
   clickComponent: RefObject<HTMLElement>
 }
 
+const log = new Logger('CopyOverlay')
+
 export const CopyOverlay: React.FC<CopyOverlayProps> = ({ content, clickComponent }) => {
   useTranslation()
   const [showCopiedTooltip, setShowCopiedTooltip] = useState(false)
@@ -27,9 +30,9 @@ export const CopyOverlay: React.FC<CopyOverlayProps> = ({ content, clickComponen
       .then(() => {
         setError(false)
       })
-      .catch(() => {
+      .catch((error: Error) => {
         setError(true)
-        console.error("couldn't copy")
+        log.error('Copy failed', error)
       })
       .finally(() => {
         setShowCopiedTooltip(true)

src/components/common/copyable/copyable-field/copyable-field.tsx

@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next'
 import { ForkAwesomeIcon } from '../../fork-awesome/fork-awesome-icon'
 import { ShowIf } from '../../show-if/show-if'
 import { CopyOverlay } from '../copy-overlay'
+import { Logger } from '../../../../utils/logger'
 
 export interface CopyableFieldProps {
   content: string
@@ -17,6 +18,8 @@ export interface CopyableFieldProps {
   url?: string
 }
 
+const log = new Logger('CopyableField')
+
 export const CopyableField: React.FC<CopyableFieldProps> = ({ content, nativeShareButton, url }) => {
   useTranslation()
   const copyButton = useRef<HTMLButtonElement>(null)
@@ -27,8 +30,8 @@ export const CopyableField: React.FC<CopyableFieldProps> = ({ content, nativeSha
         text: content,
         url: url
       })
-      .catch((err) => {
-        console.error('Native sharing failed: ', err)
+      .catch((error) => {
+        log.error('Native sharing failed', error)
       })
   }, [content, url])
 

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: [

src/components/error-boundary/error-boundary.tsx

@@ -10,6 +10,9 @@ import links from '../../links.json'
 import frontendVersion from '../../version.json'
 import { ForkAwesomeIcon } from '../common/fork-awesome/fork-awesome-icon'
 import { ExternalLink } from '../common/links/external-link'
+import { Logger } from '../../utils/logger'
+
+const log = new Logger('ErrorBoundary')
 
 export class ErrorBoundary extends Component {
   state: {
@@ -27,8 +30,7 @@ export class ErrorBoundary extends Component {
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
-    console.error('error caught', error)
-    console.error('additional information', errorInfo)
+    log.error('Error catched', error, errorInfo)
   }
 
   refreshPage(): void {

src/components/landing-layout/footer/language-picker.tsx

@@ -8,7 +8,9 @@ import { Settings } from 'luxon'
 import React, { useCallback, useMemo } from 'react'
 import { Form } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
+import { Logger } from '../../../utils/logger'
 
+const log = new Logger('LanguagePicker')
 const languages = {
   en: 'English',
   'zh-CN': '简体中文',
@@ -61,7 +63,7 @@ export const LanguagePicker: React.FC = () => {
     (event: React.ChangeEvent<HTMLSelectElement>) => {
       const language = event.currentTarget.value
       Settings.defaultLocale = language
-      i18n.changeLanguage(language).catch((error) => console.error('Error while switching language', error))
+      i18n.changeLanguage(language).catch((error) => log.error('Error while switching language', error))
     },
     [i18n]
   )

src/components/markdown-renderer/markdown-it-plugins/parser-debugger.ts

@@ -5,11 +5,14 @@
  */
 
 import MarkdownIt from 'markdown-it/lib'
+import { Logger } from '../../../utils/logger'
+
+const log = new Logger('MarkdownItParserDebugger')
 
 export const MarkdownItParserDebugger: MarkdownIt.PluginSimple = (md: MarkdownIt) => {
   if (process.env.NODE_ENV !== 'production') {
     md.core.ruler.push('test', (state) => {
-      console.log(state)
+      log.debug('Current state', state)
       return false
     })
   }

src/components/markdown-renderer/replace-components/abc/abc-frame.tsx

@@ -6,6 +6,9 @@
 
 import React, { useEffect, useRef } from 'react'
 import './abc.scss'
+import { Logger } from '../../../../utils/logger'
+
+const log = new Logger('AbcFrame')
 
 export interface AbcFrameProps {
   code: string
@@ -23,8 +26,8 @@ export const AbcFrame: React.FC<AbcFrameProps> = ({ code }) => {
       .then((imp) => {
         imp.renderAbc(actualContainer, code, {})
       })
-      .catch(() => {
-        console.error('error while loading abcjs')
+      .catch((error) => {
+        log.error('Error while loading abcjs', error)
       })
   }, [code])
 

src/components/markdown-renderer/replace-components/flow/flowchart/flowchart.tsx

@@ -8,6 +8,9 @@ import React, { useEffect, useRef, useState } from 'react'
 import { Alert } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { useIsDarkModeActivated } from '../../../../../hooks/common/use-is-dark-mode-activated'
+import { Logger } from '../../../../../utils/logger'
+
+const log = new Logger('FlowChart')
 
 export interface FlowChartProps {
   code: string
@@ -43,7 +46,7 @@ export const FlowChart: React.FC<FlowChartProps> = ({ code }) => {
           setError(true)
         }
       })
-      .catch(() => console.error('error while loading flowchart.js'))
+      .catch((error) => log.error('Error while loading flowchart.js', error))
 
     return () => {
       Array.from(currentDiagramRef.children).forEach((value) => value.remove())

src/components/markdown-renderer/replace-components/graphviz/graphviz-frame.tsx

@@ -8,6 +8,9 @@ import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react
 import { Alert } from 'react-bootstrap'
 import { ShowIf } from '../../../common/show-if/show-if'
 import { useFrontendBaseUrl } from '../../../../hooks/common/use-frontend-base-url'
+import { Logger } from '../../../../utils/logger'
+
+const log = new Logger('GraphvizFrame')
 
 export interface GraphvizFrameProps {
   code: string
@@ -22,7 +25,7 @@ export const GraphvizFrame: React.FC<GraphvizFrameProps> = ({ code }) => {
       return
     }
     setError(error)
-    console.error(error)
+    log.error(error)
     container.current.querySelectorAll('svg').forEach((child) => child.remove())
   }, [])
 
@@ -53,8 +56,8 @@ export const GraphvizFrame: React.FC<GraphvizFrameProps> = ({ code }) => {
           showError(error as string)
         }
       })
-      .catch(() => {
-        console.error('error while loading graphviz')
+      .catch((error) => {
+        log.error('Error while loading graphviz', error)
       })
   }, [code, error, frontendBaseUrl, showError])
 

src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code.tsx

@@ -9,6 +9,9 @@ import convertHtmlToReact from '@hedgedoc/html-to-react'
 import { CopyToClipboardButton } from '../../../../common/copyable/copy-to-clipboard-button/copy-to-clipboard-button'
 import '../../../utils/button-inside.scss'
 import './highlighted-code.scss'
+import { Logger } from '../../../../../utils/logger'
+
+const log = new Logger('HighlightedCode')
 
 export interface HighlightedCodeProps {
   code: string
@@ -55,8 +58,8 @@ export const HighlightedCode: React.FC<HighlightedCodeProps> = ({ code, language
         ))
         setDom(replacedDom)
       })
-      .catch(() => {
-        console.error('error while loading highlight.js')
+      .catch((error) => {
+        log.error('Error while loading highlight.js', error)
       })
   }, [code, language, startLineNumber])
 

src/components/markdown-renderer/replace-components/image/proxy-image-frame.tsx

@@ -7,6 +7,9 @@
 import React, { useEffect, useState } from 'react'
 import { getProxiedUrl } from '../../../../api/media'
 import { useApplicationState } from '../../../../hooks/common/use-application-state'
+import { Logger } from '../../../../utils/logger'
+
+const log = new Logger('ProxyImageFrame')
 
 export const ProxyImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({ src, title, alt, ...props }) => {
   const [imageUrl, setImageUrl] = useState('')
@@ -18,7 +21,7 @@ export const ProxyImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>
     }
     getProxiedUrl(src)
       .then((proxyResponse) => setImageUrl(proxyResponse.src))
-      .catch((err) => console.error(err))
+      .catch((err) => log.error(err))
   }, [imageProxyEnabled, src])
 
   return <img src={imageProxyEnabled ? imageUrl : src ?? ''} title={title ?? alt ?? ''} alt={alt} {...props} />

src/components/markdown-renderer/replace-components/markmap/markmap-frame.tsx

@@ -8,6 +8,9 @@ import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { LockButton } from '../../../common/lock-button/lock-button'
 import '../../utils/button-inside.scss'
+import { Logger } from '../../../../utils/logger'
+
+const log = new Logger('MarkmapFrame')
 
 export interface MarkmapFrameProps {
   code: string
@@ -54,11 +57,11 @@ export const MarkmapFrame: React.FC<MarkmapFrameProps> = ({ code }) => {
           actualContainer.appendChild(svg)
           markmapLoader(svg, code)
         } catch (error) {
-          console.error(error)
+          log.error(error)
         }
       })
-      .catch(() => {
-        console.error('error while loading markmap')
+      .catch((error) => {
+        log.error('Error while loading markmap', error)
       })
   }, [code])
 

src/components/markdown-renderer/replace-components/mermaid/mermaid-chart.tsx

@@ -9,7 +9,9 @@ import { Alert } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { ShowIf } from '../../../common/show-if/show-if'
 import './mermaid.scss'
+import { Logger } from '../../../../utils/logger'
 
+const log = new Logger('MermaidChart')
 export interface MermaidChartProps {
   code: string
 }
@@ -32,8 +34,8 @@ export const MermaidChart: React.FC<MermaidChartProps> = ({ code }) => {
           mermaid.default.initialize({ startOnLoad: false })
           mermaidInitialized = true
         })
-        .catch(() => {
-          console.error('error while loading mermaid')
+        .catch((error) => {
+          log.error('Error while loading mermaid', error)
         })
     }
   }, [])
@@ -41,7 +43,7 @@ export const MermaidChart: React.FC<MermaidChartProps> = ({ code }) => {
   const showError = useCallback(
     (error: string) => {
       setError(error)
-      console.error(error)
+      log.error(error)
       if (!diagramContainer.current) {
         return
       }

src/components/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx

@@ -10,6 +10,9 @@ import { IconName } from '../../../common/fork-awesome/types'
 import { ShowIf } from '../../../common/show-if/show-if'
 import './one-click-embedding.scss'
 import { ProxyImageFrame } from '../image/proxy-image-frame'
+import { Logger } from '../../../../utils/logger'
+
+const log = new Logger('OneClickEmbedding')
 
 interface OneClickFrameProps {
   onImageFetch?: () => Promise<string>
@@ -52,7 +55,7 @@ export const OneClickEmbedding: React.FC<OneClickFrameProps> = ({
         setPreviewImageUrl(imageLink)
       })
       .catch((message) => {
-        console.error(message)
+        log.error(message)
       })
   }, [onImageFetch])
 

src/components/markdown-renderer/replace-components/vega-lite/vega-chart.tsx

@@ -9,6 +9,9 @@ import { Alert } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { VisualizationSpec } from 'vega-embed'
 import { ShowIf } from '../../../common/show-if/show-if'
+import { Logger } from '../../../../utils/logger'
+
+const log = new Logger('VegaChart')
 
 export interface VegaChartProps {
   code: string
@@ -23,7 +26,7 @@ export const VegaChart: React.FC<VegaChartProps> = ({ code }) => {
     if (!diagramContainer.current) {
       return
     }
-    console.error(error)
+    log.error(error)
     setError(error)
   }, [])
 
@@ -58,8 +61,8 @@ export const VegaChart: React.FC<VegaChartProps> = ({ code }) => {
           showError(t('renderer.vega-lite.errorJson'))
         }
       })
-      .catch(() => {
-        console.error('error while loading vega-light')
+      .catch((error) => {
+        log.error('Error while loading vega-light', error)
       })
   }, [code, showError, t])
 

src/components/notifications/ui-notification-toast.tsx

@@ -12,8 +12,10 @@ import { ShowIf } from '../common/show-if/show-if'
 import { IconName } from '../common/fork-awesome/types'
 import { dismissUiNotification } from '../../redux/ui-notifications/methods'
 import { Trans, useTranslation } from 'react-i18next'
+import { Logger } from '../../utils/logger'
 
 const STEPS_PER_SECOND = 10
+const log = new Logger('UiNotificationToast')
 
 export interface UiNotificationProps extends UiNotification {
   notificationId: number
@@ -42,7 +44,7 @@ export const UiNotificationToast: React.FC<UiNotificationProps> = ({
   }, [])
 
   const dismissThisNotification = useCallback(() => {
-    console.debug(`[Notifications] Dismissed notification ${notificationId}`)
+    log.debug(`Dismissed notification ${notificationId}`)
     dismissUiNotification(notificationId)
   }, [notificationId])
 
@@ -50,7 +52,7 @@ export const UiNotificationToast: React.FC<UiNotificationProps> = ({
     if (dismissed || !!interval.current) {
       return
     }
-    console.debug(`[Notifications] Show notification ${notificationId}`)
+    log.debug(`Show notification ${notificationId}`)
     setEta(durationInSecond * STEPS_PER_SECOND)
     interval.current = setInterval(
       () =>

src/components/profile-page/access-tokens/profile-access-tokens.tsx

@@ -15,6 +15,9 @@ import { IconButton } from '../../common/icon-button/icon-button'
 import { CommonModal } from '../../common/modals/common-modal'
 import { DeletionModal } from '../../common/modals/deletion-modal'
 import { ShowIf } from '../../common/show-if/show-if'
+import { Logger } from '../../../utils/logger'
+
+const log = new Logger('ProfileAccessTokens')
 
 export const ProfileAccessTokens: React.FC = () => {
   const { t } = useTranslation()
@@ -37,7 +40,7 @@ export const ProfileAccessTokens: React.FC = () => {
           setNewTokenLabel('')
         })
         .catch((error) => {
-          console.error(error)
+          log.error(error)
           setError(true)
         })
     },
@@ -50,7 +53,7 @@ export const ProfileAccessTokens: React.FC = () => {
         setSelectedForDeletion(0)
       })
       .catch((error) => {
-        console.error(error)
+        log.error(error)
         setError(true)
       })
       .finally(() => {
@@ -74,7 +77,7 @@ export const ProfileAccessTokens: React.FC = () => {
         setAccessTokens(tokens)
       })
       .catch((err) => {
-        console.error(err)
+        log.error(err)
         setError(true)
       })
   }, [showAddedModal])

src/components/register-page/register-page.tsx

@@ -13,6 +13,9 @@ import { useApplicationState } from '../../hooks/common/use-application-state'
 import { TranslatedExternalLink } from '../common/links/translated-external-link'
 import { ShowIf } from '../common/show-if/show-if'
 import { fetchAndSetUser } from '../login-page/auth/utils'
+import { Logger } from '../../utils/logger'
+
+const log = new Logger('RegisterPage')
 
 export enum RegisterError {
   NONE = 'none',
@@ -37,7 +40,7 @@ export const RegisterPage: React.FC = () => {
       doInternalRegister(username, password)
         .then(() => fetchAndSetUser())
         .catch((err: Error) => {
-          console.error(err)
+          log.error(err)
           setError(err.message === RegisterError.USERNAME_EXISTING ? err.message : RegisterError.OTHER)
         })
       event.preventDefault()

src/components/render-page/window-post-message-communicator/editor-to-renderer-communicator.ts

@@ -6,6 +6,7 @@
 
 import { WindowPostMessageCommunicator } from './window-post-message-communicator'
 import { CommunicationMessages, EditorToRendererMessageType, RendererToEditorMessageType } from './rendering-message'
+import { Logger } from '../../../utils/logger'
 
 /**
  * The communicator that is used to send messages from the editor to the renderer.
@@ -15,7 +16,7 @@ export class EditorToRendererCommunicator extends WindowPostMessageCommunicator<
   EditorToRendererMessageType,
   CommunicationMessages
 > {
-  protected generateLogIdentifier(): string {
-    return 'E=>R'
+  protected createLogger(): Logger {
+    return new Logger('EditorToRendererCommunicator')
   }
 }

src/components/render-page/window-post-message-communicator/renderer-to-editor-communicator.ts

@@ -6,6 +6,7 @@
 
 import { WindowPostMessageCommunicator } from './window-post-message-communicator'
 import { CommunicationMessages, EditorToRendererMessageType, RendererToEditorMessageType } from './rendering-message'
+import { Logger } from '../../../utils/logger'
 
 /**
  * The communicator that is used to send messages from the renderer to the editor.
@@ -15,7 +16,7 @@ export class RendererToEditorCommunicator extends WindowPostMessageCommunicator<
   RendererToEditorMessageType,
   CommunicationMessages
 > {
-  protected generateLogIdentifier(): string {
-    return 'E<=R'
+  protected createLogger(): Logger {
+    return new Logger('RendererToEditorCommunicator')
   }
 }

src/components/render-page/window-post-message-communicator/window-post-message-communicator.ts

@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import { Logger } from '../../../utils/logger'
+
 /**
  * Error that will be thrown if a message couldn't be sent.
  */
@@ -33,12 +35,16 @@ export abstract class WindowPostMessageCommunicator<
   private targetOrigin?: string
   private communicationEnabled: boolean
   private handlers: HandlerMap<MESSAGES, RECEIVE_TYPE> = {}
+  private log
 
   constructor() {
     window.addEventListener('message', this.handleEvent.bind(this))
     this.communicationEnabled = false
+    this.log = this.createLogger()
   }
 
+  protected abstract createLogger(): Logger
+
   /**
    * Removes the message event listener from the {@link window}
    */
@@ -91,7 +97,7 @@ export abstract class WindowPostMessageCommunicator<
         `Communication isn't enabled. Maybe the other side is not ready?\nMessage was: ${JSON.stringify(message)}`
       )
     }
-    console.debug('[WPMC ' + this.generateLogIdentifier() + '] Sent event', message)
+    this.log.debug('Sent event', message)
     this.messageTarget.postMessage(message, this.targetOrigin)
   }
 
@@ -106,12 +112,6 @@ export abstract class WindowPostMessageCommunicator<
     this.handlers[messageType] = handler as Handler<MESSAGES, RECEIVE_TYPE>
   }
 
-  /**
-   * Generates a unique identifier that helps to separate log messages in the console from different communicators.
-   * @return the identifier
-   */
-  protected abstract generateLogIdentifier(): string
-
   /**
    * Receives the message events and calls the handler that is mapped to the correct type.
    *
@@ -125,7 +125,7 @@ export abstract class WindowPostMessageCommunicator<
     if (!handler) {
       return true
     }
-    console.debug('[WPMC ' + this.generateLogIdentifier() + '] Received event ', data)
+    this.log.debug('Received event', data)
     handler(data as Extract<MESSAGES, PostMessage<RECEIVE_TYPE>>)
     return false
   }

src/index.tsx

@@ -23,6 +23,7 @@ import * as serviceWorkerRegistration from './service-worker-registration'
 import './style/dark.scss'
 import './style/index.scss'
 import { isTestMode } from './utils/test-modes'
+import { Logger } from './utils/logger'
 
 const EditorPage = React.lazy(
   () => import(/* webpackPrefetch: true */ /* webpackChunkName: "editor" */ './components/editor-page/editor-page')
@@ -37,6 +38,9 @@ const DocumentReadOnlyPage = React.lazy(
     )
 )
 const baseUrl = new URL(document.head.baseURI).pathname
+const log = new Logger('Index')
+
+log.info('Starting HedgeDoc!')
 
 ReactDOM.render(
   <Provider store={store}>
@@ -96,7 +100,7 @@ ReactDOM.render(
 )
 
 if (isTestMode()) {
-  console.log('This build runs in test mode. This means:\n - no sandboxed iframe')
+  log.warn('This build runs in test mode. This means:\n - no sandboxed iframe')
 }
 
 // If you want your app to work offline and load faster, you can change

src/redux/dark-mode/methods.ts

@@ -6,6 +6,9 @@
 
 import { store } from '..'
 import { DarkModeConfig, DarkModeConfigActionType, SetDarkModeConfigAction } from './types'
+import { Logger } from '../../utils/logger'
+
+const log = new Logger('Redux > DarkMode')
 
 export const setDarkMode = (darkMode: boolean): void => {
   store.dispatch({
@@ -17,8 +20,8 @@ export const setDarkMode = (darkMode: boolean): void => {
 export const saveToLocalStorage = (darkModeConfig: DarkModeConfig): void => {
   try {
     window.localStorage.setItem('nightMode', String(darkModeConfig.darkMode))
-  } catch (e) {
-    console.error('Saving dark-mode setting to local storage failed: ', e)
+  } catch (error) {
+    log.error('Saving to local storage failed', error)
   }
 }
 
@@ -31,8 +34,8 @@ export const loadFromLocalStorage = (): DarkModeConfig | undefined => {
     return {
       darkMode: storedValue === 'true'
     }
-  } catch (e) {
-    console.error('Loading dark-mode setting from local storage failed: ', e)
+  } catch (error) {
+    log.error('Loading from local storage failed', error)
     return undefined
   }
 }
@@ -43,8 +46,8 @@ export const determineDarkModeBrowserSetting = (): DarkModeConfig | undefined =>
     return {
       darkMode: mediaQueryResult
     }
-  } catch (e) {
-    console.error('Can not determine dark-mode setting from browser: ', e)
+  } catch (error) {
+    log.error('Can not determine setting from browser', error)
     return undefined
   }
 }

src/redux/editor/methods.ts

@@ -16,6 +16,9 @@ import {
   SetEditorSyncScrollAction,
   SetEditorViewModeAction
 } from './types'
+import { Logger } from '../../utils/logger'
+
+const log = new Logger('Redux > Editor')
 
 export const loadFromLocalStorage = (): EditorConfig | undefined => {
   try {
@@ -33,8 +36,8 @@ export const saveToLocalStorage = (editorConfig: EditorConfig): void => {
   try {
     const json = JSON.stringify(editorConfig)
     localStorage.setItem('editorConfig', json)
-  } catch (e) {
-    console.error('Can not persist editor config in local storage: ', e)
+  } catch (error) {
+    log.error('Error while saving editor config in local storage', error)
   }
 }
 

src/redux/history/methods.ts

@@ -29,6 +29,9 @@ import {
   historyEntryToHistoryEntryPutDto,
   historyEntryToHistoryEntryUpdateDto
 } from '../../api/history/dto-methods'
+import { Logger } from '../../utils/logger'
+
+const log = new Logger('Redux > History')
 
 export const setHistoryEntries = (entries: HistoryEntry[]): void => {
   store.dispatch({
@@ -163,7 +166,7 @@ const loadLocalHistory = (): HistoryEntry[] => {
       window.localStorage.removeItem('notehistory')
       return convertV1History(localV1History)
     } catch (error) {
-      console.error(`Error converting old history entries: ${String(error)}`)
+      log.error('Error while converting old history entries', error)
       return []
     }
   }
@@ -180,7 +183,7 @@ const loadLocalHistory = (): HistoryEntry[] => {
     })
     return localHistory
   } catch (error) {
-    console.error(`Error parsing local stored history entries: ${String(error)}`)
+    log.error('Error while parsing locally stored history entries', error)
     return []
   }
 }
@@ -190,7 +193,7 @@ const loadRemoteHistory = async (): Promise<HistoryEntry[]> => {
     const remoteHistory = await getHistory()
     return remoteHistory.map(historyEntryDtoToHistoryEntry)
   } catch (error) {
-    console.error(`Error fetching history entries from server: ${String(error)}`)
+    log.error('Error while fetching history entries from server', error)
     return []
   }
 }

src/redux/ui-notifications/methods.ts

@@ -8,6 +8,9 @@ import i18n, { TOptions } from 'i18next'
 import { store } from '../index'
 import { DismissUiNotificationAction, DispatchOptions, UiNotificationActionType } from './types'
 import { DateTime } from 'luxon'
+import { Logger } from '../../utils/logger'
+
+const log = new Logger('Redux > Notifications')
 
 export const DEFAULT_DURATION_IN_SECONDS = 10
 
@@ -70,7 +73,7 @@ export const dismissUiNotification = (notificationId: number): void => {
 export const showErrorNotification =
   (messageI18nKey: string, messageI18nOptions?: TOptions | string) =>
   (error: Error): void => {
-    console.error(i18n.t(messageI18nKey, messageI18nOptions), error)
+    log.error(i18n.t(messageI18nKey, messageI18nOptions), error)
     void dispatchUiNotification('common.errorOccurred', messageI18nKey, {
       contentI18nOptions: messageI18nOptions,
       icon: 'exclamation-triangle'

src/service-worker-registration.ts

@@ -15,6 +15,9 @@
 
 // To learn more about the benefits of this model and instructions on how to
 // opt-in, read https://cra.link/PWA
+import { Logger } from './utils/logger'
+
+const log = new Logger('ServiceWorker > Registration')
 
 const localhostRegex = /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 
@@ -53,12 +56,12 @@ export function register(config?: Config): void {
         // service worker/PWA documentation.
         navigator.serviceWorker.ready
           .then(() => {
-            console.log(
+            log.info(
               'This web app is being served cache-first by a service ' +
                 'worker. To learn more, visit https://cra.link/PWA'
             )
           })
-          .catch((error: Error) => console.error(error))
+          .catch((error: Error) => log.error(error))
       } else {
         // Is not localhost. Just register service worker
         registerValidSW(swUrl, config)
@@ -82,7 +85,7 @@ function registerValidSW(swUrl: string, config?: Config) {
               // At this point, the updated precached content has been fetched,
               // but the previous service worker will still serve the older
               // content until all client tabs are closed.
-              console.log(
+              log.info(
                 'New content is available and will be used when all ' +
                   'tabs for this page are closed. See https://cra.link/PWA.'
               )
@@ -95,7 +98,7 @@ function registerValidSW(swUrl: string, config?: Config) {
               // At this point, everything has been precached.
               // It's the perfect time to display a
               // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.')
+              log.info('Content is cached for offline use.')
 
               // Execute callback
               if (config && config.onSuccess) {
@@ -107,7 +110,7 @@ function registerValidSW(swUrl: string, config?: Config) {
       }
     })
     .catch((error) => {
-      console.error('Error during service worker registration:', error)
+      log.error('Error during service worker registration', error)
     })
 }
 
@@ -128,16 +131,16 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
               .then(() => {
                 window.location.reload()
               })
-              .catch((error: Error) => console.error(error))
+              .catch((error: Error) => log.error(error))
           })
-          .catch((error: Error) => console.error(error))
+          .catch((error: Error) => log.error(error))
       } else {
         // Service worker found. Proceed as normal.
         registerValidSW(swUrl, config)
       }
     })
     .catch(() => {
-      console.log('No internet connection found. App is running in offline mode.')
+      log.info('No internet connection found. App is running in offline mode.')
     })
 }
 
@@ -145,10 +148,10 @@ export function unregister(): void {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.ready
       .then((registration) => {
-        registration.unregister().catch((error: Error) => console.error(error))
+        registration.unregister().catch((error: Error) => log.error(error))
       })
       .catch((error: Error) => {
-        console.error(error.message)
+        log.error(error.message)
       })
   }
 }

src/service-worker.ts

@@ -19,6 +19,9 @@ import { ExpirationPlugin } from 'workbox-expiration'
 import { createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
 import { registerRoute } from 'workbox-routing'
 import { StaleWhileRevalidate } from 'workbox-strategies'
+import { Logger } from './utils/logger'
+
+const log = new Logger('ServiceWorker')
 
 declare const self: ServiceWorkerGlobalScope
 
@@ -80,7 +83,7 @@ registerRoute(
 self.addEventListener('message', (event) => {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   if (event.data && event.data.type === 'SKIP_WAITING') {
-    self.skipWaiting().catch((e) => console.error(e))
+    self.skipWaiting().catch((e) => log.error(e))
   }
 })
 

src/utils/logger.test.ts

@@ -0,0 +1,71 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Logger, LogLevel } from './logger'
+import { Settings } from 'luxon'
+
+describe('Logger', () => {
+  let consoleMock: jest.SpyInstance
+  let originalNow: () => number
+  let dateShift = 0
+
+  function mockConsole(methodToMock: LogLevel, onResult: (result: string) => void) {
+    consoleMock = jest.spyOn(console, methodToMock).mockImplementation((...data: string[]) => {
+      const result = data.reduce((state, current) => state + ' ' + current)
+      onResult(result)
+    })
+  }
+
+  beforeEach(() => {
+    originalNow = Settings.now
+    Settings.now = () => new Date(2021, 9, 25, dateShift, 1 + dateShift, 2 + dateShift, 3 + dateShift).valueOf()
+  })
+
+  afterEach(() => {
+    Settings.now = originalNow
+    consoleMock.mockReset()
+  })
+
+  it('logs a debug message into the console', (done) => {
+    dateShift = 0
+    mockConsole(LogLevel.DEBUG, (result) => {
+      expect(consoleMock).toBeCalled()
+      expect(result).toEqual('%c[2021-10-25 00:01:02] %c(prefix) color: yellow color: orange beans')
+      done()
+    })
+    new Logger('prefix').debug('beans')
+  })
+
+  it('logs a info message into the console', (done) => {
+    dateShift = 1
+    mockConsole(LogLevel.INFO, (result) => {
+      expect(consoleMock).toBeCalled()
+      expect(result).toEqual('%c[2021-10-25 01:02:03] %c(prefix) color: yellow color: orange toast')
+      done()
+    })
+    new Logger('prefix').info('toast')
+  })
+
+  it('logs a warn message into the console', (done) => {
+    dateShift = 2
+    mockConsole(LogLevel.WARN, (result) => {
+      expect(consoleMock).toBeCalled()
+      expect(result).toEqual('%c[2021-10-25 02:03:04] %c(prefix) color: yellow color: orange eggs')
+      done()
+    })
+    new Logger('prefix').warn('eggs')
+  })
+
+  it('logs a error message into the console', (done) => {
+    dateShift = 3
+    mockConsole(LogLevel.ERROR, (result) => {
+      expect(consoleMock).toBeCalled()
+      expect(result).toEqual('%c[2021-10-25 03:04:05] %c(prefix) color: yellow color: orange bacon')
+      done()
+    })
+    new Logger('prefix').error('bacon')
+  })
+})

src/utils/logger.ts

@@ -0,0 +1,83 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { DateTime } from 'luxon'
+
+export enum LogLevel {
+  DEBUG = 'debug',
+  INFO = 'info',
+  WARN = 'warn',
+  ERROR = 'error'
+}
+
+type OutputFunction = (...data: unknown[]) => void
+
+/**
+ * Simple logger that prefixes messages with a timestamp and a name
+ */
+export class Logger {
+  private readonly scope: string
+
+  constructor(scope: string) {
+    this.scope = scope
+  }
+
+  /**
+   * Logs a debug message
+   * @param data data to log
+   */
+  debug(...data: unknown[]): void {
+    this.log(LogLevel.DEBUG, ...data)
+  }
+
+  /**
+   * Logs a normal informative message
+   * @param data data to log
+   */
+  info(...data: unknown[]): void {
+    this.log(LogLevel.INFO, ...data)
+  }
+
+  /**
+   * Logs a warning
+   * @param data data to log
+   */
+  warn(...data: unknown[]): void {
+    this.log(LogLevel.WARN, ...data)
+  }
+
+  /**
+   * Logs an error
+   * @param data data to log
+   */
+  error(...data: unknown[]): void {
+    this.log(LogLevel.ERROR, ...data)
+  }
+
+  private log(loglevel: LogLevel, ...data: unknown[]) {
+    const preparedData = [...this.prefix(), ...data]
+    const logOutput = Logger.getLogOutput(loglevel)
+    logOutput(...preparedData)
+  }
+
+  private static getLogOutput(logLevel: LogLevel): OutputFunction {
+    switch (logLevel) {
+      case LogLevel.INFO:
+        return console.info
+      case LogLevel.DEBUG:
+        return console.debug
+      case LogLevel.ERROR:
+        return console.error
+      case LogLevel.WARN:
+        return console.warn
+    }
+  }
+
+  private prefix(): string[] {
+    const timestamp = DateTime.now().toFormat('yyyy-MM-dd HH:mm:ss')
+    return [`%c[${timestamp}] %c(${this.scope})`, 'color: yellow', 'color: orange']
+  }
+}