From 12b09b085ab1e3c84dff347dc142f4f0f31f25fe Mon Sep 17 00:00:00 2001
From: Kasper Seweryn <github@wvffle.net>
Date: Sat, 30 Apr 2022 20:40:57 +0200
Subject: [PATCH] Refactor ~/logging.ts to a useLogger composable

---
 front/src/components/audio/Search.vue         |  6 +++--
 front/src/components/auth/Settings.vue        | 18 ++++++++-------
 front/src/components/auth/SignupForm.vue      |  6 +++--
 front/src/components/favorites/List.vue       |  9 +++++---
 front/src/components/library/Albums.vue       |  7 +++---
 front/src/components/library/ArtistBase.vue   |  6 +++--
 front/src/components/library/Artists.vue      |  7 +++---
 front/src/components/library/Home.vue         |  8 ++++---
 front/src/components/library/Podcasts.vue     |  7 +++---
 front/src/components/library/Radios.vue       |  7 +++---
 front/src/components/library/TrackBase.vue    |  6 +++--
 .../src/components/moderation/FilterModal.vue |  8 ++++---
 front/src/components/playlists/Form.vue       |  6 +++--
 .../components/playlists/PlaylistModal.vue    |  6 +++--
 front/src/composables/useLogger.ts            | 12 ++++++++--
 front/src/embed/EmbedFrame.vue                |  4 ++--
 front/src/init/axios.ts                       | 23 +++++++++++--------
 front/src/init/filters.ts                     |  4 +++-
 front/src/logging.ts                          |  8 -------
 front/src/radios.js                           | 10 ++++----
 front/src/store/auth.js                       | 14 ++++++-----
 front/src/store/channels.js                   | 12 ++++++----
 front/src/store/favorites.js                  | 14 ++++++-----
 front/src/store/instance.js                   | 10 ++++----
 front/src/store/libraries.js                  | 12 ++++++----
 front/src/store/moderation.js                 |  6 +++--
 front/src/store/player.js                     |  6 +++--
 front/src/store/queue.js                      | 10 ++++----
 front/src/store/radios.js                     | 13 ++++++-----
 .../src/views/admin/library/LibraryDetail.vue |  8 ++++---
 .../views/admin/moderation/AccountsDetail.vue |  8 ++++---
 31 files changed, 167 insertions(+), 114 deletions(-)
 delete mode 100644 front/src/logging.ts

diff --git a/front/src/components/audio/Search.vue b/front/src/components/audio/Search.vue
index 289212c5a..0e6eee80c 100644
--- a/front/src/components/audio/Search.vue
+++ b/front/src/components/audio/Search.vue
@@ -71,9 +71,11 @@
 <script>
 import { debounce } from 'lodash-es'
 import axios from 'axios'
