Add ability for client to create server logs

52 files changed, 177 insertions, 142 deletions

diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.ts b/client/src/app/+admin/overview/users/user-list/user-list.component.ts
index 3e1a5f6b8..99987fdff 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.ts
@@ -2,11 +2,12 @@ import { SortMeta } from 'primeng/api'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, ConfirmService, LocalStorageService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
-import { prepareIcu, getAPIHost } from '@app/helpers'
+import { getAPIHost, prepareIcu } from '@app/helpers'
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { Actor, DropdownAction } from '@app/shared/shared-main'
 import { AccountMutedStatus, BlocklistService, UserBanModalComponent, UserModerationDisplayType } from '@app/shared/shared-moderation'
 import { UserAdminService } from '@app/shared/shared-users'
+import { logger } from '@root-helpers/logger'
 import { User, UserRole } from '@shared/models'
 
 type UserForList = User & {
@@ -149,7 +150,7 @@ export class UserListComponent extends RestTable implements OnInit {
         this.selectedColumns = JSON.parse(result)
         return
       } catch (err) {
-        console.error('Cannot load selected columns.', err)
+        logger.error('Cannot load selected columns.', err)
       }
     }
 
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
index d39c2ea1c..b02c054a2 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
@@ -4,6 +4,7 @@ import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
 import { ComponentPagination, ConfirmService, hasMoreItems, Notifier, PluginService } from '@app/core'
+import { logger } from '@root-helpers/logger'
 import { PeerTubePluginIndex, PluginType } from '@shared/models'
 
 @Component({
@@ -94,7 +95,7 @@ export class PluginSearchComponent implements OnInit {
           },
 
           error: err => {
-            console.error(err)
+            logger.error(err)
 
             const message = $localize`The plugin index is not available. Please retry later.`
             this.notifier.error(message)
diff --git a/client/src/app/+admin/system/logs/log-row.model.ts b/client/src/app/+admin/system/logs/log-row.model.ts
index 615778210..e83c7b064 100644
--- a/client/src/app/+admin/system/logs/log-row.model.ts
+++ b/client/src/app/+admin/system/logs/log-row.model.ts
@@ -1,10 +1,11 @@
-import { LogLevel } from '@shared/models'
 import omit from 'lodash-es/omit'
+import { logger } from '@root-helpers/logger'
+import { ServerLogLevel } from '@shared/models'
 
 export class LogRow {
   date: Date
   localeDate: string
-  level: LogLevel
+  level: ServerLogLevel
   message: string
   meta: string
 
@@ -33,7 +34,7 @@ export class LogRow {
         this.meta = JSON.stringify(message, null, 2)
         this.message = ''
       } catch (err) {
-        console.error('Cannot parse audit message.', err)
+        logger.error('Cannot parse audit message.', err)
       }
     }
   }
diff --git a/client/src/app/+admin/system/logs/logs.component.ts b/client/src/app/+admin/system/logs/logs.component.ts
index 06237522a..939e710d7 100644
--- a/client/src/app/+admin/system/logs/logs.component.ts
+++ b/client/src/app/+admin/system/logs/logs.component.ts
@@ -1,6 +1,6 @@
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
 import { LocalStorageService, Notifier } from '@app/core'
-import { LogLevel } from '@shared/models'
+import { ServerLogLevel } from '@shared/models'
 import { LogRow } from './log-row.model'
 import { LogsService } from './logs.service'
 
@@ -17,11 +17,11 @@ export class LogsComponent implements OnInit {
 
   logs: LogRow[] = []
   timeChoices: { id: string, label: string, dateFormat: string }[] = []
-  levelChoices: { id: LogLevel, label: string }[] = []
+  levelChoices: { id: ServerLogLevel, label: string }[] = []
   logTypeChoices: { id: 'audit' | 'standard', label: string }[] = []
 
   startDate: string
-  level: LogLevel
+  level: ServerLogLevel
   logType: 'audit' | 'standard'
   tagsOneOf: string[] = []
 
diff --git a/client/src/app/+admin/system/logs/logs.service.ts b/client/src/app/+admin/system/logs/logs.service.ts
index ea7e08b9b..933a074a8 100644
--- a/client/src/app/+admin/system/logs/logs.service.ts
+++ b/client/src/app/+admin/system/logs/logs.service.ts
@@ -3,7 +3,7 @@ import { catchError, map } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { RestExtractor, RestService } from '@app/core'
-import { LogLevel } from '@shared/models'
+import { ServerLogLevel } from '@shared/models'
 import { environment } from '../../../../environments/environment'
 import { LogRow } from './log-row.model'
 
@@ -22,7 +22,7 @@ export class LogsService {
     isAuditLog: boolean
     startDate: string
     tagsOneOf?: string[]
-    level?: LogLevel
+    level?: ServerLogLevel
     endDate?: string
   }): Observable<any[]> {
     const { isAuditLog, startDate, endDate, tagsOneOf } = options
diff --git a/client/src/app/+plugin-pages/plugin-pages.component.ts b/client/src/app/+plugin-pages/plugin-pages.component.ts
index 973e4d021..9fe4b413e 100644
--- a/client/src/app/+plugin-pages/plugin-pages.component.ts
+++ b/client/src/app/+plugin-pages/plugin-pages.component.ts
@@ -1,6 +1,7 @@
 import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { PluginService } from '@app/core'
+import { logger } from '@root-helpers/logger'
 
 @Component({
   templateUrl: './plugin-pages.component.html'
@@ -26,7 +27,7 @@ export class PluginPagesComponent implements AfterViewInit {
 
     const registered = this.pluginService.getRegisteredClientRoute(path)
     if (!registered) {
-      console.log('Could not find registered route %s.', path, this.pluginService.getAllRegisteredClientRoutes())
+      logger.info(`Could not find registered route ${path}`, this.pluginService.getAllRegisteredClientRoutes())
 
       return this.router.navigate([ '/404' ], { skipLocationChange: true })
     }
diff --git a/client/src/app/+search/shared/abstract-lazy-load.resolver.ts b/client/src/app/+search/shared/abstract-lazy-load.resolver.ts
index b18a5b64d..7551d977d 100644
--- a/client/src/app/+search/shared/abstract-lazy-load.resolver.ts
+++ b/client/src/app/+search/shared/abstract-lazy-load.resolver.ts
@@ -1,6 +1,7 @@
 import { Observable } from 'rxjs'
 import { map } from 'rxjs/operators'
 import { ActivatedRouteSnapshot, Resolve, Router } from '@angular/router'
+import { logger } from '@root-helpers/logger'
 import { ResultList } from '@shared/models'
 
 export abstract class AbstractLazyLoadResolver <T> implements Resolve<any> {
@@ -10,7 +11,7 @@ export abstract class AbstractLazyLoadResolver <T> implements Resolve<any> {
     const url = route.params.url
 
     if (!url) {
-      console.error('Could not find url param.', { params: route.params })
+      logger.error('Could not find url param.', { params: route.params })
       return this.router.navigateByUrl('/404')
     }
 
@@ -18,7 +19,7 @@ export abstract class AbstractLazyLoadResolver <T> implements Resolve<any> {
       .pipe(
         map(result => {
           if (result.data.length !== 1) {
-            console.error('Cannot find result for this URL')
+            logger.error('Cannot find result for this URL')
             return this.router.navigateByUrl('/404')
           }
 
diff --git a/client/src/app/+video-studio/edit/video-studio-edit.component.ts b/client/src/app/+video-studio/edit/video-studio-edit.component.ts
index 392b65767..bf91c237a 100644
--- a/client/src/app/+video-studio/edit/video-studio-edit.component.ts
+++ b/client/src/app/+video-studio/edit/video-studio-edit.component.ts
@@ -4,6 +4,7 @@ import { ConfirmService, Notifier, ServerService } from '@app/core'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { VideoDetails } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
+import { logger } from '@root-helpers/logger'
 import { secondsToTime } from '@shared/core-utils'
 import { VideoStudioTask, VideoStudioTaskCut } from '@shared/models'
 import { VideoStudioService } from '../shared'
@@ -97,7 +98,7 @@ export class VideoStudioEditComponent extends FormReactive implements OnInit {
           this.loadingBar.useRef().complete()
           this.isRunningEdition = false
           this.notifier.error(err.message)
-          console.error(err)
+          logger.error(err)
         }
       })
   }
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.ts b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
index c74ef5731..99f8c9034 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
@@ -38,6 +38,7 @@ import { VideoCaptionAddModalComponent } from './video-caption-add-modal.compone
 import { VideoCaptionEditModalComponent } from './video-caption-edit-modal/video-caption-edit-modal.component'
 import { VideoEditType } from './video-edit.type'
 import { VideoSource } from '@shared/models/videos/video-source'
+import { logger } from '@root-helpers/logger'
 
 type VideoLanguages = VideoConstant<string> & { group?: string }
 type PluginField = {
@@ -443,7 +444,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
 
             const oldChannel = this.userVideoChannels.find(c => c.id === oldChannelId)
             if (!newChannel || !oldChannel) {
-              console.error('Cannot find new or old channel.')
+              logger.error('Cannot find new or old channel.')
               return
             }
 
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
index 80e5a73da..91eb66931 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
@@ -7,6 +7,7 @@ import { FormValidatorService } from '@app/shared/shared-forms'
 import { Video, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LiveVideoService } from '@app/shared/shared-video-live'
 import { LoadingBarService } from '@ngx-loading-bar/core'
+import { logger } from '@root-helpers/logger'
 import { LiveVideo, LiveVideoCreate, LiveVideoLatencyMode, LiveVideoUpdate, PeerTubeProblemDocument, ServerErrorCode } from '@shared/models'
 import { VideoSend } from './video-send'
 
@@ -141,7 +142,7 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, AfterView
       error: err => {
         this.error = err.message
         scrollToTop()
-        console.error(err)
+        logger.error(err)
       }
     })
   }
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts
index da4996902..7b9531d27 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts
@@ -6,6 +6,7 @@ import { scrollToTop } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoCaptionService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
+import { logger } from '@root-helpers/logger'
 import { PeerTubeProblemDocument, ServerErrorCode, VideoUpdate } from '@shared/models'
 import { hydrateFormFromVideo } from '../shared/video-edit-utils'
 import { VideoSend } from './video-send'
@@ -139,7 +140,7 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Af
           error: err => {
             this.error = err.message
             scrollToTop()
-            console.error(err)
+            logger.error(err)
           }
         })
   }
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts
index 971a2a070..4ef7d1321 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts
@@ -7,6 +7,7 @@ import { scrollToTop } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoCaptionService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
+import { logger } from '@root-helpers/logger'
 import { VideoUpdate } from '@shared/models'
 import { hydrateFormFromVideo } from '../shared/video-edit-utils'
 import { VideoSend } from './video-send'
@@ -128,7 +129,7 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, AfterV
           error: err => {
             this.error = err.message
             scrollToTop()
-            console.error(err)
+            logger.error(err)
           }
         })
   }
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
index 663955d27..66a3967c7 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
@@ -1,6 +1,5 @@
 import { truncate } from 'lodash-es'
 import { UploadState, UploadxOptions, UploadxService } from 'ngx-uploadx'
-import { isIOS } from '@root-helpers/web-browser'
 import { HttpErrorResponse, HttpEventType, HttpHeaders } from '@angular/common/http'
 import { AfterViewInit, Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
@@ -9,6 +8,8 @@ import { genericUploadErrorHandler, scrollToTop } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { BytesPipe, Video, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
+import { logger } from '@root-helpers/logger'
+import { isIOS } from '@root-helpers/web-browser'
 import { HttpStatusCode, VideoCreateResult } from '@shared/models'
 import { UploaderXFormData } from './uploaderx-form-data'
 import { VideoSend } from './video-send'
@@ -264,7 +265,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
           error: err => {
             this.error = err.message
             scrollToTop()
-            console.error(err)
+            logger.error(err)
           }
         })
   }
