Improve Logging (#1519)

Improve Logging

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

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])