-import logger from '~/logging'
 import AlbumCard from '~/components/audio/album/Card.vue'
 import ArtistCard from '~/components/audio/artist/Card.vue'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 export default {
   components: {
@@ -118,7 +120,7 @@ export default {
       }
       const self = this
       self.isLoading = true
-      logger.default.debug('Searching track matching "' + this.query + '"')
+      logger.debug('Searching track matching "' + this.query + '"')
       const params = {
         query: this.query
       }
diff --git a/front/src/components/auth/Settings.vue b/front/src/components/auth/Settings.vue
index 84a83c95a..3daeb9001 100644
--- a/front/src/components/auth/Settings.vue
+++ b/front/src/components/auth/Settings.vue
@@ -698,11 +698,13 @@
 <script>
 import $ from 'jquery'
 import axios from 'axios'
-import logger from '~/logging'
 import PasswordInput from '~/components/forms/PasswordInput.vue'
 import SubsonicTokenForm from '~/components/auth/SubsonicTokenForm.vue'
 import TranslationsMixin from '~/components/mixins/Translations.vue'
 import AttachmentInput from '~/components/common/AttachmentInput.vue'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 export default {
   components: {
@@ -796,14 +798,14 @@ export default {
       const url = `users/${this.$store.state.auth.username}/`
       return axios.patch(url, payload).then(
         response => {
-          logger.default.info('Updated settings successfully')
+          logger.info('Updated settings successfully')
           self.settings.success = true
           return axios.get('users/me/').then(response => {
             self.$store.dispatch('auth/updateProfile', response.data)
           })
         },
         error => {
-          logger.default.error('Error while updating settings')
+          logger.error('Error while updating settings')
           self.isLoading = false
           self.settings.errors = error.backendErrors
         }
@@ -818,7 +820,7 @@ export default {
           self.apps = response.data
         },
         error => {
-          logger.default.error('Error while fetching Apps')
+          logger.error('Error while fetching Apps')
           self.isLoading = false
           self.settings.errors = error.backendErrors
         }
@@ -833,7 +835,7 @@ export default {
           self.ownedApps = response.data.results
         },
         error => {
-          logger.default.error('Error while fetching owned Apps')
+          logger.error('Error while fetching owned Apps')
           self.isLoading = false
           self.settings.errors = error.backendErrors
         }
@@ -849,7 +851,7 @@ export default {
           })
         },
         error => {
-          logger.default.error('Error while revoking App')
+          logger.error('Error while revoking App')
           self.isLoading = false
           self.settings.errors = error.backendErrors
         }
@@ -865,7 +867,7 @@ export default {
           })
         },
         error => {
-          logger.default.error('Error while deleting App')
+          logger.error('Error while deleting App')
           self.isLoading = false
           self.settings.errors = error.backendErrors
         }
@@ -901,7 +903,7 @@ export default {
       const url = 'auth/registration/change-password/'
       return axios.post(url, credentials).then(
         response => {
-          logger.default.info('Password successfully changed')
+          logger.info('Password successfully changed')
           self.$router.push({
             name: 'profile.overview',
             params: {
diff --git a/front/src/components/auth/SignupForm.vue b/front/src/components/auth/SignupForm.vue
index 4e9f90376..b271bd9c2 100644
--- a/front/src/components/auth/SignupForm.vue
+++ b/front/src/components/auth/SignupForm.vue
@@ -154,10 +154,12 @@
 
 <script>
 import axios from 'axios'
-import logger from '~/logging'
 
 import LoginForm from '~/components/auth/LoginForm.vue'
 import PasswordInput from '~/components/forms/PasswordInput.vue'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 export default {
   components: {
@@ -232,7 +234,7 @@ export default {
       }
       return axios.post('auth/registration/', payload).then(
         response => {
-          logger.default.info('Successfully created account')
+          logger.info('Successfully created account')
           self.submitted = true
           self.isLoading = false
         },
diff --git a/front/src/components/favorites/List.vue b/front/src/components/favorites/List.vue
index 0bc0e1ed8..47afd9008 100644
--- a/front/src/components/favorites/List.vue
+++ b/front/src/components/favorites/List.vue
@@ -135,7 +135,6 @@
 <script>
 import axios from 'axios'
 import $ from 'jquery'
-import logger from '~/logging'
 import RadioButton from '~/components/radios/Button.vue'
 import Pagination from '~/components/Pagination.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
@@ -143,6 +142,10 @@ import PaginationMixin from '~/components/mixins/Pagination.vue'
 import TranslationsMixin from '~/components/mixins/Translations.vue'
 import { checkRedirectToLogin } from '~/utils'
 import TrackTable from '~/components/audio/track/Table.vue'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
+
 const FAVORITES_URL = 'tracks/'
 
 export default {
@@ -218,7 +221,7 @@ export default {
         page_size: this.paginateBy,
         ordering: this.getOrderingAsString()
       }
-      logger.default.time('Loading user favorites')
+      logger.time('Loading user favorites')
       axios.get(url, { params: params }).then(response => {
         self.results = response.data
         self.nextLink = response.data.next
@@ -226,7 +229,7 @@ export default {
         self.results.results.forEach(track => {
           self.$store.commit('favorites/track', { id: track.id, value: true })
         })
-        logger.default.timeEnd('Loading user favorites')
+        logger.timeEnd('Loading user favorites')
         self.isLoading = false
       })
     },
diff --git a/front/src/components/library/Albums.vue b/front/src/components/library/Albums.vue
index a6f56af59..0985ca0ea 100644
--- a/front/src/components/library/Albums.vue
+++ b/front/src/components/library/Albums.vue
@@ -151,14 +151,15 @@ import qs from 'qs'
 import axios from 'axios'
 import $ from 'jquery'
 
-import logger from '~/logging'
-
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import PaginationMixin from '~/components/mixins/Pagination.vue'
 import TranslationsMixin from '~/components/mixins/Translations.vue'
 import AlbumCard from '~/components/audio/album/Card.vue'
 import Pagination from '~/components/Pagination.vue'
 import TagsSelector from '~/components/library/TagsSelector.vue'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 const FETCH_URL = 'albums/'
 
@@ -239,7 +240,7 @@ export default {
         include_channels: 'true',
         content_category: 'music'
       }
-      logger.default.debug('Fetching albums')
+      logger.debug('Fetching albums')
       axios.get(
         url,
         {
diff --git a/front/src/components/library/ArtistBase.vue b/front/src/components/library/ArtistBase.vue
index cc51aad3a..634b275e1 100644
--- a/front/src/components/library/ArtistBase.vue
+++ b/front/src/components/library/ArtistBase.vue
@@ -215,7 +215,6 @@
 
 <script>
 import axios from 'axios'
-import logger from '~/logging'
 import PlayButton from '~/components/audio/PlayButton.vue'
 import EmbedWizard from '~/components/audio/EmbedWizard.vue'
 import Modal from '~/components/semantic/Modal.vue'
@@ -224,6 +223,9 @@ import TagsList from '~/components/tags/List.vue'
 import ReportMixin from '~/components/mixins/Report.vue'
 
 import { getDomain } from '~/utils'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 export default {
   components: {
@@ -333,7 +335,7 @@ export default {
     async fetchData () {
       const self = this
       this.isLoading = true
-      logger.default.debug('Fetching artist "' + this.id + '"')
+      logger.debug('Fetching artist "' + this.id + '"')
 
       const artistPromise = axios.get('artists/' + this.id + '/', { params: { refresh: 'true' } }).then(response => {
         if (response.data.channel) {
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index f5f4396f6..ae346bf23 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -167,14 +167,15 @@ import qs from 'qs'
 import axios from 'axios'
 import $ from 'jquery'
 
-import logger from '~/logging'
-
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import PaginationMixin from '~/components/mixins/Pagination.vue'
 import TranslationsMixin from '~/components/mixins/Translations.vue'
 import ArtistCard from '~/components/audio/artist/Card.vue'
 import Pagination from '~/components/Pagination.vue'
 import TagsSelector from '~/components/library/TagsSelector.vue'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 const FETCH_URL = 'artists/'
 
@@ -262,7 +263,7 @@ export default {
         include_channels: 'true',
         content_category: 'music'
       }
-      logger.default.debug('Fetching artists')
+      logger.debug('Fetching artists')
       axios.get(
         url,
         {
diff --git a/front/src/components/library/Home.vue b/front/src/components/library/Home.vue
index e020fee8c..e3b18ff49 100644
--- a/front/src/components/library/Home.vue
+++ b/front/src/components/library/Home.vue
@@ -72,11 +72,13 @@
 
 <script>
 import axios from 'axios'
-import logger from '~/logging'
 import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
 import TrackWidget from '~/components/audio/track/Widget.vue'
 import AlbumWidget from '~/components/audio/album/Widget.vue'
 import PlaylistWidget from '~/components/playlists/Widget.vue'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 const ARTISTS_URL = 'artists/'
 
@@ -116,10 +118,10 @@ export default {
         playable: true
       }
       const url = ARTISTS_URL
-      logger.default.time('Loading latest artists')
+      logger.time('Loading latest artists')
       axios.get(url, { params: params }).then(response => {
         self.artists = response.data.results
-        logger.default.timeEnd('Loading latest artists')
+        logger.timeEnd('Loading latest artists')
         self.isLoadingArtists = false
       })
     }
diff --git a/front/src/components/library/Podcasts.vue b/front/src/components/library/Podcasts.vue
index 4a2fd72d6..c78262d1c 100644
--- a/front/src/components/library/Podcasts.vue
+++ b/front/src/components/library/Podcasts.vue
@@ -199,8 +199,6 @@ import qs from 'qs'
 import axios from 'axios'
 import $ from 'jquery'
 
-import logger from '~/logging'
-
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import PaginationMixin from '~/components/mixins/Pagination.vue'
 import TranslationsMixin from '~/components/mixins/Translations.vue'
@@ -209,6 +207,9 @@ import Pagination from '~/components/Pagination.vue'
 import TagsSelector from '~/components/library/TagsSelector.vue'
 import Modal from '~/components/semantic/Modal.vue'
 import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 const FETCH_URL = 'artists/'
 
@@ -298,7 +299,7 @@ export default {
         include_channels: 'true',
         content_category: 'podcast'
       }
-      logger.default.debug('Fetching artists')
+      logger.debug('Fetching artists')
       axios.get(
         url,
         {
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index a71a9ed0f..94fecf7ad 100644
--- a/front/src/components/library/Radios.vue
+++ b/front/src/components/library/Radios.vue
@@ -178,13 +178,14 @@
 import axios from 'axios'
 import $ from 'jquery'
 
-import logger from '~/logging'
-
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import PaginationMixin from '~/components/mixins/Pagination.vue'
 import TranslationsMixin from '~/components/mixins/Translations.vue'
 import RadioCard from '~/components/radios/Card.vue'
 import Pagination from '~/components/Pagination.vue'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 const FETCH_URL = 'radios/radios/'
 
@@ -260,7 +261,7 @@ export default {
         name__icontains: this.query,
         ordering: this.getOrderingAsString()
       }
-      logger.default.debug('Fetching radios')
+      logger.debug('Fetching radios')
       axios.get(url, { params: params }).then(response => {
         self.result = response.data
         self.isLoading = false
diff --git a/front/src/components/library/TrackBase.vue b/front/src/components/library/TrackBase.vue
index 76a802b9d..0eca827ee 100644
--- a/front/src/components/library/TrackBase.vue
+++ b/front/src/components/library/TrackBase.vue
@@ -222,7 +222,6 @@
 import time from '~/utils/time'
 import axios from 'axios'
 import { getDomain } from '~/utils'
-import logger from '~/logging'
 import PlayButton from '~/components/audio/PlayButton.vue'
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
@@ -231,6 +230,9 @@ import EmbedWizard from '~/components/audio/EmbedWizard.vue'
 import ReportMixin from '~/components/mixins/Report.vue'
 import { momentFormat } from '~/init/filters'
 import updateQueryString from '~/composables/updateQueryString'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 const FETCH_URL = 'tracks/'
 
@@ -384,7 +386,7 @@ export default {
       const self = this
       this.isLoading = true
       const url = FETCH_URL + this.id + '/'
-      logger.default.debug('Fetching track "' + this.id + '"')
+      logger.debug('Fetching track "' + this.id + '"')
       axios.get(url, { params: { refresh: 'true' } }).then(response => {
         self.track = response.data
         axios.get(`artists/${response.data.artist.id}/`).then(response => {
diff --git a/front/src/components/moderation/FilterModal.vue b/front/src/components/moderation/FilterModal.vue
index 75b617786..430aa6a96 100644
--- a/front/src/components/moderation/FilterModal.vue
+++ b/front/src/components/moderation/FilterModal.vue
@@ -92,8 +92,10 @@
 import axios from 'axios'
 import { mapState } from 'vuex'
 
-import logger from '~/logging'
 import Modal from '~/components/semantic/Modal.vue'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 export default {
   components: {
@@ -127,7 +129,7 @@ export default {
         }
       }
       return axios.post('moderation/content-filters/', payload).then(response => {
-        logger.default.info('Successfully added track to playlist')
+        logger.info('Successfully added track to playlist')
         self.update(false)
         self.$store.commit('moderation/lastUpdate', new Date())
         self.isLoading = false
@@ -138,7 +140,7 @@ export default {
           date: new Date()
         })
       }, error => {
-        logger.default.error(`Error while hiding ${self.type} ${self.target.id}`)
+        logger.error(`Error while hiding ${self.type} ${self.target.id}`)
         self.errors = error.backendErrors
         self.isLoading = false
       })
diff --git a/front/src/components/playlists/Form.vue b/front/src/components/playlists/Form.vue
index 8790df832..d11e31f9c 100644
--- a/front/src/components/playlists/Form.vue
+++ b/front/src/components/playlists/Form.vue
@@ -102,7 +102,9 @@ import $ from 'jquery'
 import axios from 'axios'
 import TranslationsMixin from '~/components/mixins/Translations.vue'
 
-import logger from '~/logging'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 export default {
   mixins: [TranslationsMixin],
@@ -180,7 +182,7 @@ export default {
         self.$emit('updated', response.data)
         self.$store.dispatch('playlists/fetchOwn')
       }, error => {
-        logger.default.error('Error while creating playlist')
+        logger.error('Error while creating playlist')
         self.isLoading = false
         self.errors = error.backendErrors
       })
diff --git a/front/src/components/playlists/PlaylistModal.vue b/front/src/components/playlists/PlaylistModal.vue
index 2b397b310..bdf3336c8 100644
--- a/front/src/components/playlists/PlaylistModal.vue
+++ b/front/src/components/playlists/PlaylistModal.vue
@@ -197,10 +197,12 @@ import { filter, sortBy, flow } from 'lodash-es'
 import axios from 'axios'
 import { mapState } from 'vuex'
 
-import logger from '~/logging'
 import Modal from '~/components/semantic/Modal.vue'
 import PlaylistForm from '~/components/playlists/Form.vue'
 import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 export default {
   components: {
@@ -267,7 +269,7 @@ export default {
       self.lastSelectedPlaylist = playlistId
 
       return axios.post(`playlists/${playlistId}/add`, payload).then(response => {
-        logger.default.info('Successfully added track to playlist')
+        logger.info('Successfully added track to playlist')
         self.update(false)
         self.$store.dispatch('playlists/fetchOwn')
       }, error => {
diff --git a/front/src/composables/useLogger.ts b/front/src/composables/useLogger.ts
index d87ab008f..94d005bfc 100644
--- a/front/src/composables/useLogger.ts
+++ b/front/src/composables/useLogger.ts
@@ -1,2 +1,10 @@
-import jsLogger from 'js-logger'
-export default (logger = 'default') => jsLogger.get(logger)
+import Logger from 'js-logger'
+Logger.useDefaults({
+  defaultLevel: import.meta.env.DEV
+    ? Logger.DEBUG
+    : Logger.WARN
+})
+
+export default (logger?: string) => logger
+  ? Logger.get(logger)
+  : Logger
diff --git a/front/src/embed/EmbedFrame.vue b/front/src/embed/EmbedFrame.vue
index 08f050aae..38042dc95 100644
--- a/front/src/embed/EmbedFrame.vue
+++ b/front/src/embed/EmbedFrame.vue
@@ -246,8 +246,8 @@
 
 <script>
 import axios from 'axios'
-import Logo from '@/components/Logo.vue'
-import updateQueryString from './composables/updateQueryString'
+import Logo from '~/components/Logo.vue'
+import updateQueryString from '~/composables/updateQueryString'
 import time from '~/utils/time'
 
 function getURLParams () {
diff --git a/front/src/init/axios.ts b/front/src/init/axios.ts
index c2542fc3f..ac6b8cb83 100644
--- a/front/src/init/axios.ts
+++ b/front/src/init/axios.ts
@@ -3,11 +3,14 @@ import { InitModule } from '~/types'
 import createAuthRefreshInterceptor from 'axios-auth-refresh'
 import axios, { AxiosError } from 'axios'
 import moment from 'moment'
-import logger from '~/logging'
 import { parseAPIErrors } from '~/utils'
-import Vue from 'vue'
+import useLogger from '~/composables/useLogger'
+import { gettext } from '~/init/locale'
 
-export const install: InitModule = ({ app, store, router }) => {
+const { $pgettext, $gettext } = gettext
+const logger = useLogger()
+
+export const install: InitModule = ({ store, router }) => {
   axios.defaults.xsrfCookieName = 'csrftoken'
   axios.defaults.xsrfHeaderName = 'X-CSRFToken'
   axios.interceptors.request.use(function (config) {
@@ -29,7 +32,7 @@ export const install: InitModule = ({ app, store, router }) => {
     error.backendErrors = []
     if (store.state.auth.authenticated && !store.state.auth.oauth.accessToken && error.response.status === 401) {
       store.commit('auth/authenticated', false)
-      logger.default.warn('Received 401 response from API, redirecting to login form', router.currentRoute.value.fullPath)
+      logger.warn('Received 401 response from API, redirecting to login form', router.currentRoute.value.fullPath)
       await router.push({ name: 'login', query: { next: router.currentRoute.value.fullPath } })
     }
 
@@ -56,10 +59,10 @@ export const install: InitModule = ({ app, store, router }) => {
       if (rateLimitStatus.availableSeconds) {
         rateLimitStatus.availableSeconds = parseInt(rateLimitStatus.availableSeconds)
         const tryAgain = moment().add(rateLimitStatus.availableSeconds, 's').toNow(true)
-        message = Vue.prototype.$pgettext('*/Error/Paragraph', 'You sent too many requests and have been rate limited, please try again in %{ delay }')
-        message = Vue.prototype.$gettextInterpolate(message, { delay: tryAgain })
+        message = $pgettext('*/Error/Paragraph', 'You sent too many requests and have been rate limited, please try again in %{ delay }')
+        message = $gettext(message, { delay: tryAgain })
       } else {
-        message = Vue.prototype.$pgettext('*/Error/Paragraph', 'You sent too many requests and have been rate limited, please try again later')
+        message = $pgettext('*/Error/Paragraph', 'You sent too many requests and have been rate limited, please try again later')
       }
       error.backendErrors.push(message)
       store.commit('ui/addMessage', {
@@ -67,9 +70,9 @@ export const install: InitModule = ({ app, store, router }) => {
         date: new Date(),
         class: 'error'
       })
-      logger.default.error('This client is rate-limited!', rateLimitStatus)
+      logger.error('This client is rate-limited!', rateLimitStatus)
     } else if (error.response.status === 500) {
-      error.backendErrors.push('A server error occured')
+      error.backendErrors.push('A server error occurred')
     } else if (error.response.data) {
       if (error.response.data.detail) {
         error.backendErrors.push(error.response.data.detail)
@@ -81,7 +84,7 @@ export const install: InitModule = ({ app, store, router }) => {
     }
 
     if (error.backendErrors.length === 0) {
-      error.backendErrors.push('An unknown error occured, ensure your are connected to the internet and your funkwhale instance is up and running')
+      error.backendErrors.push('An unknown error occurred, ensure your are connected to the internet and your funkwhale instance is up and running')
     }
 
     // Do something with response error
diff --git a/front/src/init/filters.ts b/front/src/init/filters.ts
index 3412fe8ba..e9382f094 100644
--- a/front/src/init/filters.ts
+++ b/front/src/init/filters.ts
@@ -115,7 +115,7 @@ export function humanSize (bytes: number) {
   return bytes.toFixed(1) + ' ' + units[u]
 }
 
-// Removes duplicates from a list
+// Remove duplicates from a list
 export function unique (list: Record<string, unknown>[], property: string) {
   property = property || 'id'
   const unique: Record<string, unknown>[] = []
@@ -123,6 +123,8 @@ export function unique (list: Record<string, unknown>[], property: string) {
   return unique
 }
 
+// TODO (wvffle): Migrate to Vue 3
+//                Replace filters with computed values
 export const install: InitModule = () => {
   Vue.filter('humanSize', humanSize)
   Vue.filter('unique', unique)
diff --git a/front/src/logging.ts b/front/src/logging.ts
deleted file mode 100644
index ebb98c005..000000000
--- a/front/src/logging.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import jsLogger from 'js-logger'
-
-jsLogger.useDefaults()
-
-export default {
-  get: jsLogger.get,
-  default: jsLogger.get('default')
-}
diff --git a/front/src/radios.js b/front/src/radios.js
index e9db8a9b1..67a77bd1a 100644
--- a/front/src/radios.js
+++ b/front/src/radios.js
@@ -1,5 +1,7 @@
 import axios from 'axios'
-import logger from '~/logging'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 // import axios from 'axios'
 
@@ -13,7 +15,7 @@ const RADIOS = {
       axios.get('history/listenings', { params }).then((response) => {
         const latest = response.data.results[0]
         if (!latest) {
-          logger.default.error('No more tracks')
+          logger.error('No more tracks')
           dispatch('stop')
         }
         this.offset += 1
@@ -24,7 +26,7 @@ const RADIOS = {
           })
         }
       }, (error) => {
-        logger.default.error('Error while fetching listenings', error)
+        logger.error('Error while fetching listenings', error)
         dispatch('stop')
       })
     },
@@ -40,7 +42,7 @@ const RADIOS = {
             this.offset += 1
           }
         }, (error) => {
-          logger.default.error('Cannot retrieve track info', error)
+          logger.error('Cannot retrieve track info', error)
         })
       }
     }
diff --git a/front/src/store/auth.js b/front/src/store/auth.js
index e115932e9..12baa8fb2 100644
--- a/front/src/store/auth.js
+++ b/front/src/store/auth.js
@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import axios from 'axios'
-import logger from '~/logging'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 function getDefaultScopedTokens () {
   return {
@@ -130,7 +132,7 @@ export default {
         form.set(k, credentials[k])
       })
       return axios.post('users/login', form).then(response => {
-        logger.default.info('Successfully logged in as', credentials.username)
+        logger.info('Successfully logged in as', credentials.username)
         dispatch('fetchProfile').then(() => {
           // Redirect to a specified route
           import('~/router').then((router) => {
@@ -138,7 +140,7 @@ export default {
           })
         })
       }, response => {
-        logger.default.error('Error while logging in', response.data)
+        logger.error('Error while logging in', response.data)
         onError(response)
       })
     },
@@ -159,12 +161,12 @@ export default {
       modules.forEach(m => {
         commit(`${m}/reset`, null, { root: true })
       })
-      logger.default.info('Log out, goodbye!')
+      logger.info('Log out, goodbye!')
     },
     fetchProfile ({ commit, dispatch, state }) {
       return new Promise((resolve, reject) => {
         axios.get('users/me/').then((response) => {
-          logger.default.info('Successfully fetched user profile')
+          logger.info('Successfully fetched user profile')
           dispatch('updateProfile', response.data)
           dispatch('ui/fetchUnreadNotifications', null, { root: true })
           if (response.data.permissions.library) {
@@ -181,7 +183,7 @@ export default {
           dispatch('playlists/fetchOwn', null, { root: true })
           resolve(response.data)
         }, (response) => {
-          logger.default.info('Error while fetching user profile')
+          logger.info('Error while fetching user profile')
           reject(new Error('Error while fetching user profile'))
         })
       })
diff --git a/front/src/store/channels.js b/front/src/store/channels.js
index 577b060f1..b2f4669ef 100644
--- a/front/src/store/channels.js
+++ b/front/src/store/channels.js
@@ -1,5 +1,7 @@
 import axios from 'axios'
-import logger from '~/logging'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 export default {
   namespaced: true,
@@ -57,16 +59,16 @@ export default {
       commit('subscriptions', { uuid, value })
       if (value) {
         return axios.post(`channels/${uuid}/subscribe/`).then((response) => {
-          logger.default.info('Successfully subscribed to channel')
+          logger.info('Successfully subscribed to channel')
         }, (response) => {
-          logger.default.info('Error while subscribing to channel')
+          logger.info('Error while subscribing to channel')
           commit('subscriptions', { uuid, value: !value })
         })
       } else {
         return axios.post(`channels/${uuid}/unsubscribe/`).then((response) => {
-          logger.default.info('Successfully unsubscribed from channel')
+          logger.info('Successfully unsubscribed from channel')
         }, (response) => {
-          logger.default.info('Error while unsubscribing from channel')
+          logger.info('Error while unsubscribing from channel')
           commit('subscriptions', { uuid, value: !value })
         })
       }
diff --git a/front/src/store/favorites.js b/front/src/store/favorites.js
index 83242ac18..d1fd937a8 100644
--- a/front/src/store/favorites.js
+++ b/front/src/store/favorites.js
@@ -1,5 +1,7 @@
 import axios from 'axios'
-import logger from '~/logging'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 export default {
   namespaced: true,
@@ -36,16 +38,16 @@ export default {
       commit('track', { id, value })
       if (value) {
         return axios.post('favorites/tracks/', { track: id }).then((response) => {
-          logger.default.info('Successfully added track to favorites')
+          logger.info('Successfully added track to favorites')
         }, (response) => {
-          logger.default.info('Error while adding track to favorites')
+          logger.info('Error while adding track to favorites')
           commit('track', { id, value: !value })
         })
       } else {
         return axios.post('favorites/tracks/remove/', { track: id }).then((response) => {
-          logger.default.info('Successfully removed track from favorites')
+          logger.info('Successfully removed track from favorites')
         }, (response) => {
-          logger.default.info('Error while removing track from favorites')
+          logger.info('Error while removing track from favorites')
           commit('track', { id, value: !value })
         })
       }
@@ -62,7 +64,7 @@ export default {
       }
       const promise = axios.get('favorites/tracks/all/', { params: params })
       return promise.then((response) => {
-        logger.default.info('Fetched a batch of ' + response.data.results.length + ' favorites')
+        logger.info('Fetched a batch of ' + response.data.results.length + ' favorites')
         response.data.results.forEach(result => {
           commit('track', { id: result.track, value: true })
         })
diff --git a/front/src/store/instance.js b/front/src/store/instance.js
index 0054d8c0e..60d3f9c91 100644
--- a/front/src/store/instance.js
+++ b/front/src/store/instance.js
@@ -1,6 +1,8 @@
 import axios from 'axios'
-import logger from '~/logging'
 import { merge } from 'lodash-es'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 function getDefaultUrl () {
   return (
@@ -142,7 +144,7 @@ export default {
     // Send a request to the login URL and save the returned JWT
     fetchSettings ({ commit }, payload) {
       return axios.get('instance/settings/').then(response => {
-        logger.default.info('Successfully fetched instance settings')
+        logger.info('Successfully fetched instance settings')
 
         const sections = response.data.reduce((map, entry) => {
           map[entry.section] ??= {}
@@ -153,14 +155,14 @@ export default {
         commit('settings', sections)
         payload?.callback?.()
       }, response => {
-        logger.default.error('Error while fetching settings', response.data)
+        logger.error('Error while fetching settings', response.data)
       })
     },
     fetchFrontSettings ({ commit }) {
       return axios.get('/settings.json').then(response => {
         commit('frontSettings', response.data)
       }, response => {
-        logger.default.error('Error when fetching front-end configuration (or no customization available)')
+        logger.error('Error when fetching front-end configuration (or no customization available)')
       })
     }
   }
diff --git a/front/src/store/libraries.js b/front/src/store/libraries.js
index 4953c7b84..3dca2657e 100644
--- a/front/src/store/libraries.js
+++ b/front/src/store/libraries.js
@@ -1,5 +1,7 @@
 import axios from 'axios'
-import logger from '~/logging'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 export default {
   namespaced: true,
@@ -41,19 +43,19 @@ export default {
     set ({ commit, state }, { uuid, value }) {
       if (value) {
         return axios.post('federation/follows/library/', { target: uuid }).then((response) => {
-          logger.default.info('Successfully subscribed to library')
+          logger.info('Successfully subscribed to library')
           commit('follows', { library: uuid, follow: response.data })
         }, (response) => {
-          logger.default.info('Error while subscribing to library')
+          logger.info('Error while subscribing to library')
           commit('follows', { library: uuid, follow: null })
         })
       } else {
         const follow = state.followsByLibrary[uuid]
         return axios.delete(`federation/follows/library/${follow.uuid}/`).then((response) => {
-          logger.default.info('Successfully unsubscribed from library')
+          logger.info('Successfully unsubscribed from library')
           commit('follows', { library: uuid, follow: null })
         }, (response) => {
-          logger.default.info('Error while unsubscribing from library')
+          logger.info('Error while unsubscribing from library')
           commit('follows', { library: uuid, follow: follow })
         })
       }
diff --git a/front/src/store/moderation.js b/front/src/store/moderation.js
index 2e9c4c3cb..d98d148f5 100644
--- a/front/src/store/moderation.js
+++ b/front/src/store/moderation.js
@@ -1,6 +1,8 @@
 import axios from 'axios'
-import logger from '~/logging'
 import { sortBy } from 'lodash-es'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 export default {
   namespaced: true,
@@ -98,7 +100,7 @@ export default {
         promise = axios.get('moderation/content-filters/', { params: params })
       }
       return promise.then((response) => {
-        logger.default.info('Fetched a batch of ' + response.data.results.length + ' filters')
+        logger.info('Fetched a batch of ' + response.data.results.length + ' filters')
         if (response.data.next) {
           dispatch('fetchContentFilters', response.data.next)
         }
diff --git a/front/src/store/player.js b/front/src/store/player.js
index 32db6c39b..c2644232f 100644
--- a/front/src/store/player.js
+++ b/front/src/store/player.js
@@ -1,6 +1,8 @@
 import axios from 'axios'
-import logger from '~/logging'
 import time from '~/utils/time'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 export default {
   namespaced: true,
@@ -135,7 +137,7 @@ export default {
         return
       }
       return axios.post('history/listenings/', { track: track.id }).then((response) => {}, (response) => {
-        logger.default.error('Could not record track in history')
+        logger.error('Could not record track in history')
       })
     },
     trackEnded ({ commit, dispatch, rootState }, track) {
diff --git a/front/src/store/queue.js b/front/src/store/queue.js
index 618dd2237..5e638c734 100644
--- a/front/src/store/queue.js
+++ b/front/src/store/queue.js
@@ -1,5 +1,7 @@
-import logger from '~/logging'
 import { shuffle } from 'lodash-es'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 export default {
   namespaced: true,
@@ -72,7 +74,7 @@ export default {
     },
 
     appendMany ({ state, commit, dispatch }, { tracks, index, callback }) {
-      logger.default.info('Appending many tracks to the queue', tracks.map(e => { return e.title }))
+      logger.info('Appending many tracks to the queue', tracks.map(e => { return e.title }))
       let shouldPlay = false
       if (state.tracks.length === 0) {
         index = 0
@@ -128,11 +130,11 @@ export default {
     },
     next ({ state, dispatch, commit, rootState }) {
       if (rootState.player.looping === 2 && state.currentIndex >= state.tracks.length - 1) {
-        logger.default.info('Going back to the beginning of the queue')
+        logger.info('Going back to the beginning of the queue')
         return dispatch('currentIndex', 0)
       } else {
         if (state.currentIndex < state.tracks.length - 1) {
-          logger.default.debug('Playing next track')
+          logger.debug('Playing next track')
           return dispatch('currentIndex', state.currentIndex + 1)
         } else {
           commit('ended', true)
diff --git a/front/src/store/radios.js b/front/src/store/radios.js
index 3530c4648..9ce03fa39 100644
--- a/front/src/store/radios.js
+++ b/front/src/store/radios.js
@@ -1,7 +1,8 @@
 import axios from 'axios'
-import logger from '~/logging'
-
 import { getClientOnlyRadio } from '~/radios'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 export default {
   namespaced: true,
@@ -62,12 +63,12 @@ export default {
         return
       }
       return axios.post('radios/sessions/', params).then((response) => {
-        logger.default.info('Successfully started radio ', type)
+        logger.info('Successfully started radio ', type)
         commit('current', { type, objectId, session: response.data.id, customRadioId })
         commit('running', true)
         dispatch('populateQueue', true)
       }, (response) => {
-        logger.default.error('Error while starting radio', type)
+        logger.error('Error while starting radio', type)
       })
     },
     stop ({ commit, state }) {
@@ -91,7 +92,7 @@ export default {
         return getClientOnlyRadio(state.current).populateQueue({ current: state.current, dispatch, state, rootState, playNow })
       }
       return axios.post('radios/tracks/', params).then((response) => {
-        logger.default.info('Adding track to queue from radio')
+        logger.info('Adding track to queue from radio')
         const append = dispatch('queue/append', { track: response.data.track }, { root: true })
         if (playNow) {
           append.then(() => {
@@ -99,7 +100,7 @@ export default {
           })
         }
       }, () => {
-        logger.default.error('Error while adding track to queue from radio')
+        logger.error('Error while adding track to queue from radio')
         commit('reset')
       })
     }
diff --git a/front/src/views/admin/library/LibraryDetail.vue b/front/src/views/admin/library/LibraryDetail.vue
index 4bc1da8f6..a69e1814d 100644
--- a/front/src/views/admin/library/LibraryDetail.vue
+++ b/front/src/views/admin/library/LibraryDetail.vue
@@ -358,8 +358,10 @@
 
 <script>
 import axios from 'axios'
-import logger from '~/logging'
 import TranslationsMixin from '~/components/mixins/Translations.vue'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 export default {
   mixins: [
@@ -424,12 +426,12 @@ export default {
       params[attr] = newValue
       axios.patch(`manage/library/libraries/${this.id}/`, params).then(
         response => {
-          logger.default.info(
+          logger.info(
             `${attr} was updated succcessfully to ${newValue}`
           )
         },
         error => {
-          logger.default.error(
+          logger.error(
             `Error while setting ${attr} to ${newValue}`,
             error
           )
diff --git a/front/src/views/admin/moderation/AccountsDetail.vue b/front/src/views/admin/moderation/AccountsDetail.vue
index bd1086dc9..577814e4e 100644
--- a/front/src/views/admin/moderation/AccountsDetail.vue
+++ b/front/src/views/admin/moderation/AccountsDetail.vue
@@ -567,11 +567,13 @@
 
 <script>
 import axios from 'axios'
-import logger from '~/logging'
 import $ from 'jquery'
 
 import InstancePolicyForm from '~/components/manage/moderation/InstancePolicyForm.vue'
 import InstancePolicyCard from '~/components/manage/moderation/InstancePolicyCard.vue'
+import useLogger from '~/composables/useLogger'
+
+const logger = useLogger()
 
 export default {
   components: {
@@ -690,13 +692,13 @@ export default {
       }
       axios.patch(`manage/users/users/${this.object.user.id}/`, params).then(
         response => {
-          logger.default.info(
+          logger.info(
             `${attr} was updated succcessfully to ${newValue}`
           )
           self.updating[attr] = false
         },
         error => {
-          logger.default.error(
+          logger.error(
             `Error while setting ${attr} to ${newValue}`,
             error
           )