diff --git a/client/src/app/+videos/+video-edit/video-update.component.ts b/client/src/app/+videos/+video-edit/video-update.component.ts
index 13e786a8e..ed17dff06 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.ts
+++ b/client/src/app/+videos/+video-edit/video-update.component.ts
@@ -8,9 +8,10 @@ import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { Video, VideoCaptionEdit, VideoCaptionService, VideoDetails, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LiveVideoService } from '@app/shared/shared-video-live'
 import { LoadingBarService } from '@ngx-loading-bar/core'
+import { logger } from '@root-helpers/logger'
 import { LiveVideo, LiveVideoUpdate, VideoPrivacy } from '@shared/models'
-import { hydrateFormFromVideo } from './shared/video-edit-utils'
 import { VideoSource } from '@shared/models/videos/video-source'
+import { hydrateFormFromVideo } from './shared/video-edit-utils'
 
 @Component({
   selector: 'my-videos-update',
@@ -156,7 +157,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
             this.loadingBar.useRef().complete()
             this.isUpdatingVideo = false
             this.notifier.error(err.message)
-            console.error(err)
+            logger.error(err)
           }
         })
   }
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts
index e002b3c22..b5444facb 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts
@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core'
 import { MarkdownService, Notifier } from '@app/core'
 import { VideoDetails, VideoService } from '@app/shared/shared-main'
+import { logger } from '@root-helpers/logger'
 
 @Component({
   selector: 'my-video-description',
@@ -75,7 +76,7 @@ export class VideoDescriptionComponent implements OnChanges {
   private updateVideoDescription (description: string) {
     this.video.description = description
     this.setVideoDescriptionHTML()
-      .catch(err => console.error(err))
+      .catch(err => logger.error(err))
   }
 
   private async setVideoDescriptionHTML () {
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index 6a3bd1522..292ce6441 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -24,6 +24,7 @@ import { Video, VideoCaptionService, VideoDetails, VideoService } from '@app/sha
 import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
 import { LiveVideoService } from '@app/shared/shared-video-live'
 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
+import { logger } from '@root-helpers/logger'
 import { isP2PEnabled } from '@root-helpers/video'
 import { timeToInt } from '@shared/core-utils'
 import {
@@ -225,7 +226,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         : parseInt(positionParam + '', 10)
 
       if (isNaN(this.playlistPosition)) {
-        console.error(`playlistPosition query param '${positionParam}' was parsed as NaN, defaulting to 1.`)
+        logger.error(`playlistPosition query param '${positionParam}' was parsed as NaN, defaulting to 1.`)
         this.playlistPosition = 1
       }
 
@@ -378,7 +379,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     }
 
     this.buildPlayer(urlOptions, loggedInOrAnonymousUser)
-      .catch(err => console.error('Cannot build the player', err))
+      .catch(err => logger.error('Cannot build the player', err))
 
     this.setOpenGraphTags()
 
@@ -550,7 +551,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       this.player.dispose()
       this.player = undefined
     } catch (err) {
-      console.error('Cannot dispose player.', err)
+      logger.error('Cannot dispose player.', err)
     }
   }
 
@@ -717,7 +718,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   private handleLiveStateChange (newState: VideoState) {
     if (newState !== VideoState.PUBLISHED) return
 
-    console.log('Loading video after live update.')
+    logger.info('Loading video after live update.')
 
     const videoUUID = this.video.uuid
 
@@ -728,11 +729,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   private handleLiveViewsChange (newViewers: number) {
     if (!this.video) {
-      console.error('Cannot update video live views because video is no defined.')
+      logger.error('Cannot update video live views because video is no defined.')
       return
     }
 
-    console.log('Updating live views.')
+    logger.info('Updating live views.')
 
     this.video.viewers = newViewers
   }
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 8fdab0c40..a2ad4806c 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -1,5 +1,5 @@
 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
-import { forkJoin, delay } from 'rxjs'
+import { delay, forkJoin } from 'rxjs'
 import { filter, first, map } from 'rxjs/operators'
 import { DOCUMENT, getLocaleDirection, PlatformLocation } from '@angular/common'
 import { AfterViewInit, Component, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core'
@@ -20,18 +20,19 @@ import {
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { PluginService } from '@app/core/plugins/plugin.service'
 import { AccountSetupWarningModalComponent } from '@app/modal/account-setup-warning-modal.component'
+import { AdminWelcomeModalComponent } from '@app/modal/admin-welcome-modal.component'
 import { CustomModalComponent } from '@app/modal/custom-modal.component'
 import { InstanceConfigWarningModalComponent } from '@app/modal/instance-config-warning-modal.component'
-import { AdminWelcomeModalComponent } from '@app/modal/admin-welcome-modal.component'
 import { NgbConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { LoadingBarService } from '@ngx-loading-bar/core'
+import { logger } from '@root-helpers/logger'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { getShortLocale } from '@shared/core-utils/i18n'
 import { BroadcastMessageLevel, HTMLServerConfig, UserRole } from '@shared/models'
 import { MenuService } from './core/menu/menu.service'
 import { POP_STATE_MODAL_DISMISS } from './helpers'
-import { InstanceService } from './shared/shared-instance'
 import { GlobalIconName } from './shared/shared-icons'
+import { InstanceService } from './shared/shared-instance'
 
 @Component({
   selector: 'my-app',
@@ -221,7 +222,7 @@ export class AppComponent implements OnInit, AfterViewInit {
         /* eslint-disable no-eval */
         eval(this.serverConfig.instance.customizations.javascript)
       } catch (err) {
-        console.error('Cannot eval custom JavaScript.', err)
+        logger.error('Cannot eval custom JavaScript.', err)
       }
     }
   }
diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts
index 2ac88c185..ece6bc5d1 100644
--- a/client/src/app/core/auth/auth.service.ts
+++ b/client/src/app/core/auth/auth.service.ts
@@ -5,7 +5,7 @@ import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { Router } from '@angular/router'
 import { Notifier } from '@app/core/notification/notifier.service'
-import { objectToUrlEncoded, peertubeLocalStorage, UserTokens } from '@root-helpers/index'
+import { logger, objectToUrlEncoded, peertubeLocalStorage, UserTokens } from '@root-helpers/index'
 import { HttpStatusCode, MyUser as UserServerModel, OAuthClientLocal, User, UserLogin, UserRefreshToken } from '@shared/models'
 import { environment } from '../../../environments/environment'
 import { RestExtractor } from '../rest/rest-extractor.service'
@@ -90,7 +90,7 @@ export class AuthService {
             peertubeLocalStorage.setItem(AuthService.LOCAL_STORAGE_OAUTH_CLIENT_KEYS.CLIENT_ID, this.clientId)
             peertubeLocalStorage.setItem(AuthService.LOCAL_STORAGE_OAUTH_CLIENT_KEYS.CLIENT_SECRET, this.clientSecret)
 
-            console.log('Client credentials loaded.')
+            logger.info('Client credentials loaded.')
           },
 
           error: err => {
@@ -177,7 +177,7 @@ Ensure you have correctly configured PeerTube (config/ directory), in particular
           }
         },
 
-        error: err => console.error(err)
+        error: err => logger.error(err)
       })
 
     this.user = null
@@ -190,7 +190,7 @@ Ensure you have correctly configured PeerTube (config/ directory), in particular
   refreshAccessToken () {
     if (this.refreshingTokenObservable) return this.refreshingTokenObservable
 
-    console.log('Refreshing token...')
+    logger.info('Refreshing token...')
 
     const refreshToken = this.getRefreshToken()
 
@@ -212,8 +212,8 @@ Ensure you have correctly configured PeerTube (config/ directory), in particular
                                            catchError(err => {
                                              this.refreshingTokenObservable = null
 
-                                             console.error(err)
-                                             console.log('Cannot refresh token -> logout...')
+                                             logger.error(err)
+                                             logger.info('Cannot refresh token -> logout...')
                                              this.logout()
                                              this.router.navigate([ '/login' ])
 
diff --git a/client/src/app/core/notification/notifier.service.ts b/client/src/app/core/notification/notifier.service.ts
index 165bb0c76..15af5c1b6 100644
--- a/client/src/app/core/notification/notifier.service.ts
+++ b/client/src/app/core/notification/notifier.service.ts
@@ -1,5 +1,6 @@
 import { MessageService } from 'primeng/api'
 import { Injectable } from '@angular/core'
+import { logger } from '@root-helpers/logger'
 
 @Injectable()
 export class Notifier {
@@ -10,21 +11,21 @@ export class Notifier {
   info (text: string, title?: string, timeout?: number, sticky?: boolean) {
     if (!title) title = $localize`Info`
 
-    console.info(`${title}: ${text}`)
+    logger.info(`${title}: ${text}`)
     return this.notify('info', text, title, timeout, sticky)
   }
 
   error (text: string, title?: string, timeout?: number, sticky?: boolean) {
     if (!title) title = $localize`Error`
 
-    console.error(`${title}: ${text}`)
+    logger.error(`${title}: ${text}`)
     return this.notify('error', text, title, timeout, sticky)
   }
 
   success (text: string, title?: string, timeout?: number, sticky?: boolean) {
     if (!title) title = $localize`Success`
 
-    console.log(`${title}: ${text}`)
+    logger.info(`${title}: ${text}`)
     return this.notify('success', text, title, timeout, sticky)
   }
 
diff --git a/client/src/app/core/plugins/hooks.service.ts b/client/src/app/core/plugins/hooks.service.ts
index 062083fd1..7fd56d92e 100644
--- a/client/src/app/core/plugins/hooks.service.ts
+++ b/client/src/app/core/plugins/hooks.service.ts
@@ -2,6 +2,7 @@ import { from, Observable } from 'rxjs'
 import { mergeMap, switchMap } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
 import { PluginService } from '@app/core/plugins/plugin.service'
+import { logger } from '@root-helpers/logger'
 import { ClientActionHookName, ClientFilterHookName, PluginClientScope } from '@shared/models'
 import { AuthService, AuthStatus } from '../auth'
 
@@ -50,7 +51,7 @@ export class HooksService {
   runAction<T, U extends ClientActionHookName> (hookName: U, scope: PluginClientScope, params?: T) {
     this.pluginService.ensurePluginsAreLoaded(scope)
         .then(() => this.pluginService.runHook(hookName, undefined, params))
-        .catch((err: any) => console.error('Fatal hook error.', { err }))
+        .catch((err: any) => logger.error('Fatal hook error.', err))
   }
 
   async wrapObject<T, U extends ClientFilterHookName> (result: T, scope: PluginClientScope, hookName: U) {
diff --git a/client/src/app/core/rest/rest-extractor.service.ts b/client/src/app/core/rest/rest-extractor.service.ts
index 86c7484a5..8a2974563 100644
--- a/client/src/app/core/rest/rest-extractor.service.ts
+++ b/client/src/app/core/rest/rest-extractor.service.ts
@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core'
 import { Router } from '@angular/router'
 import { dateToHuman } from '@app/helpers'
 import { HttpStatusCode, ResultList } from '@shared/models'
+import { logger } from '@root-helpers/logger'
 
 @Injectable()
 export class RestExtractor {
@@ -64,7 +65,7 @@ export class RestExtractor {
     if (err.error instanceof Error) {
       // A client-side or network error occurred. Handle it accordingly.
       const errorMessage = err.error.detail || err.error.title
-      console.error('An error occurred:', errorMessage)
+      logger.error('An error occurred:', errorMessage)
 
       return errorMessage
     }
@@ -75,12 +76,12 @@ export class RestExtractor {
 
     if (err.status !== undefined) {
       const errorMessage = this.buildServerErrorMessage(err)
-      console.error(`Backend returned code ${err.status}, errorMessage is: ${errorMessage}`)
+      logger.error(`Backend returned code ${err.status}, errorMessage is: ${errorMessage}`)
 
       return errorMessage
     }
 
-    console.error(err)
+    logger.error(err)
     return err
   }
 
diff --git a/client/src/app/core/rest/rest-table.ts b/client/src/app/core/rest/rest-table.ts
index cb5bd0b89..ec5646b5d 100644
--- a/client/src/app/core/rest/rest-table.ts
+++ b/client/src/app/core/rest/rest-table.ts
@@ -1,10 +1,11 @@
-import * as debug from 'debug'
+import debug from 'debug'
 import { LazyLoadEvent, SortMeta } from 'primeng/api'
 import { ActivatedRoute, Router } from '@angular/router'
+import { logger } from '@root-helpers/logger'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { RestPagination } from './rest-pagination'
 
-const logger = debug('peertube:tables:RestTable')
+const debugLogger = debug('peertube:tables:RestTable')
 
 export abstract class RestTable {
 
@@ -34,7 +35,7 @@ export abstract class RestTable {
       try {
         this.sort = JSON.parse(result)
       } catch (err) {
-        console.error('Cannot load sort of local storage key ' + this.getSortLocalStorageKey(), err)
+        logger.error('Cannot load sort of local storage key ' + this.getSortLocalStorageKey(), err)
       }
     }
   }
@@ -44,7 +45,7 @@ export abstract class RestTable {
   }
 
   loadLazy (event: LazyLoadEvent) {
-    logger('Load lazy %o.', event)
+    debugLogger('Load lazy %o.', event)
 
     this.sort = {
       order: event.sortOrder,
diff --git a/client/src/app/core/rest/rest.service.ts b/client/src/app/core/rest/rest.service.ts
index fc729f0f6..d8b5ffb18 100644
--- a/client/src/app/core/rest/rest.service.ts
+++ b/client/src/app/core/rest/rest.service.ts
@@ -5,7 +5,7 @@ import { Injectable } from '@angular/core'
 import { ComponentPaginationLight } from './component-pagination.model'
 import { RestPagination } from './rest-pagination'
 
-const logger = debug('peertube:rest')
+const debugLogger = debug('peertube:rest')
 
 interface QueryStringFilterPrefixes {
   [key: string]: {
@@ -88,7 +88,7 @@ export class RestService {
     const prefixeStrings = Object.values(prefixes)
                                  .map(p => p.prefix)
 
-    logger(`Built tokens "${tokens.join(', ')}" for prefixes "${prefixeStrings.join(', ')}"`)
+    debugLogger(`Built tokens "${tokens.join(', ')}" for prefixes "${prefixeStrings.join(', ')}"`)
 
     // Search is the querystring minus defined filters
     const searchTokens = tokens.filter(t => {
@@ -127,7 +127,7 @@ export class RestService {
 
     const search = searchTokens.join(' ') || undefined
 
-    logger('Built search: ' + search, additionalFilters)
+    debugLogger('Built search: ' + search, additionalFilters)
 
     return {
       search,
diff --git a/client/src/app/core/routing/custom-reuse-strategy.ts b/client/src/app/core/routing/custom-reuse-strategy.ts
index 5d3ad2e67..269b9d193 100644
--- a/client/src/app/core/routing/custom-reuse-strategy.ts
+++ b/client/src/app/core/routing/custom-reuse-strategy.ts
@@ -1,5 +1,6 @@
 import { ComponentRef, Injectable } from '@angular/core'
 import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router'
+import { logger } from '@root-helpers/logger'
 import { DisableForReuseHook } from './disable-for-reuse-hook'
 import { PeerTubeRouterService, RouterSetting } from './peertube-router.service'
 
@@ -22,7 +23,7 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
     const key = this.generateKey(route)
     this.recentlyUsed = key
 
-    console.log('Storing component %s to reuse later.', key)
+    logger.info(`Storing component ${key} to reuse later.`)
 
     const componentRef = (handle as any).componentRef as ComponentRef<DisableForReuseHook>
     componentRef.instance.disableForReuse()
@@ -46,7 +47,7 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
     const key = this.generateKey(route)
     this.recentlyUsed = key
 
-    console.log('Reusing component %s.', key)
+    logger.info(`Reusing component ${key}.`)
 
     const handle = this.storedRouteHandles.get(key)
     if (!handle) return handle;
@@ -66,7 +67,7 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
       this.storedRouteHandles.forEach((r, key) => {
         if (key === this.recentlyUsed) return
 
-        console.log('Removing stored component %s.', key);
+        logger.info(`Removing stored component ${key}`);
 
         (r as any).componentRef.destroy()
         this.storedRouteHandles.delete(key)
diff --git a/client/src/app/core/routing/redirect.service.ts b/client/src/app/core/routing/redirect.service.ts
index 567fd432b..575b3b2a1 100644
--- a/client/src/app/core/routing/redirect.service.ts
+++ b/client/src/app/core/routing/redirect.service.ts
@@ -1,10 +1,11 @@
 import * as debug from 'debug'
 import { Injectable } from '@angular/core'
 import { NavigationCancel, NavigationEnd, Router } from '@angular/router'
+import { logger } from '@root-helpers/logger'
 import { ServerService } from '../server'
 import { SessionStorageService } from '../wrappers/storage.service'
 
-const logger = debug('peertube:router:RedirectService')
+const debugLogger = debug('peertube:router:RedirectService')
 
 @Injectable()
 export class RedirectService {
@@ -40,7 +41,7 @@ export class RedirectService {
     this.latestSessionUrl = this.storage.getItem(RedirectService.SESSION_STORAGE_LATEST_SESSION_URL_KEY)
     this.storage.removeItem(RedirectService.SESSION_STORAGE_LATEST_SESSION_URL_KEY)
 
-    logger('Loaded latest session URL %s', this.latestSessionUrl)
+    debugLogger('Loaded latest session URL %s', this.latestSessionUrl)
 
     // Track previous url
     this.currentUrl = this.router.url
@@ -51,8 +52,8 @@ export class RedirectService {
         this.previousUrl = this.currentUrl
         this.currentUrl = event.url
 
-        logger('Previous URL is %s, current URL is %s', this.previousUrl, this.currentUrl)
-        logger('Setting %s as latest URL in session storage.', this.currentUrl)
+        debugLogger('Previous URL is %s, current URL is %s', this.previousUrl, this.currentUrl)
+        debugLogger('Setting %s as latest URL in session storage.', this.currentUrl)
 
         this.storage.setItem(RedirectService.SESSION_STORAGE_LATEST_SESSION_URL_KEY, this.currentUrl)
       }
@@ -84,18 +85,14 @@ export class RedirectService {
 
     this.redirectingToHomepage = true
 
-    console.log('Redirecting to %s...', this.defaultRoute)
+    logger.info(`Redirecting to ${this.defaultRoute}...`)
 
     this.router.navigateByUrl(this.defaultRoute, { skipLocationChange })
         .then(() => this.redirectingToHomepage = false)
         .catch(() => {
           this.redirectingToHomepage = false
 
-          console.error(
-            'Cannot navigate to %s, resetting default route to %s.',
-            this.defaultRoute,
-            RedirectService.INIT_DEFAULT_ROUTE
-          )
+          logger.error(`Cannot navigate to ${this.defaultRoute}, resetting default route to ${RedirectService.INIT_DEFAULT_ROUTE}`)
 
           this.defaultRoute = RedirectService.INIT_DEFAULT_ROUTE
           return this.router.navigateByUrl(this.defaultRoute, { skipLocationChange })
@@ -104,18 +101,18 @@ export class RedirectService {
   }
 
   private doRedirect (redirectUrl: string, fallbackRoute?: string) {
-    logger('Redirecting on %s', redirectUrl)
+    debugLogger('Redirecting on %s', redirectUrl)
 
     if (this.isValidRedirection(redirectUrl)) {
       return this.router.navigateByUrl(redirectUrl)
     }
 
-    logger('%s is not a valid redirection, try fallback route %s', redirectUrl, fallbackRoute)
+    debugLogger('%s is not a valid redirection, try fallback route %s', redirectUrl, fallbackRoute)
     if (fallbackRoute) {
       return this.router.navigateByUrl(fallbackRoute)
     }
 
-    logger('There was no fallback route, redirecting to homepage')
+    debugLogger('There was no fallback route, redirecting to homepage')
     return this.redirectToHomepage()
   }
 
diff --git a/client/src/app/core/routing/scroll.service.ts b/client/src/app/core/routing/scroll.service.ts
index 6d37fde71..0966255b3 100644
--- a/client/src/app/core/routing/scroll.service.ts
+++ b/client/src/app/core/routing/scroll.service.ts
@@ -4,8 +4,9 @@ import { ViewportScroller } from '@angular/common'
 import { Injectable } from '@angular/core'
 import { RouterSetting } from '../'
 import { PeerTubeRouterService } from './peertube-router.service'
+import { logger } from '@root-helpers/logger'
 
-const logger = debug('peertube:main:ScrollService')
+const debugLogger = debug('peertube:main:ScrollService')
 
 @Injectable()
 export class ScrollService {
@@ -57,8 +58,8 @@ export class ScrollService {
                           if (nextSearchParams.toString() !== previousSearchParams.toString()) {
                             this.resetScroll = true
                           }
-                        } catch (e) {
-                          console.error('Cannot parse URL to check next scroll.', e)
+                        } catch (err) {
+                          logger.error('Cannot parse URL to check next scroll.', err)
                           this.resetScroll = true
                         }
                       })
@@ -67,7 +68,7 @@ export class ScrollService {
   private consumeScroll () {
     // Handle anchors/restore position
     this.peertubeRouter.getScrollEvents().subscribe(e => {
-      logger('Will schedule scroll after router event %o.', { e, resetScroll: this.resetScroll })
+      debugLogger('Will schedule scroll after router event %o.', { e, resetScroll: this.resetScroll })
 
       // scrollToAnchor first to preserve anchor position when using history navigation
       if (e.anchor) {
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index d01942139..9db455cb8 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -3,6 +3,7 @@ import { first, map, share, shareReplay, switchMap, tap } from 'rxjs/operators'
 import { HttpClient } from '@angular/common/http'
 import { Inject, Injectable, LOCALE_ID } from '@angular/core'
 import { getDevLocale, isOnDevLocale, sortBy } from '@app/helpers'
+import { logger } from '@root-helpers/logger'
 import { getCompleteLocale, isDefaultLocale, peertubeTranslate } from '@shared/core-utils/i18n'
 import { HTMLServerConfig, ServerConfig, ServerStats, VideoConstant } from '@shared/models'
 import { environment } from '../../../environments/environment'
@@ -43,7 +44,7 @@ export class ServerService {
     } catch (err) {
       // Expected in dev mode since we can't inject the config in the HTML
       if (environment.production !== false) {
-        console.error('Cannot load config locally. Fallback to API.')
+        logger.error('Cannot load config locally. Fallback to API.')
       }
 
       return this.getConfig()
diff --git a/client/src/app/core/theme/theme.service.ts b/client/src/app/core/theme/theme.service.ts
index 40939ecb8..ead1770ba 100644
--- a/client/src/app/core/theme/theme.service.ts
+++ b/client/src/app/core/theme/theme.service.ts
@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core'
+import { logger } from '@root-helpers/logger'
 import { capitalizeFirstLetter } from '@root-helpers/string'
 import { UserLocalStorageKeys } from '@root-helpers/users'
 import { HTMLServerConfig, ServerConfigTheme } from '@shared/models'
@@ -57,7 +58,7 @@ export class ThemeService {
   private injectThemes (themes: ServerConfigTheme[], fromLocalStorage = false) {
     this.themes = themes
 
-    console.log('Injecting %d themes.', this.themes.length)
+    logger.info(`Injecting ${this.themes.length} themes.`)
 
     const head = this.getHeadElement()
 
@@ -117,13 +118,13 @@ export class ThemeService {
 
     const currentTheme = this.getCurrentTheme()
 
-    console.log('Enabling %s theme.', currentTheme)
+    logger.info(`Enabling ${currentTheme} theme.`)
 
     this.loadTheme(currentTheme)
 
     const theme = this.getTheme(currentTheme)
     if (theme) {
-      console.log('Adding scripts of theme %s.', currentTheme)
+      logger.info(`Adding scripts of theme ${currentTheme}`)
 
       this.pluginService.addPlugin(theme, true)
 
@@ -165,7 +166,7 @@ export class ThemeService {
       this.injectThemes([ lastActiveTheme ], true)
       this.updateCurrentTheme()
     } catch (err) {
-      console.error('Cannot parse last active theme.', err)
+      logger.error('Cannot parse last active theme.', err)
       return
     }
   }
@@ -173,7 +174,7 @@ export class ThemeService {
   private removeThemePlugins (themeName: string) {
     const oldTheme = this.getTheme(themeName)
     if (oldTheme) {
-      console.log('Removing scripts of old theme %s.', themeName)
+      logger.info(`Removing scripts of old theme ${themeName}.`)
       this.pluginService.removePlugin(oldTheme)
     }
   }
diff --git a/client/src/app/core/users/user-local-storage.service.ts b/client/src/app/core/users/user-local-storage.service.ts
index d15bf735b..fff649eef 100644
--- a/client/src/app/core/users/user-local-storage.service.ts
+++ b/client/src/app/core/users/user-local-storage.service.ts
@@ -2,8 +2,9 @@
 import { filter, throttleTime } from 'rxjs'
 import { Injectable } from '@angular/core'
 import { AuthService, AuthStatus } from '@app/core/auth'
-import { UserLocalStorageKeys, UserTokens } from '@root-helpers/users'
 import { getBoolOrDefault } from '@root-helpers/local-storage-utils'
+import { logger } from '@root-helpers/logger'
+import { UserLocalStorageKeys, UserTokens } from '@root-helpers/users'
 import { UserRole, UserUpdateMe } from '@shared/models'
 import { NSFWPolicyType } from '@shared/models/videos'
 import { ServerService } from '../server'
@@ -95,7 +96,7 @@ export class UserLocalStorageService {
         : null
     } catch (err) {
       videoLanguages = null
-      console.error('Cannot parse desired video languages from localStorage.', err)
+      logger.error('Cannot parse desired video languages from localStorage.', err)
     }
 
     const htmlConfig = this.server.getHTMLConfig()
@@ -142,7 +143,7 @@ export class UserLocalStorageService {
 
         this.localStorageService.setItem(key, localStorageValue)
       } catch (err) {
-        console.error(`Cannot set ${key}->${value} in localStorage. Likely due to a value impossible to stringify.`, err)
+        logger.error(`Cannot set ${key}->${value} in localStorage. Likely due to a value impossible to stringify.`, err)
       }
     }
   }
diff --git a/client/src/app/header/search-typeahead.component.ts b/client/src/app/header/search-typeahead.component.ts
index 0794ec8f4..d2549315c 100644
--- a/client/src/app/header/search-typeahead.component.ts
+++ b/client/src/app/header/search-typeahead.component.ts
@@ -4,6 +4,7 @@ import { ListKeyManager } from '@angular/cdk/a11y'
 import { AfterViewChecked, Component, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core'
 import { ActivatedRoute, Params, Router } from '@angular/router'
 import { AuthService, ServerService } from '@app/core'
+import { logger } from '@root-helpers/logger'
 import { HTMLServerConfig, SearchTargetType } from '@shared/models'
 import { SuggestionComponent, SuggestionPayload, SuggestionPayloadType } from './suggestion.component'
 
@@ -91,7 +92,7 @@ export class SearchTypeaheadComponent implements OnInit, AfterViewChecked, OnDes
 
     const activeIndex = this.suggestionItems.toArray().findIndex(i => i.result.default === true)
     if (activeIndex === -1) {
-      console.error('Cannot find active index.', { suggestionItems: this.suggestionItems })
+      logger.error('Cannot find active index.', { suggestionItems: this.suggestionItems })
     }
 
     this.updateItemsState(activeIndex)
diff --git a/client/src/app/helpers/i18n-utils.ts b/client/src/app/helpers/i18n-utils.ts
index 2017a31ea..b7d73d16b 100644
--- a/client/src/app/helpers/i18n-utils.ts
+++ b/client/src/app/helpers/i18n-utils.ts
@@ -1,5 +1,6 @@
-import { environment } from '../../environments/environment'
 import IntlMessageFormat from 'intl-messageformat'
+import { logger } from '@root-helpers/logger'
+import { environment } from '../../environments/environment'
 
 function isOnDevLocale () {
   return environment.production === false && window.location.search === '?lang=fr'
@@ -19,14 +20,14 @@ function prepareIcu (icu: string) {
       try {
         return msg.format(context) as string
       } catch (err) {
-        if (!alreadyWarned) console.warn('Cannot format ICU %s.', icu, err)
+        if (!alreadyWarned) logger.warn(`Cannot format ICU ${icu}.`, err)
 
         alreadyWarned = true
         return fallback
       }
     }
   } catch (err) {
-    console.warn('Cannot build intl message %s.', icu, err)
+    logger.warn(`Cannot build intl message ${icu}.`, err)
 
     return (_context: unknown, fallback: string) => fallback
   }
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index 983f0a938..63f01df92 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -24,7 +24,7 @@ import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
 import { PluginsManager } from '@root-helpers/plugins-manager'
 import { HTMLServerConfig, ServerConfig, UserRight, VideoConstant } from '@shared/models'
 
-const logger = debug('peertube:menu:MenuComponent')
+const debugLogger = debug('peertube:menu:MenuComponent')
 
 @Component({
   selector: 'my-menu',
@@ -295,8 +295,8 @@ export class MenuComponent implements OnInit {
       .pipe(
         switchMap(() => this.user.computeCanSeeVideosLink(this.userService.getMyVideoQuotaUsed()))
       ).subscribe(res => {
-        if (res === true) logger('User can see videos link.')
-        else logger('User cannot see videos link.')
+        if (res === true) debugLogger('User can see videos link.')
+        else debugLogger('User cannot see videos link.')
       })
   }
 
diff --git a/client/src/app/modal/account-setup-warning-modal.component.ts b/client/src/app/modal/account-setup-warning-modal.component.ts
index c4cbf92b6..b999a3407 100644
--- a/client/src/app/modal/account-setup-warning-modal.component.ts
+++ b/client/src/app/modal/account-setup-warning-modal.component.ts
@@ -1,6 +1,7 @@
 import { Component, ElementRef, ViewChild } from '@angular/core'
 import { Notifier, ServerService, User, UserService } from '@app/core'
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
+import { logger } from '@root-helpers/logger'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 
 @Component({
@@ -71,7 +72,7 @@ export class AccountSetupWarningModalComponent {
 
     this.userService.updateMyProfile({ noAccountSetupWarningModal: true })
         .subscribe({
-          next: () => console.log('We will not open the account setup modal again.'),
+          next: () => logger.info('We will not open the account setup modal again.'),
 
           error: err => this.notifier.error(err.message)
         })
diff --git a/client/src/app/modal/admin-welcome-modal.component.ts b/client/src/app/modal/admin-welcome-modal.component.ts
index 3679f0847..7a9b89d3d 100644
--- a/client/src/app/modal/admin-welcome-modal.component.ts
+++ b/client/src/app/modal/admin-welcome-modal.component.ts
@@ -1,6 +1,7 @@
 import { Component, ElementRef, ViewChild } from '@angular/core'
 import { Notifier, User, UserService } from '@app/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { logger } from '@root-helpers/logger'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 
 @Component({
@@ -42,7 +43,7 @@ export class AdminWelcomeModalComponent {
 
     this.userService.updateMyProfile({ noWelcomeModal: true })
       .subscribe({
-        next: () => console.log('We will not open the welcome modal again.'),
+        next: () => logger.info('We will not open the welcome modal again.'),
 
         error: err => this.notifier.error(err.message)
       })
diff --git a/client/src/app/modal/custom-modal.component.ts b/client/src/app/modal/custom-modal.component.ts
index 559230e04..49343ae71 100644
--- a/client/src/app/modal/custom-modal.component.ts
+++ b/client/src/app/modal/custom-modal.component.ts
@@ -1,5 +1,6 @@
-import { Component, ElementRef, ViewChild, Input } from '@angular/core'
+import { Component, ElementRef, Input, ViewChild } from '@angular/core'
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
+import { logger } from '@root-helpers/logger'
 
 @Component({
   selector: 'my-custom-modal',
@@ -29,7 +30,7 @@ export class CustomModalComponent {
     confirm?: { value: string, action?: () => void }
   }) {
     if (this.modalRef instanceof NgbModalRef && this.modalService.hasOpenModals()) {
-      console.error('Cannot open another custom modal, one is already opened.')
+      logger.error('Cannot open another custom modal, one is already opened.')
       return
     }
 
diff --git a/client/src/app/modal/instance-config-warning-modal.component.ts b/client/src/app/modal/instance-config-warning-modal.component.ts
index 300738a41..23c2c777e 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.ts
+++ b/client/src/app/modal/instance-config-warning-modal.component.ts
@@ -2,6 +2,7 @@ import { Location } from '@angular/common'
 import { Component, ElementRef, ViewChild } from '@angular/core'
 import { Notifier, User, UserService } from '@app/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { logger } from '@root-helpers/logger'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { About, ServerConfig } from '@shared/models/server'
 
@@ -64,7 +65,7 @@ export class InstanceConfigWarningModalComponent {
 
     this.userService.updateMyProfile({ noInstanceConfigWarningModal: true })
         .subscribe({
-          next: () => console.log('We will not open the instance config warning modal again.'),
+          next: () => logger.info('We will not open the instance config warning modal again.'),
 
           error: err => this.notifier.error(err.message)
         })
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
index 8781c16f5..32d3b0093 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
@@ -8,13 +8,14 @@ import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable }
 import { Account, Actor, DropdownAction, Video, VideoService } from '@app/shared/shared-main'
 import { AbuseService, BlocklistService, VideoBlockService } from '@app/shared/shared-moderation'
 import { VideoCommentService } from '@app/shared/shared-video-comment'
+import { logger } from '@root-helpers/logger'
 import { AbuseState, AdminAbuse } from '@shared/models'
 import { AdvancedInputFilter } from '../shared-forms'
 import { AbuseMessageModalComponent } from './abuse-message-modal.component'
 import { ModerationCommentModalComponent } from './moderation-comment-modal.component'
 import { ProcessedAbuse } from './processed-abuse.model'
 
-const logger = debug('peertube:moderation:AbuseListTableComponent')
+const debugLogger = debug('peertube:moderation:AbuseListTableComponent')
 
 @Component({
   selector: 'my-abuse-list-table',
@@ -158,7 +159,7 @@ export class AbuseListTableComponent extends RestTable implements OnInit {
     const abuse = this.abuses.find(a => a.id === event.abuseId)
 
     if (!abuse) {
-      console.error('Cannot find abuse %d.', event.abuseId)
+      logger.error(`Cannot find abuse ${event.abuseId}`)
       return
     }
 
@@ -177,7 +178,7 @@ export class AbuseListTableComponent extends RestTable implements OnInit {
   }
 
   protected reloadData () {
-    logger('Loading data.')
+    debugLogger('Loading data.')
 
     const options = {
       pagination: this.pagination,
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts
index 6c8dc6d35..d24a5d58d 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts
+++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts
@@ -3,6 +3,7 @@ import { AuthService, HtmlRendererService, Notifier } from '@app/core'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
+import { logger } from '@root-helpers/logger'
 import { AbuseMessage, UserAbuse } from '@shared/models'
 import { ABUSE_MESSAGE_VALIDATOR } from '../form-validators/abuse-validators'
 import { AbuseService } from '../shared-moderation'
@@ -72,7 +73,7 @@ export class AbuseMessageModalComponent extends FormReactive implements OnInit {
 
         error: err => {
           this.sendingMessage = false
-          console.error(err)
+          logger.error(err)
           this.notifier.error('Sorry but you cannot send this message. Please retry later')
         }
       })
diff --git a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
index a959b336d..d738a644e 100644
--- a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
+++ b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
@@ -20,6 +20,7 @@ import {
   VideosListMarkupComponent
 } from './peertube-custom-tags'
 import { CustomMarkupComponent } from './peertube-custom-tags/shared'
+import { logger } from '@root-helpers/logger'
 
 type AngularBuilderFunction = (el: HTMLElement) => ComponentRef<CustomMarkupComponent>
 type HTMLBuilderFunction = (el: HTMLElement) => HTMLElement
@@ -70,7 +71,7 @@ export class CustomMarkupService {
             // Insert as first child
             e.insertBefore(element, e.firstChild)
           } catch (err) {
-            console.error('Cannot inject component %s.', selector, err)
+            logger.error(`Cannot inject component ${selector}`, err)
           }
         })
     }
@@ -90,7 +91,7 @@ export class CustomMarkupService {
 
             this.dynamicElementService.injectElement(e, component)
           } catch (err) {
-            console.error('Cannot inject component %s.', selector, err)
+            logger.error(`Cannot inject component ${selector}`, err)
           }
         })
     }
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.ts b/client/src/app/shared/shared-forms/advanced-input-filter.component.ts
index d8aeaa0fa..929438749 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.ts
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.ts
@@ -16,7 +16,7 @@ export type AdvancedInputFilterChild = {
   value: string
 }
 
-const logger = debug('peertube:AdvancedInputFilterComponent')
+const debugLogger = debug('peertube:AdvancedInputFilterComponent')
 
 @Component({
   selector: 'my-advanced-input-filter',
@@ -98,7 +98,7 @@ export class AdvancedInputFilterComponent implements OnInit, AfterViewInit {
       .subscribe(params => {
         const search = params.search || ''
 
-        logger('On route search change "%s".', search)
+        debugLogger('On route search change "%s".', search)
 
         if (this.searchValue === search) return
 
@@ -132,7 +132,7 @@ export class AdvancedInputFilterComponent implements OnInit, AfterViewInit {
       return
     }
 
-    logger('On search "%s".', this.searchValue)
+    debugLogger('On search "%s".', this.searchValue)
 
     this.search.emit(this.searchValue)
   }
diff --git a/client/src/app/shared/shared-main/angular/defer-loading.directive.ts b/client/src/app/shared/shared-main/angular/defer-loading.directive.ts
index 9a10e90e3..53d6e70ba 100644
--- a/client/src/app/shared/shared-main/angular/defer-loading.directive.ts
+++ b/client/src/app/shared/shared-main/angular/defer-loading.directive.ts
@@ -13,7 +13,7 @@ import {
   ViewContainerRef
 } from '@angular/core'
 
-const logger = debug('peertube:main:DeferLoadingDirective')
+const debugLogger = debug('peertube:main:DeferLoadingDirective')
 
 @Directive({
   selector: '[myDeferLoading]'
@@ -52,7 +52,7 @@ export class DeferLoadingDirective implements AfterViewInit, OnDestroy {
   load () {
     if (this.isLoaded()) return
 
-    logger('Loading component')
+    debugLogger('Loading component')
 
     this.viewContainer.clear()
     this.view = this.viewContainer.createEmbeddedView(this.template, {}, 0)
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.ts b/client/src/app/shared/shared-main/misc/list-overflow.component.ts
index 541991f74..7e4e1b1d1 100644
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.ts
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.ts
@@ -17,7 +17,7 @@ import { ScreenService } from '@app/core'
 import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import * as debug from 'debug'
 
-const logger = debug('peertube:main:ListOverflowItem')
+const debugLogger = debug('peertube:main:ListOverflowItem')
 
 export interface ListOverflowItem {
   label: string
@@ -66,7 +66,7 @@ export class ListOverflowComponent<T extends ListOverflowItem> implements AfterV
     let showItemsUntilIndexExcluded: number
     let accWidth = 0
 
-    logger('Parent width is %d', parentWidth)
+    debugLogger('Parent width is %d', parentWidth)
 
     for (const [ index, el ] of this.itemsRendered.toArray().entries()) {
       accWidth += el.nativeElement.getBoundingClientRect().width
@@ -79,7 +79,7 @@ export class ListOverflowComponent<T extends ListOverflowItem> implements AfterV
       e.style.visibility = shouldBeVisible ? 'inherit' : 'hidden'
     }
 
-    logger('Accumulated children width is %d so exclude index is %d', accWidth, showItemsUntilIndexExcluded)
+    debugLogger('Accumulated children width is %d so exclude index is %d', accWidth, showItemsUntilIndexExcluded)
 
     this.showItemsUntilIndexExcluded = showItemsUntilIndexExcluded
     this.cdr.markForCheck()
diff --git a/client/src/app/shared/shared-main/users/user-notification.model.ts b/client/src/app/shared/shared-main/users/user-notification.model.ts
index a2367166e..bf8870a79 100644
--- a/client/src/app/shared/shared-main/users/user-notification.model.ts
+++ b/client/src/app/shared/shared-main/users/user-notification.model.ts
@@ -2,6 +2,7 @@ import { AuthUser } from '@app/core'
 import { Account } from '@app/shared/shared-main/account/account.model'
 import { Actor } from '@app/shared/shared-main/account/actor.model'
 import { VideoChannel } from '@app/shared/shared-main/video-channel/video-channel.model'
+import { logger } from '@root-helpers/logger'
 import {
   AbuseState,
   ActorInfo,
@@ -234,7 +235,7 @@ export class UserNotification implements UserNotificationServer {
       }
     } catch (err) {
       this.type = null
-      console.error(err)
+      logger.error(err)
     }
   }
 
diff --git a/client/src/app/shared/shared-search/find-in-bulk.service.ts b/client/src/app/shared/shared-search/find-in-bulk.service.ts
index 117685cc6..d2f8c3213 100644
--- a/client/src/app/shared/shared-search/find-in-bulk.service.ts
+++ b/client/src/app/shared/shared-search/find-in-bulk.service.ts
@@ -9,7 +9,7 @@ import { VideoPlaylist } from '../shared-video-playlist'
 import { SearchService } from './search.service'
 import { AdvancedSearch } from './advanced-search.model'
 
-const logger = debug('peertube:search:FindInBulkService')
+const debugLogger = debug('peertube:search:FindInBulkService')
 
 type BulkObservables <P extends number | string, R> = {
   notifier: Subject<P>
@@ -36,7 +36,7 @@ export class FindInBulkService {
   }
 
   getVideo (uuid: string): Observable<Video> {
-    logger('Schedule video fetch for uuid %s.', uuid)
+    debugLogger('Schedule video fetch for uuid %s.', uuid)
 
     return this.getData({
       observableObject: this.getVideoInBulk,
@@ -46,7 +46,7 @@ export class FindInBulkService {
   }
 
   getChannel (handle: string): Observable<VideoChannel> {
-    logger('Schedule channel fetch for handle %s.', handle)
+    debugLogger('Schedule channel fetch for handle %s.', handle)
 
     return this.getData({
       observableObject: this.getChannelInBulk,
@@ -56,7 +56,7 @@ export class FindInBulkService {
   }
 
   getPlaylist (uuid: string): Observable<VideoPlaylist> {
-    logger('Schedule playlist fetch for uuid %s.', uuid)
+    debugLogger('Schedule playlist fetch for uuid %s.', uuid)
 
     return this.getData({
       observableObject: this.getPlaylistInBulk,
@@ -94,7 +94,7 @@ export class FindInBulkService {
   }
 
   private getVideosInBulk (uuids: string[]) {
-    logger('Fetching videos %s.', uuids.join(', '))
+    debugLogger('Fetching videos %s.', uuids.join(', '))
 
     return this.searchService.searchVideos({
       uuids,
@@ -104,7 +104,7 @@ export class FindInBulkService {
   }
 
   private getChannelsInBulk (handles: string[]) {
-    logger('Fetching channels %s.', handles.join(', '))
+    debugLogger('Fetching channels %s.', handles.join(', '))
 
     return this.searchService.searchVideoChannels({
       handles,
@@ -114,7 +114,7 @@ export class FindInBulkService {
   }
 
   private getPlaylistsInBulk (uuids: string[]) {
-    logger('Fetching playlists %s.', uuids.join(', '))
+    debugLogger('Fetching playlists %s.', uuids.join(', '))
 
     return this.searchService.searchVideoPlaylists({
       uuids,
diff --git a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts
index 369692715..7bcfdd8aa 100644
--- a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts
+++ b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core'
 import { Notifier } from '@app/core'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { logger } from '@root-helpers/logger'
 import { USER_HANDLE_VALIDATOR } from '../form-validators/user-validators'
 
 @Component({
@@ -59,7 +60,7 @@ export class RemoteSubscribeComponent extends FormReactive implements OnInit {
       })
       .then(window.open)
       .catch(err => {
-        console.error(err)
+        logger.error(err)
 
         this.notifier.error($localize`Cannot fetch information of this remote account`)
       })
diff --git a/client/src/app/shared/shared-user-subscription/user-subscription.service.ts b/client/src/app/shared/shared-user-subscription/user-subscription.service.ts
index 33a2d04fd..9cf6b4d16 100644
--- a/client/src/app/shared/shared-user-subscription/user-subscription.service.ts
+++ b/client/src/app/shared/shared-user-subscription/user-subscription.service.ts
@@ -9,7 +9,7 @@ import { Video, VideoChannel, VideoChannelService, VideoService } from '@app/sha
 import { ActorFollow, ResultList, VideoChannel as VideoChannelServer, VideoSortField } from '@shared/models'
 import { environment } from '../../../environments/environment'
 
-const logger = debug('peertube:subscriptions:UserSubscriptionService')
+const debugLogger = debug('peertube:subscriptions:UserSubscriptionService')
 
 type SubscriptionExistResult = { [ uri: string ]: boolean }
 type SubscriptionExistResultObservable = { [ uri: string ]: Observable<boolean> }
@@ -176,17 +176,17 @@ export class UserSubscriptionService {
   }
 
   doesSubscriptionExist (nameWithHost: string) {
-    logger('Running subscription check for %d.', nameWithHost)
+    debugLogger('Running subscription check for %d.', nameWithHost)
 
     if (nameWithHost in this.myAccountSubscriptionCache) {
-      logger('Found cache for %d.', nameWithHost)
+      debugLogger('Found cache for %d.', nameWithHost)
 
       return of(this.myAccountSubscriptionCache[nameWithHost])
     }
 
     this.existsSubject.next(nameWithHost)
 
-    logger('Fetching from network for %d.', nameWithHost)
+    debugLogger('Fetching from network for %d.', nameWithHost)
     return this.existsObservable.pipe(
       filter(existsResult => existsResult[nameWithHost] !== undefined),
       map(existsResult => existsResult[nameWithHost]),
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.ts b/client/src/app/shared/shared-video-miniature/video-download.component.ts
index bbda39c2d..47482caaa 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.ts
@@ -4,6 +4,7 @@ import { tap } from 'rxjs/operators'
 import { Component, ElementRef, Inject, LOCALE_ID, ViewChild } from '@angular/core'
 import { AuthService, HooksService, Notifier } from '@app/core'
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
+import { logger } from '@root-helpers/logger'
 import { VideoCaption, VideoFile, VideoPrivacy } from '@shared/models'
 import { BytesPipe, NumberFormatterPipe, VideoDetails, VideoService } from '../shared-main'
 
@@ -142,7 +143,7 @@ export class VideoDownloadComponent {
                      .find(f => f.resolution.id === this.resolutionId)
 
     if (!file) {
-      console.error('Could not find file with resolution %d.', this.resolutionId)
+      logger.error(`Could not find file with resolution ${this.resolutionId}`)
       return undefined
     }
 
@@ -175,7 +176,7 @@ export class VideoDownloadComponent {
                         .find(c => c.language.id === this.subtitleLanguageId)
 
     if (!caption) {
-      console.error('Cannot find caption %s.', this.subtitleLanguageId)
+      logger.error(`Cannot find caption ${this.subtitleLanguageId}`)
       return undefined
     }
 
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.ts b/client/src/app/shared/shared-video-miniature/video-filters-header.component.ts
index 7b806248b..a5da9ebf3 100644
--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.ts
@@ -8,7 +8,7 @@ import { UserRight } from '@shared/models'
 import { PeertubeModalService } from '../shared-main'
 import { VideoFilters } from './video-filters.model'
 
-const logger = debug('peertube:videos:VideoFiltersHeaderComponent')
+const debugLogger = debug('peertube:videos:VideoFiltersHeaderComponent')
 
 @Component({
   selector: 'my-video-filters-header',
@@ -54,7 +54,7 @@ export class VideoFiltersHeaderComponent implements OnInit, OnDestroy {
     })
 
     this.form.valueChanges.subscribe(values => {
-      logger('Loading values from form: %O', values)
+      debugLogger('Loading values from form: %O', values)
 
       this.filters.load(values)
       this.filtersChanged.emit()
@@ -105,6 +105,6 @@ export class VideoFiltersHeaderComponent implements OnInit, OnDestroy {
     const defaultValues = this.filters.toFormObject()
     this.form.patchValue(defaultValues, { emitEvent })
 
-    logger('Patched form: %O', defaultValues)
+    debugLogger('Patched form: %O', defaultValues)
   }
 }
diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.ts b/client/src/app/shared/shared-video-miniature/videos-list.component.ts
index 38a80b973..508a189fd 100644
--- a/client/src/app/shared/shared-video-miniature/videos-list.component.ts
+++ b/client/src/app/shared/shared-video-miniature/videos-list.component.ts
@@ -14,13 +14,14 @@ import {
   UserService
 } from '@app/core'
 import { GlobalIconName } from '@app/shared/shared-icons'
+import { logger } from '@root-helpers/logger'
 import { isLastMonth, isLastWeek, isThisMonth, isToday, isYesterday } from '@shared/core-utils'
 import { ResultList, UserRight, VideoSortField } from '@shared/models'
 import { Syndication, Video } from '../shared-main'
 import { VideoFilters, VideoFilterScope } from './video-filters.model'
 import { MiniatureDisplayOptions } from './video-miniature.component'
 
-const logger = debug('peertube:videos:VideosListComponent')
+const debugLogger = debug('peertube:videos:VideosListComponent')
 
 export type HeaderAction = {
   iconName: GlobalIconName
@@ -245,7 +246,7 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
         error: err => {
           const message = $localize`Cannot load more videos. Try again later.`
 
-          console.error(message, { err })
+          logger.error(message, err)
           this.notifier.error(message)
         }
       })
@@ -323,7 +324,7 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   onFiltersChanged (customizedByUser: boolean) {
-    logger('Running on filters changed')
+    debugLogger('Running on filters changed')
 
     this.updateUrl(customizedByUser)
 
@@ -364,7 +365,7 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
         if (!items || items.length === 0) this.syndicationItems = undefined
         else this.syndicationItems = items
       })
-      .catch(err => console.error('Cannot get syndication items.', err))
+      .catch(err => logger.error('Cannot get syndication items.', err))
   }
 
   private updateUrl (customizedByUser: boolean) {
@@ -375,7 +376,7 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
       ? { ...baseQuery, c: customizedByUser }
       : baseQuery
 
-    logger('Will inject %O in URL query', queryParams)
+    debugLogger('Will inject %O in URL query', queryParams)
 
     const baseRoute = this.baseRouteBuilderFunction
       ? this.baseRouteBuilderFunction(this.filters)
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
index bac828fba..fa3c79bbb 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
@@ -1,6 +1,7 @@
 import { Observable, Subject } from 'rxjs'
 import { AfterContentInit, Component, ContentChildren, EventEmitter, Input, Output, QueryList, TemplateRef } from '@angular/core'
 import { ComponentPagination, Notifier, User } from '@app/core'
+import { logger } from '@root-helpers/logger'
 import { ResultList, VideoSortField } from '@shared/models'
 import { PeerTubeTemplateDirective, Video } from '../shared-main'
 import { MiniatureDisplayOptions } from './video-miniature.component'
@@ -128,7 +129,7 @@ export class VideosSelectionComponent implements AfterContentInit {
         error: err => {
           const message = $localize`Cannot load more videos. Try again later.`
 
-          console.error(message, { err })
+          logger.error(message, err)
           this.notifier.error(message)
         }
       })
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
index e4972ec10..e019fdd26 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
@@ -16,7 +16,7 @@ import {
 import { VIDEO_PLAYLIST_DISPLAY_NAME_VALIDATOR } from '../form-validators/video-playlist-validators'
 import { CachedPlaylist, VideoPlaylistService } from './video-playlist.service'
 
-const logger = debug('peertube:playlists:VideoAddToPlaylistComponent')
+const debugLogger = debug('peertube:playlists:VideoAddToPlaylistComponent')
 
 type PlaylistElement = {
   enabled: boolean
@@ -110,7 +110,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
   }
 
   reload () {
-    logger('Reloading component')
+    debugLogger('Reloading component')
 
     this.videoPlaylists = []
     this.videoPlaylistSearch = undefined
@@ -121,7 +121,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
   }
 
   load () {
-    logger('Loading component')
+    debugLogger('Loading component')
 
     this.listenToVideoPlaylistChange()
 
@@ -331,7 +331,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
   }
 
   private rebuildPlaylists (existResult: VideoExistInPlaylist[]) {
-    logger('Got existing results for %d.', this.video.id, existResult)
+    debugLogger('Got existing results for %d.', this.video.id, existResult)
 
     const oldPlaylists = this.videoPlaylists
 
@@ -359,7 +359,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
       this.videoPlaylists.push(playlistSummary)
     }
 
-    logger('Rebuilt playlist state for video %d.', this.video.id, this.videoPlaylists)
+    debugLogger('Rebuilt playlist state for video %d.', this.video.id, this.videoPlaylists)
 
     this.cd.markForCheck()
   }
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist.service.ts b/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
index db9f78a7a..81ae0f292 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
@@ -23,7 +23,7 @@ import { environment } from '../../../environments/environment'
 import { VideoPlaylistElement } from './video-playlist-element.model'
 import { VideoPlaylist } from './video-playlist.model'
 
-const logger = debug('peertube:playlists:VideoPlaylistService')
+const debugLogger = debug('peertube:playlists:VideoPlaylistService')
 
 export type CachedPlaylist = VideoPlaylist | { id: number, displayName: string }
 
@@ -287,15 +287,15 @@ export class VideoPlaylistService {
   }
 
   runPlaylistCheck (videoId: number) {
-    logger('Running playlist check.')
+    debugLogger('Running playlist check.')
 
     if (this.videoExistsCache[videoId]) {
-      logger('Found cache for %d.', videoId)
+      debugLogger('Found cache for %d.', videoId)
 
       return this.videoExistsInPlaylistCacheSubject.next({ [videoId]: this.videoExistsCache[videoId] })
     }
 
-    logger('Fetching from network for %d.', videoId)
+    debugLogger('Fetching from network for %d.', videoId)
     return this.videoExistsInPlaylistNotifier.next(videoId)
   }