Add error handler in all unhandled places

front/src/App.vue

@@ -1,22 +1,23 @@
 <script setup lang="ts">
 import type { Track } from '~/types'
 
-import AudioPlayer from '~/components/audio/Player.vue'
+import { useIntervalFn, useToggle, useWindowSize } from '@vueuse/core'
-import Queue from '~/components/Queue.vue'
+import { computed, nextTick, onMounted, ref, watchEffect } from 'vue'
-import PlaylistModal from '~/components/playlists/PlaylistModal.vue'
+import { useStore } from '~/store'
+
 import ChannelUploadModal from '~/components/channels/UploadModal.vue'
-import Sidebar from '~/components/Sidebar.vue'
+import PlaylistModal from '~/components/playlists/PlaylistModal.vue'
-import ServiceMessages from '~/components/ServiceMessages.vue'
-import SetInstanceModal from '~/components/SetInstanceModal.vue'
-import ShortcutsModal from '~/components/ShortcutsModal.vue'
 import FilterModal from '~/components/moderation/FilterModal.vue'
 import ReportModal from '~/components/moderation/ReportModal.vue'
-import { useIntervalFn, useToggle, useWindowSize } from '@vueuse/core'
+import SetInstanceModal from '~/components/SetInstanceModal.vue'
+import ServiceMessages from '~/components/ServiceMessages.vue'
+import ShortcutsModal from '~/components/ShortcutsModal.vue'
+import AudioPlayer from '~/components/audio/Player.vue'
+import Sidebar from '~/components/Sidebar.vue'
+import Queue from '~/components/Queue.vue'
 
-import { computed, nextTick, onMounted, ref, watchEffect } from 'vue'
 import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
 import useQueue from '~/composables/audio/useQueue'
-import { useStore } from '~/store'
 
 const store = useStore()
 

front/src/components/SetInstanceModal.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import SemanticModal from '~/components/semantic/Modal.vue'
-import axios from 'axios'
-import { uniq } from 'lodash-es'
-import { useVModel } from '@vueuse/core'
 import { ref, computed, watch, nextTick } from 'vue'
-import { useStore } from '~/store'
 import { useGettext } from 'vue3-gettext'
+import { useVModel } from '@vueuse/core'
+import { useStore } from '~/store'
+import { uniq } from 'lodash-es'
+
+import axios from 'axios'
+
+import SemanticModal from '~/components/semantic/Modal.vue'
 
 interface Props {
   show: boolean

front/src/components/audio/Search.vue

@@ -8,6 +8,8 @@ import { refDebounced } from '@vueuse/core'
 import axios from 'axios'
 import AlbumCard from '~/components/audio/album/Card.vue'
 import ArtistCard from '~/components/audio/artist/Card.vue'
+
+import useErrorHandler from '~/composables/useErrorHandler'
 import useLogger from '~/composables/useLogger'
 
 interface Props {
@@ -47,7 +49,7 @@ const search = async () => {
     results.artists = response.data.artists
     results.albums = response.data.albums
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false

front/src/components/audio/album/Widget.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import type { Album } from '~/types'
 
-import axios from 'axios'
 import { reactive, ref, watch } from 'vue'
 import { useStore } from '~/store'
 
+import axios from 'axios'
+
 import AlbumCard from '~/components/audio/album/Card.vue'
 
+import useErrorHandler from '~/composables/useErrorHandler'
+
 interface Props {
   filters: Record<string, string | boolean>
   showCount?: boolean
@@ -43,7 +46,7 @@ const fetchData = async (url = 'albums/') => {
     count.value = response.data.count
     albums.push(...response.data.results)
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false

front/src/components/audio/artist/Widget.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import type { Artist } from '~/types'
 
-import axios from 'axios'
 import { reactive, ref, watch } from 'vue'
 import { useStore } from '~/store'
 
+import axios from 'axios'
+
 import ArtistCard from '~/components/audio/artist/Card.vue'
 
+import useErrorHandler from '~/composables/useErrorHandler'
+
 interface Props {
   filters: Record<string, string | boolean>
   search?: boolean
@@ -43,7 +46,7 @@ const fetchData = async (url = 'artists/') => {
     count.value = response.data.count
     artists.push(...response.data.results)
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false

front/src/components/audio/podcast/Row.vue

@@ -2,10 +2,14 @@
 import type { Track, Artist, Album, Playlist, Library, Channel, Actor, /* Track, */ Cover } from '~/types'
 import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
 
-import axios from 'axios'
-import PlayButton from '~/components/audio/PlayButton.vue'
-import usePlayOptions from '~/composables/audio/usePlayOptions'
 import { ref } from 'vue'
+
+import axios from 'axios'
+
+import PlayButton from '~/components/audio/PlayButton.vue'
+
+import usePlayOptions from '~/composables/audio/usePlayOptions'
+import useErrorHandler from '~/composables/useErrorHandler'
 import useQueue from '~/composables/audio/useQueue'
 
 interface Props extends PlayOptionsProps {
@@ -43,7 +47,7 @@ const fetchData = async () => {
     const response = await axios.get(`tracks/${props.track.id}/`)
     description.value = response.data.description.text
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 }
 

front/src/components/audio/track/Table.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
 import type { Track } from '~/types'
 
-import { ref, computed } from 'vue'
+import { useElementByPoint, useMouse } from '@vueuse/core'
 import { useGettext } from 'vue3-gettext'
 import { clone, uniqBy } from 'lodash-es'
-import { useElementByPoint, useMouse } from '@vueuse/core'
+import { ref, computed } from 'vue'
+
 import axios from 'axios'
-import TrackRow from '~/components/audio/track/Row.vue'
+
 import TrackMobileRow from '~/components/audio/track/MobileRow.vue'
 import Pagination from '~/components/vui/Pagination.vue'
+import TrackRow from '~/components/audio/track/Row.vue'
+
+import useErrorHandler from '~/composables/useErrorHandler'
 
 interface Props {
   tracks?: Track[]
@@ -114,7 +118,7 @@ const fetchData = async () => {
     totalTracks.value = response.data.count
     emit('fetched')
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false

front/src/components/audio/track/Widget.vue

@@ -2,15 +2,18 @@
 import type { Track, Listening } from '~/types'
 
 // TODO (wvffle): Fix websocket update (#1534)
-import axios from 'axios'
 import { ref, reactive, watch } from 'vue'
 import { useStore } from '~/store'
 import { clone } from 'lodash-es'
 
+import axios from 'axios'
+
 import useWebSocketHandler from '~/composables/useWebSocketHandler'
 import PlayButton from '~/components/audio/PlayButton.vue'
 import TagsList from '~/components/tags/List.vue'
 
+import useErrorHandler from '~/composables/useErrorHandler'
+
 interface Emits {
   (e: 'count', count: number): void
 }
@@ -60,7 +63,7 @@ const fetchData = async (url = props.url) => {
 
     objects.push(...newObjects)
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false

front/src/components/auth/ApplicationEdit.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import axios from 'axios'
 import { useGettext } from 'vue3-gettext'
 import { computed, ref } from 'vue'
 
+import axios from 'axios'
+
 import ApplicationForm from '~/components/auth/ApplicationForm.vue'
 
+import useErrorHandler from '~/composables/useErrorHandler'
+
 interface Props {
   id: number
 }
@@ -27,7 +30,7 @@ const fetchApplication = async () => {
     const response = await axios.get(`oauth/apps/${props.id}/`)
     application.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false
@@ -40,7 +43,7 @@ const refreshToken = async () => {
     const response = await axios.post(`oauth/apps/${props.id}/refresh-token`)
     application.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false

front/src/components/channels/UploadForm.vue

@@ -11,10 +11,12 @@ import { useStore } from '~/store'
 import axios from 'axios'
 import $ from 'jquery'
 
+import UploadMetadataForm from '~/components/channels/UploadMetadataForm.vue'
+import FileUploadWidget from '~/components/library/FileUploadWidget.vue'
 import LicenseSelect from '~/components/channels/LicenseSelect.vue'
 import AlbumSelect from '~/components/channels/AlbumSelect.vue'
-import FileUploadWidget from '~/components/library/FileUploadWidget.vue'
+
-import UploadMetadataForm from '~/components/channels/UploadMetadataForm.vue'
+import useErrorHandler from '~/composables/useErrorHandler'
 
 interface Emits {
   (e: 'status', status: UploadStatus): void
@@ -279,7 +281,7 @@ const remove = async (file: VueUploadItem) => {
     try {
       await axios.delete(`uploads/${file.response.uuid}/`)
     } catch (error) {
-      // TODO (wvffle): Handle error
+      useErrorHandler(error as Error)
     }
   } else {
     upload.value.remove(file)

front/src/components/favorites/List.vue

@@ -3,18 +3,22 @@ import type { RouteWithPreferences, OrderingField } from '~/store/ui'
 import type { Track } from '~/types'
 import type { OrderingProps } from '~/composables/useOrdering'
 
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { onBeforeRouteUpdate, useRouter } from 'vue-router'
+import { useGettext } from 'vue3-gettext'
+import { useStore } from '~/store'
+
 import axios from 'axios'
 import $ from 'jquery'
+
+import TrackTable from '~/components/audio/track/Table.vue'
 import RadioButton from '~/components/radios/Button.vue'
 import Pagination from '~/components/vui/Pagination.vue'
-import TrackTable from '~/components/audio/track/Table.vue'
+
-import useLogger from '~/composables/useLogger'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
+import useErrorHandler from '~/composables/useErrorHandler'
 import useOrdering from '~/composables/useOrdering'
-import { onBeforeRouteUpdate, useRouter } from 'vue-router'
+import useLogger from '~/composables/useLogger'
-import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { useStore } from '~/store'
-import { useGettext } from 'vue3-gettext'
 
 interface Props extends OrderingProps {
   defaultPage?: number
@@ -87,7 +91,7 @@ const fetchFavorites = async () => {
     nextLink.value = response.data.next
     previousLink.value = response.data.previous
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   } finally {
     logger.timeEnd('Loading user favorites')
     isLoading.value = false

front/src/components/federation/LibraryWidget.vue

@@ -4,8 +4,11 @@ import type { Library } from '~/types'
 import { ref, reactive } from 'vue'
 
 import axios from 'axios'
+
 import LibraryCard from '~/views/content/remote/Card.vue'
 
+import useErrorHandler from '~/composables/useErrorHandler'
+
 interface Emits {
   (e: 'loaded', libraries: Library[]): void
 }
@@ -34,7 +37,7 @@ const fetchData = async (url = props.url) => {
     libraries.push(...response.data.results)
     emit('loaded', libraries)
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false

front/src/components/library/AlbumBase.vue

@@ -1,16 +1,20 @@
 <script setup lang="ts">
 import type { Track, Album, Artist, Library } from '~/types'
 
-import axios from 'axios'
+import { momentFormat } from '~/utils/filters'
-import { sum } from 'lodash-es'
 import { useGettext } from 'vue3-gettext'
+import { computed, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
+import { sum } from 'lodash-es'
+
+import axios from 'axios'
+
+import ArtistLabel from '~/components/audio/ArtistLabel.vue'
 import PlayButton from '~/components/audio/PlayButton.vue'
 import TagsList from '~/components/tags/List.vue'
-import ArtistLabel from '~/components/audio/ArtistLabel.vue'
 import AlbumDropdown from './AlbumDropdown.vue'
-import { momentFormat } from '~/utils/filters'
+
-import { computed, ref, watch } from 'vue'
+import useErrorHandler from '~/composables/useErrorHandler'
 
 interface Props {
   id: string
@@ -83,13 +87,13 @@ const remove = async () => {
   isLoading.value = true
   try {
     await axios.delete(`albums/${object.value?.id}`)
-    isLoading.value = false
     emit('deleted')
     router.push({ name: 'library.artists.detail', params: { id: artist.value?.id } })
   } catch (error) {
-    isLoading.value = false
+    useErrorHandler(error as Error)
-    // TODO (wvffle): Handle error
   }
+
+  isLoading.value = false
 }
 </script>
 

front/src/components/library/Albums.vue

@@ -2,19 +2,23 @@
 import type { RouteWithPreferences, OrderingField } from '~/store/ui'
 import type { OrderingProps } from '~/composables/useOrdering'
 
-import qs from 'qs'
-import axios from 'axios'
-import $ from 'jquery'
 import { onBeforeRouteUpdate, useRouter } from 'vue-router'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
+import { useStore } from '~/store'
+
+import axios from 'axios'
+import $ from 'jquery'
+import qs from 'qs'
+
+import TagsSelector from '~/components/library/TagsSelector.vue'
 import AlbumCard from '~/components/audio/album/Card.vue'
 import Pagination from '~/components/vui/Pagination.vue'
-import TagsSelector from '~/components/library/TagsSelector.vue'
+
-import useLogger from '~/composables/useLogger'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
+import useErrorHandler from '~/composables/useErrorHandler'
 import useOrdering from '~/composables/useOrdering'
-import { useStore } from '~/store'
+import useLogger from '~/composables/useLogger'
 
 interface Props extends OrderingProps {
   defaultPage?: number
@@ -91,7 +95,7 @@ const fetchData = async () => {
 
     result.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
     result.value = null
   } finally {
     logger.timeEnd('Fetching albums')

front/src/components/library/ArtistDetail.vue

@@ -7,9 +7,11 @@ import { useStore } from '~/store'
 
 import axios from 'axios'
 
-import AlbumCard from '~/components/audio/album/Card.vue'
-import TrackTable from '~/components/audio/track/Table.vue'
 import LibraryWidget from '~/components/federation/LibraryWidget.vue'
+import TrackTable from '~/components/audio/track/Table.vue'
+import AlbumCard from '~/components/audio/album/Card.vue'
+
+import useErrorHandler from '~/composables/useErrorHandler'
 
 interface Props {
   object: Artist
@@ -42,7 +44,7 @@ const loadMoreAlbums = async () => {
     additionalAlbums.push(...additionalAlbums.concat(response.data.results))
     loadMoreAlbumsUrl.value = response.data.next
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoadingMoreAlbums.value = false

front/src/components/library/Artists.vue

@@ -2,20 +2,23 @@
 import type { RouteWithPreferences, OrderingField } from '~/store/ui'
 import type { OrderingProps } from '~/composables/useOrdering'
 
-import qs from 'qs'
-import axios from 'axios'
-import $ from 'jquery'
-
-import ArtistCard from '~/components/audio/artist/Card.vue'
-import Pagination from '~/components/vui/Pagination.vue'
-import TagsSelector from '~/components/library/TagsSelector.vue'
-import useLogger from '~/composables/useLogger'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
 import { computed, reactive, ref, watch, onMounted } from 'vue'
+import { onBeforeRouteUpdate, useRouter } from 'vue-router'
 import { useGettext } from 'vue3-gettext'
 import { useStore } from '~/store'
+
+import axios from 'axios'
+import $ from 'jquery'
+import qs from 'qs'
+
+import TagsSelector from '~/components/library/TagsSelector.vue'
+import ArtistCard from '~/components/audio/artist/Card.vue'
+import Pagination from '~/components/vui/Pagination.vue'
+
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import useErrorHandler from '~/composables/useErrorHandler'
 import useOrdering from '~/composables/useOrdering'
-import { onBeforeRouteUpdate, useRouter } from 'vue-router'
+import useLogger from '~/composables/useLogger'
 
 interface Props extends OrderingProps {
   defaultPage?: number
@@ -95,7 +98,7 @@ const fetchData = async () => {
 
     result.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
     result.value = null
   } finally {
     logger.timeEnd('Fetching artists')

front/src/components/library/EditCard.vue

@@ -11,6 +11,7 @@ import { useStore } from '~/store'
 import axios from 'axios'
 
 import useEditConfigs from '~/composables/moderation/useEditConfigs'
+import useErrorHandler from '~/composables/useErrorHandler'
 
 interface Emits {
   (e: 'approved', isApproved: boolean): void
@@ -126,7 +127,7 @@ const remove = async () => {
     await axios.delete(`mutations/${props.obj.uuid}/`)
     emit('deleted')
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false
@@ -144,7 +145,7 @@ const approve = async (approved: boolean) => {
     emit('approved', approved)
     store.commit('ui/incrementNotifications', { count: -1, type: 'pendingReviewEdits' })
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false

front/src/components/library/EditDetail.vue

@@ -2,11 +2,15 @@
 import type { EditObject, EditObjectType } from '~/composables/moderation/useEditConfigs'
 import type { ReviewState } from '~/types'
 
-import axios from 'axios'
-import useEditConfigs from '~/composables/moderation/useEditConfigs'
-import EditCard from '~/components/library/EditCard.vue'
 import { computed, ref } from 'vue'
 
+import axios from 'axios'
+
+import EditCard from '~/components/library/EditCard.vue'
+
+import useEditConfigs from '~/composables/moderation/useEditConfigs'
+import useErrorHandler from '~/composables/useErrorHandler'
+
 interface Props {
   object: EditObject
   objectType: EditObjectType
@@ -32,7 +36,7 @@ const fetchData = async () => {
     const response = await axios.get(`mutations/${props.editId}/`)
     obj.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   } finally {
     isLoading.value = false
   }

front/src/components/library/FileUpload.vue

@@ -12,12 +12,14 @@ import { useStore } from '~/store'
 import axios from 'axios'
 
 import LibraryFilesTable from '~/views/content/libraries/FilesTable.vue'
-import useWebSocketHandler from '~/composables/useWebSocketHandler'
-import updateQueryString from '~/composables/updateQueryString'
 import FileUploadWidget from './FileUploadWidget.vue'
 import FsBrowser from './FsBrowser.vue'
 import FsLogs from './FsLogs.vue'
 
+import useWebSocketHandler from '~/composables/useWebSocketHandler'
+import updateQueryString from '~/composables/updateQueryString'
+import useErrorHandler from '~/composables/useErrorHandler'
+
 interface Emits {
   (e: 'uploads-finished', delta: number):void
 }
@@ -111,7 +113,7 @@ const fetchStatus = async () => {
 
       uploads[status as keyof typeof uploads] = response.data.count
     } catch (error) {
-      // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
     }
   }
 }
@@ -184,7 +186,7 @@ const fetchQuota = async () => {
     const response = await axios.get('users/me/')
     quotaStatus.value = response.data.quota_status
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoadingQuota.value = false
@@ -216,7 +218,7 @@ const fetchFilesystem = async (updateLoading: boolean) => {
     const response = await axios.get('libraries/fs-import', { params: { path: fsPath.join('/') } })
     fsStatus.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   if (updateLoading) isLoadingFs.value = false
@@ -252,7 +254,7 @@ const cancelFsScan = async () => {
     await axios.delete('libraries/fs-import')
     fetchFilesystem(false)
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 }
 

front/src/components/library/Home.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
+import { useGettext } from 'vue3-gettext'
+import { ref, computed } from 'vue'
+
 import axios from 'axios'
+
 import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
+import PlaylistWidget from '~/components/playlists/Widget.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 useErrorHandler from '~/composables/useErrorHandler'
 import useLogger from '~/composables/useLogger'
-import { ref, computed } from 'vue'
-import { useGettext } from 'vue3-gettext'
 
 interface Props {
   scope?: string
@@ -39,7 +43,7 @@ const fetchData = async () => {
     const response = await axios.get('artists/', { params })
     artists.value = response.data.results
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false

front/src/components/library/Podcasts.vue

@@ -2,22 +2,25 @@
 import type { RouteWithPreferences, OrderingField } from '~/store/ui'
 import type { OrderingProps } from '~/composables/useOrdering'
 
-import qs from 'qs'
-import axios from 'axios'
-import $ from 'jquery'
-
-import ArtistCard from '~/components/audio/artist/Card.vue'
-import Pagination from '~/components/vui/Pagination.vue'
-import TagsSelector from '~/components/library/TagsSelector.vue'
-import SemanticModal from '~/components/semantic/Modal.vue'
-import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
-import useLogger from '~/composables/useLogger'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
 import { computed, reactive, ref, watch, onMounted } from 'vue'
-import useOrdering from '~/composables/useOrdering'
+import { onBeforeRouteUpdate, useRouter } from 'vue-router'
 import { useGettext } from 'vue3-gettext'
 import { useStore } from '~/store'
-import { onBeforeRouteUpdate, useRouter } from 'vue-router'
+
+import axios from 'axios'
+import $ from 'jquery'
+import qs from 'qs'
+
+import TagsSelector from '~/components/library/TagsSelector.vue'
+import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
+import SemanticModal from '~/components/semantic/Modal.vue'
+import ArtistCard from '~/components/audio/artist/Card.vue'
+import Pagination from '~/components/vui/Pagination.vue'
+
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import useErrorHandler from '~/composables/useErrorHandler'
+import useOrdering from '~/composables/useOrdering'
+import useLogger from '~/composables/useLogger'
 
 interface Props extends OrderingProps {
   defaultPage?: number
@@ -97,7 +100,7 @@ const fetchData = async () => {
 
     result.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
     result.value = null
   } finally {
     logger.timeEnd('Fetching podcasts')

front/src/components/library/Radios.vue

@@ -2,17 +2,21 @@
 import type { RouteWithPreferences, OrderingField } from '~/store/ui'
 import type { OrderingProps } from '~/composables/useOrdering'
 
-import axios from 'axios'
+import { onBeforeRouteUpdate, useRouter } from 'vue-router'
-import $ from 'jquery'
-import RadioCard from '~/components/radios/Card.vue'
-import Pagination from '~/components/vui/Pagination.vue'
-import useLogger from '~/composables/useLogger'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
 import { computed, ref, watch, onMounted } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useStore } from '~/store'
-import { onBeforeRouteUpdate, useRouter } from 'vue-router'
+
+import axios from 'axios'
+import $ from 'jquery'
+
+import Pagination from '~/components/vui/Pagination.vue'
+import RadioCard from '~/components/radios/Card.vue'
+
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import useErrorHandler from '~/composables/useErrorHandler'
 import useOrdering from '~/composables/useOrdering'
+import useLogger from '~/composables/useLogger'
 
 interface Props extends OrderingProps {
   defaultPage?: number
@@ -78,7 +82,7 @@ const fetchData = async () => {
 
     result.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
     result.value = null
   } finally {
     logger.timeEnd('Fetching radios')

front/src/components/library/TrackBase.vue

@@ -1,21 +1,25 @@
 <script setup lang="ts">
 import type { Track, Artist, Library } from '~/types'
 
-import { useGettext } from 'vue3-gettext'
-import axios from 'axios'
-import PlayButton from '~/components/audio/PlayButton.vue'
-import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
-import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
-import SemanticModal from '~/components/semantic/Modal.vue'
-import EmbedWizard from '~/components/audio/EmbedWizard.vue'
 import { momentFormat } from '~/utils/filters'
-import updateQueryString from '~/composables/updateQueryString'
+import { computed, ref, watch } from 'vue'
-import useReport from '~/composables/moderation/useReport'
+import { useGettext } from 'vue3-gettext'
-import useLogger from '~/composables/useLogger'
+import { useRouter } from 'vue-router'
 import { getDomain } from '~/utils'
 import { useStore } from '~/store'
-import { useRouter } from 'vue-router'
+
-import { computed, ref, watch } from 'vue'
+import axios from 'axios'
+
+import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
+import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
+import EmbedWizard from '~/components/audio/EmbedWizard.vue'
+import SemanticModal from '~/components/semantic/Modal.vue'
+import PlayButton from '~/components/audio/PlayButton.vue'
+
+import updateQueryString from '~/composables/updateQueryString'
+import useErrorHandler from '~/composables/useErrorHandler'
+import useReport from '~/composables/moderation/useReport'
+import useLogger from '~/composables/useLogger'
 
 interface Props {
   id: string
@@ -96,7 +100,7 @@ const fetchData = async () => {
     const artistResponse = await axios.get(`artists/${trackResponse.data.artist.id}/`)
     artist.value = artistResponse.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
   isLoading.value = false
 }
@@ -111,7 +115,7 @@ const remove = async () => {
     emit('deleted')
     router.push({ name: 'library.artists.detail', params: { id: artist.value?.id } })
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false

front/src/components/library/TrackDetail.vue

@@ -11,6 +11,8 @@ import LibraryWidget from '~/components/federation/LibraryWidget.vue'
 import PlaylistWidget from '~/components/playlists/Widget.vue'
 import TagsList from '~/components/tags/List.vue'
 
+import useErrorHandler from '~/composables/useErrorHandler'
+
 interface Props {
   track: Track
 }
@@ -32,7 +34,7 @@ const fetchLicense = async (licenseId: string) => {
     const response = await axios.get(`licenses/${licenseId}`)
     license.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 }
 

front/src/components/library/radios/Filter.vue

@@ -5,14 +5,16 @@ import type { Track } from '~/types'
 import axios from 'axios'
 import $ from 'jquery'
 
-import { clone } from 'lodash-es'
-import { ref, onMounted, watch } from 'vue'
 import { useCurrentElement } from '@vueuse/core'
+import { ref, onMounted, watch } from 'vue'
 import { useStore } from '~/store'
+import { clone } from 'lodash-es'
 
 import SemanticModal from '~/components/semantic/Modal.vue'
 import TrackTable from '~/components/audio/track/Table.vue'
 
+import useErrorHandler from '~/composables/useErrorHandler'
+
 interface Props {
   index: number
 
@@ -111,7 +113,7 @@ const fetchCandidates = async () => {
     const response = await axios.post('radios/radios/validate/', params)
     checkResult.value = (response.data as ResponseType).filters[0]
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 }
 

front/src/components/manage/ChannelsTable.vue

@@ -3,12 +3,16 @@ import type { RouteWithPreferences, OrderingField } from '~/store/ui'
 import type { SmartSearchProps } from '~/composables/useSmartSearch'
 import type { OrderingProps } from '~/composables/useOrdering'
 
-import axios from 'axios'
-import Pagination from '~/components/vui/Pagination.vue'
-import ActionTable from '~/components/common/ActionTable.vue'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
 import { computed, ref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
+
+import axios from 'axios'
+
+import ActionTable from '~/components/common/ActionTable.vue'
+import Pagination from '~/components/vui/Pagination.vue'
+
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import useErrorHandler from '~/composables/useErrorHandler'
 import useSmartSearch from '~/composables/useSmartSearch'
 import useOrdering from '~/composables/useOrdering'
 
@@ -64,7 +68,7 @@ const fetchData = async () => {
 
     result.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
     result.value = null
   } finally {
     isLoading.value = false

front/src/components/manage/library/AlbumsTable.vue

@@ -3,15 +3,19 @@ import type { RouteWithPreferences, OrderingField } from '~/store/ui'
 import type { SmartSearchProps } from '~/composables/useSmartSearch'
 import type { OrderingProps } from '~/composables/useOrdering'
 
-import axios from 'axios'
-import Pagination from '~/components/vui/Pagination.vue'
-import ActionTable from '~/components/common/ActionTable.vue'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
-import useSmartSearch from '~/composables/useSmartSearch'
-import useOrdering from '~/composables/useOrdering'
 import { computed, ref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 
+import axios from 'axios'
+
+import ActionTable from '~/components/common/ActionTable.vue'
+import Pagination from '~/components/vui/Pagination.vue'
+
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import useErrorHandler from '~/composables/useErrorHandler'
+import useSmartSearch from '~/composables/useSmartSearch'
+import useOrdering from '~/composables/useOrdering'
+
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): Remove from EVERY SINGLE component that does not use it at all
   // TODO (wvffle): find object type
@@ -76,7 +80,7 @@ const fetchData = async () => {
 
     result.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
     result.value = null
   } finally {
     isLoading.value = false

front/src/components/manage/library/ArtistsTable.vue

@@ -3,14 +3,18 @@ import type { RouteWithPreferences, OrderingField } from '~/store/ui'
 import type { OrderingProps } from '~/composables/useOrdering'
 import type { SmartSearchProps } from '~/composables/useSmartSearch'
 
-import axios from 'axios'
-import Pagination from '~/components/vui/Pagination.vue'
-import ActionTable from '~/components/common/ActionTable.vue'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
 import { ref, computed, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import useOrdering from '~/composables/useOrdering'
+
+import axios from 'axios'
+
+import ActionTable from '~/components/common/ActionTable.vue'
+import Pagination from '~/components/vui/Pagination.vue'
+
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import useErrorHandler from '~/composables/useErrorHandler'
 import useSmartSearch from '~/composables/useSmartSearch'
+import useOrdering from '~/composables/useOrdering'
 
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type
@@ -73,7 +77,7 @@ const fetchData = async () => {
 
     result.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
     result.value = null
   } finally {
     isLoading.value = false

front/src/components/manage/library/EditsCardList.vue

@@ -1,19 +1,23 @@
 <script setup lang="ts">
-import type { RouteWithPreferences, OrderingField } from '~/store/ui'
-import type { OrderingProps } from '~/composables/useOrdering'
-import type { SmartSearchProps } from '~/composables/useSmartSearch'
 import type { EditObjectType } from '~/composables/moderation/useEditConfigs'
+import type { RouteWithPreferences, OrderingField } from '~/store/ui'
+import type { SmartSearchProps } from '~/composables/useSmartSearch'
+import type { OrderingProps } from '~/composables/useOrdering'
+
+import { ref, reactive, watch, computed } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import { uniq } from 'lodash-es'
 
 import axios from 'axios'
-import { uniq } from 'lodash-es'
+
 import Pagination from '~/components/vui/Pagination.vue'
 import EditCard from '~/components/library/EditCard.vue'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
+
-import { ref, reactive, watch, computed } from 'vue'
-import useOrdering from '~/composables/useOrdering'
-import useSmartSearch from '~/composables/useSmartSearch'
 import useEditConfigs from '~/composables/moderation/useEditConfigs'
-import { useGettext } from 'vue3-gettext'
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import useErrorHandler from '~/composables/useErrorHandler'
+import useSmartSearch from '~/composables/useSmartSearch'
+import useOrdering from '~/composables/useOrdering'
 
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type
@@ -84,7 +88,7 @@ const fetchTargets = async () => {
         hidden: 'null'
       }
     }).catch(() => {
-      // TODO (wvffle): Handle error
+      useErrorHandler(error as Error)
     })
 
     for (const payload of response?.data?.results ?? []) {
@@ -119,7 +123,7 @@ const fetchData = async () => {
     result.value = response.data
     fetchTargets()
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
     result.value = null
   } finally {
     isLoading.value = false

front/src/components/manage/library/LibrariesTable.vue

@@ -1,18 +1,21 @@
 <script setup lang="ts">
-import type { PrivacyLevel } from '~/types'
 import type { RouteWithPreferences, OrderingField } from '~/store/ui'
 import type { SmartSearchProps } from '~/composables/useSmartSearch'
 import type { OrderingProps } from '~/composables/useOrdering'
+import type { PrivacyLevel } from '~/types'
 
-import axios from 'axios'
-import Pagination from '~/components/vui/Pagination.vue'
-import ActionTable from '~/components/common/ActionTable.vue'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
-import useSmartSearch from '~/composables/useSmartSearch'
-import useOrdering from '~/composables/useOrdering'
 import { computed, ref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 
+import axios from 'axios'
+import ActionTable from '~/components/common/ActionTable.vue'
+import Pagination from '~/components/vui/Pagination.vue'
+
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import useErrorHandler from '~/composables/useErrorHandler'
+import useSmartSearch from '~/composables/useSmartSearch'
+import useOrdering from '~/composables/useOrdering'
+
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type
   filters?: object
@@ -76,7 +79,7 @@ const fetchData = async () => {
 
     result.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
     result.value = null
   } finally {
     isLoading.value = false

front/src/components/manage/library/TagsTable.vue

@@ -3,16 +3,20 @@ import type { RouteWithPreferences, OrderingField } from '~/store/ui'
 import type { SmartSearchProps } from '~/composables/useSmartSearch'
 import type { OrderingProps } from '~/composables/useOrdering'
 
-import axios from 'axios'
+import { computed, ref, watch } from 'vue'
-import Pagination from '~/components/vui/Pagination.vue'
-import ActionTable from '~/components/common/ActionTable.vue'
-import ImportStatusModal from '~/components/library/ImportStatusModal.vue'
 import { truncate } from '~/utils/filters'
+import { useGettext } from 'vue3-gettext'
+
+import axios from 'axios'
+
+import ImportStatusModal from '~/components/library/ImportStatusModal.vue'
+import ActionTable from '~/components/common/ActionTable.vue'
+import Pagination from '~/components/vui/Pagination.vue'
+
 import useSharedLabels from '~/composables/locale/useSharedLabels'
+import useErrorHandler from '~/composables/useErrorHandler'
 import useSmartSearch from '~/composables/useSmartSearch'
 import useOrdering from '~/composables/useOrdering'
-import { computed, ref, watch } from 'vue'
-import { useGettext } from 'vue3-gettext'
 
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type
@@ -78,7 +82,7 @@ const fetchData = async () => {
 
     result.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
     result.value = null
   } finally {
     isLoading.value = false

front/src/components/manage/library/TracksTable.vue

@@ -1,16 +1,20 @@
 <script setup lang="ts">
 import type { RouteWithPreferences, OrderingField } from '~/store/ui'
-import type { OrderingProps } from '~/composables/useOrdering'
 import type { SmartSearchProps } from '~/composables/useSmartSearch'
+import type { OrderingProps } from '~/composables/useOrdering'
 
-import axios from 'axios'
-import Pagination from '~/components/vui/Pagination.vue'
-import ActionTable from '~/components/common/ActionTable.vue'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
 import { ref, computed, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import useOrdering from '~/composables/useOrdering'
+
+import axios from 'axios'
+
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import ActionTable from '~/components/common/ActionTable.vue'
+import Pagination from '~/components/vui/Pagination.vue'
+
+import useErrorHandler from '~/composables/useErrorHandler'
 import useSmartSearch from '~/composables/useSmartSearch'
+import useOrdering from '~/composables/useOrdering'
 
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type
@@ -73,7 +77,7 @@ const fetchData = async () => {
 
     result.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
     result.value = null
   } finally {
     isLoading.value = false

front/src/components/manage/library/UploadsTable.vue

@@ -1,19 +1,23 @@
 <script setup lang="ts">
-import type { ImportStatus, PrivacyLevel, Upload } from '~/types'
 import type { RouteWithPreferences, OrderingField } from '~/store/ui'
-import type { OrderingProps } from '~/composables/useOrdering'
 import type { SmartSearchProps } from '~/composables/useSmartSearch'
+import type { ImportStatus, PrivacyLevel, Upload } from '~/types'
+import type { OrderingProps } from '~/composables/useOrdering'
 
-import axios from 'axios'
-import Pagination from '~/components/vui/Pagination.vue'
-import ActionTable from '~/components/common/ActionTable.vue'
-import ImportStatusModal from '~/components/library/ImportStatusModal.vue'
 import { humanSize, truncate } from '~/utils/filters'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
 import { ref, computed, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import useOrdering from '~/composables/useOrdering'
+
+import axios from 'axios'
+
+import ImportStatusModal from '~/components/library/ImportStatusModal.vue'
+import ActionTable from '~/components/common/ActionTable.vue'
+import Pagination from '~/components/vui/Pagination.vue'
+
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import useErrorHandler from '~/composables/useErrorHandler'
 import useSmartSearch from '~/composables/useSmartSearch'
+import useOrdering from '~/composables/useOrdering'
 
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type
@@ -81,7 +85,7 @@ const fetchData = async () => {
 
     result.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
     result.value = null
   } finally {
     isLoading.value = false

front/src/components/manage/moderation/AccountsTable.vue

@@ -3,14 +3,18 @@ import type { RouteWithPreferences, OrderingField } from '~/store/ui'
 import type { OrderingProps } from '~/composables/useOrdering'
 import type { SmartSearchProps } from '~/composables/useSmartSearch'
 
-import axios from 'axios'
-import Pagination from '~/components/vui/Pagination.vue'
-import ActionTable from '~/components/common/ActionTable.vue'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
 import { ref, computed, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import useOrdering from '~/composables/useOrdering'
+
+import axios from 'axios'
+
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import ActionTable from '~/components/common/ActionTable.vue'
+import Pagination from '~/components/vui/Pagination.vue'
+
+import useErrorHandler from '~/composables/useErrorHandler'
 import useSmartSearch from '~/composables/useSmartSearch'
+import useOrdering from '~/composables/useOrdering'
 
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type
@@ -74,7 +78,7 @@ const fetchData = async () => {
 
     result.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
     result.value = null
   } finally {
     isLoading.value = false

front/src/components/manage/moderation/DomainsTable.vue

@@ -2,14 +2,18 @@
 import type { RouteWithPreferences, OrderingField } from '~/store/ui'
 import type { OrderingProps } from '~/composables/useOrdering'
 
-import axios from 'axios'
+import { watchDebounced } from '@vueuse/core'
-import Pagination from '~/components/vui/Pagination.vue'
-import ActionTable from '~/components/common/ActionTable.vue'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
-import useOrdering from '~/composables/useOrdering'
 import { computed, ref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import { watchDebounced } from '@vueuse/core'
+
+import axios from 'axios'
+
+import ActionTable from '~/components/common/ActionTable.vue'
+import Pagination from '~/components/vui/Pagination.vue'
+
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import useErrorHandler from '~/composables/useErrorHandler'
+import useOrdering from '~/composables/useOrdering'
 
 interface Props extends OrderingProps {
   // TODO (wvffle): find object type
@@ -88,7 +92,7 @@ const fetchData = async () => {
 
     result.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
     result.value = null
   } finally {
     isLoading.value = false

front/src/components/manage/moderation/NotesThread.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import type { Note } from '~/types'
 
-import axios from 'axios'
 import { useMarkdownRaw } from '~/composables/useMarkdown'
 import { ref } from 'vue'
 
+import axios from 'axios'
+
+import useErrorHandler from '~/composables/useErrorHandler'
+
 interface Props {
   notes: Note[]
 }
@@ -20,7 +23,7 @@ const remove = async (note: Note) => {
     await axios.delete(`manage/moderation/notes/${note.uuid}/`)
     emit('deleted', note.uuid)
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false

front/src/components/manage/moderation/ReportCard.vue

@@ -1,17 +1,20 @@
 <script setup lang="ts">
 import type { Report } from '~/types'
 
-import axios from 'axios'
-import useReportConfigs from '~/composables/moderation/useReportConfigs'
-import useMarkdown from '~/composables/useMarkdown'
 import { ref, computed, reactive } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useStore } from '~/store'
 
-import NoteForm from '~/components/manage/moderation/NoteForm.vue'
+import axios from 'axios'
-import NotesThread from '~/components/manage/moderation/NotesThread.vue'
+
-import ReportCategoryDropdown from '~/components/moderation/ReportCategoryDropdown.vue'
 import InstancePolicyModal from '~/components/manage/moderation/InstancePolicyModal.vue'
+import ReportCategoryDropdown from '~/components/moderation/ReportCategoryDropdown.vue'
+import NotesThread from '~/components/manage/moderation/NotesThread.vue'
+import NoteForm from '~/components/manage/moderation/NoteForm.vue'
+
+import useReportConfigs from '~/composables/moderation/useReportConfigs'
+import useErrorHandler from '~/composables/useErrorHandler'
+import useMarkdown from '~/composables/useMarkdown'
 
 interface Emits {
   (e: 'updated', updating: { type: string }): void
@@ -79,7 +82,7 @@ const actions = computed(() => {
             resolveReport(true)
           } catch (error) {
             console.log('Error while deleting target', error)
-            // TODO (wvffle): Handle error
+            useErrorHandler(error as Error)
           }
         }
       }]
@@ -96,7 +99,7 @@ const update = async (type: string) => {
     await axios.patch(`manage/moderation/reports/${obj.value.uuid}/`, { type })
     emit('updated', { type })
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   updating.type = false
@@ -122,7 +125,7 @@ const resolveReport = async (isHandled: boolean) => {
       count: isHandled ? -1 : 1
     })
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false

front/src/components/manage/moderation/UserRequestCard.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import type { UserRequest, UserRequestStatus } from '~/types'
 
-import axios from 'axios'
-import { ref } from 'vue'
 import { useStore } from '~/store'
+import { ref } from 'vue'
+
+import axios from 'axios'
 
-import NoteForm from '~/components/manage/moderation/NoteForm.vue'
 import NotesThread from '~/components/manage/moderation/NotesThread.vue'
+import NoteForm from '~/components/manage/moderation/NoteForm.vue'
+
+import useErrorHandler from '~/composables/useErrorHandler'
 
 interface Emits {
   (e: 'handled', status: UserRequestStatus): void
@@ -48,7 +51,7 @@ const approve = async (isApproved: boolean) => {
       count: -1
     })
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false

front/src/components/manage/users/InvitationsTable.vue

@@ -2,14 +2,18 @@
 import type { RouteWithPreferences, OrderingField } from '~/store/ui'
 import type { OrderingProps } from '~/composables/useOrdering'
 
-import axios from 'axios'
-import moment from 'moment'
-import Pagination from '~/components/vui/Pagination.vue'
-import ActionTable from '~/components/common/ActionTable.vue'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
-import { computed, ref, watch } from 'vue'
 import { watchDebounced } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
+
+import moment from 'moment'
+import axios from 'axios'
+
+import ActionTable from '~/components/common/ActionTable.vue'
+import Pagination from '~/components/vui/Pagination.vue'
+
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import useErrorHandler from '~/composables/useErrorHandler'
 import useOrdering from '~/composables/useOrdering'
 
 interface Props extends OrderingProps {
@@ -69,7 +73,7 @@ const fetchData = async () => {
 
     result.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
     result.value = null
   } finally {
     isLoading.value = false

front/src/components/manage/users/UsersTable.vue

@@ -2,15 +2,19 @@
 import type { RouteWithPreferences, OrderingField } from '~/store/ui'
 import type { OrderingProps } from '~/composables/useOrdering'
 
-import axios from 'axios'
-import Pagination from '~/components/vui/Pagination.vue'
-import ActionTable from '~/components/common/ActionTable.vue'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
-import { computed, ref, watch } from 'vue'
 import { watchDebounced } from '@vueuse/core'
-import useOrdering from '~/composables/useOrdering'
+import { computed, ref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 
+import axios from 'axios'
+
+import ActionTable from '~/components/common/ActionTable.vue'
+import Pagination from '~/components/vui/Pagination.vue'
+
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import useErrorHandler from '~/composables/useErrorHandler'
+import useOrdering from '~/composables/useOrdering'
+
 interface Props extends OrderingProps {
   // TODO (wvffle): find object type
   filters?: object
@@ -75,7 +79,7 @@ const fetchData = async () => {
 
     result.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
     result.value = null
   } finally {
     isLoading.value = false

front/src/composables/useErrorHandler.ts

@@ -0,0 +1,59 @@
+import type { BackendError } from '~/types'
+
+import { gettext } from '~/init/locale'
+import { COOKIE } from '~/init/sentry'
+
+import useLogger from '~/composables/useLogger'
+import store from '~/store'
+
+const { $pgettext } = gettext
+const logger = useLogger()
+
+export default async (error: Error | BackendError) => {
+  const title = 'backendErrors' in error
+    ? 'Unexpected API error'
+    : 'Unexpected error'
+
+  if ('backendErrors' in error) {
+    logger.error(title, error, error.backendErrors)
+  } else {
+    logger.error(title, error)
+  }
+
+  const date = new Date()
+  const actions = []
+
+  if (import.meta.env.FUNKWHALE_SENTRY_DSN) {
+    const [Sentry, { useCookies }] = await Promise.all([
+      import('@sentry/vue'),
+      import('@vueuse/integrations/useCookies')
+    ])
+
+    const { get } = useCookies()
+    if (get(COOKIE) === 'yes') {
+      const eventId = Sentry.captureException(error)
+
+      const user = store.state.auth.authenticated
+        ? {
+            name: store.state.auth.username,
+            email: store.state.auth.profile?.email
+          }
+        : undefined
+
+      actions.push({
+        text: $pgettext('App/Message/Paragraph', 'Leave feedback'),
+        class: 'basic red',
+        click: () => Sentry.showReportDialog({ eventId, user })
+      })
+    }
+  }
+
+  store.commit('ui/addMessage', {
+    content: $pgettext('App/Message/Paragraph', 'An unexpected error occured.'),
+    date,
+    class: 'error',
+    key: `error-${date}`,
+    classActions: 'bottom attached opaque',
+    actions
+  })
+}

front/src/init/sentry.ts

@@ -4,7 +4,7 @@ import type { Router } from 'vue-router'
 import type { Store } from 'vuex'
 import { watchEffect, type App } from 'vue'
 
-const COOKIE = 'allow-tracing'
+export const COOKIE = 'allow-tracing'
 
 const initSentry = async (app: App, router: Router, store: Store<RootState>) => {
   const [{ default: useLogger }, { BrowserTracing }, Sentry] = await Promise.all([

front/src/store/index.ts

@@ -1,58 +1,59 @@
-import type { InjectionKey } from 'vue'
-import type { State as FavoritesState } from './favorites'
-import type { State as ChannelsState } from './channels'
-import type { State as LibrariesState } from './libraries'
-import type { State as AuthState } from './auth'
-import type { State as InstanceState } from './instance'
 import type { State as ModerationState } from './moderation'
-import type { State as QueueState } from './queue'
+import type { State as PlaylistsState } from './playlists'
+import type { State as FavoritesState } from './favorites'
+import type { State as LibrariesState } from './libraries'
+import type { State as ChannelsState } from './channels'
+import type { State as InstanceState } from './instance'
 import type { State as RadiosState } from './radios'
 import type { State as PlayerState } from './player'
-import type { State as PlaylistsState } from './playlists'
+import type { State as QueueState } from './queue'
+import type { State as AuthState } from './auth'
 import type { State as UiState } from './ui'
+import type { InjectionKey } from 'vue'
 
 import { createStore, Store, useStore as baseUseStore } from 'vuex'
+
 import createPersistedState from 'vuex-persistedstate'
-import favorites from './favorites'
-import channels from './channels'
-import libraries from './libraries'
-import auth from './auth'
-import instance from './instance'
 import moderation from './moderation'
-import queue from './queue'
+import playlists from './playlists'
+import favorites from './favorites'
+import libraries from './libraries'
+import channels from './channels'
+import instance from './instance'
 import radios from './radios'
 import player from './player'
-import playlists from './playlists'
+import queue from './queue'
+import auth from './auth'
 import ui from './ui'
 
 export interface RootState {
-  ui: UiState
-  auth: AuthState
-  channels: ChannelsState
-  libraries: LibrariesState
-  favorites: FavoritesState
-  instance: InstanceState
   moderation: ModerationState
-  queue: QueueState
-  radios: RadiosState
   playlists: PlaylistsState
+  favorites: FavoritesState
+  libraries: LibrariesState
+  channels: ChannelsState
+  instance: InstanceState
+  radios: RadiosState
   player: PlayerState
+  queue: QueueState
+  auth: AuthState
+  ui: UiState
 }
 
 export const key: InjectionKey<Store<RootState>> = Symbol('vuex state injection key')
 export default createStore<RootState>({
   modules: {
-    ui,
-    auth,
-    channels,
-    libraries,
-    favorites,
-    instance,
     moderation,
-    queue,
-    radios,
     playlists,
-    player
+    favorites,
+    libraries,
+    channels,
+    instance,
+    radios,
+    player,
+    queue,
+    auth,
+    ui
   },
   plugins: [
     createPersistedState({

front/src/views/Notifications.vue

@@ -1,17 +1,19 @@
 <script setup lang="ts">
 import type { Notification } from '~/types'
 
-import axios from 'axios'
 import moment from 'moment'
+import axios from 'axios'
 
 import { ref, reactive, computed, watch, markRaw } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useStore } from '~/store'
-import useMarkdown from '~/composables/useMarkdown'
-import useWebSocketHandler from '~/composables/useWebSocketHandler'
 
 import NotificationRow from '~/components/notifications/NotificationRow.vue'
 
+import useWebSocketHandler from '~/composables/useWebSocketHandler'
+import useErrorHandler from '~/composables/useErrorHandler'
+import useMarkdown from '~/composables/useMarkdown'
+
 const store = useStore()
 const supportMessage = useMarkdown(() => store.state.instance.settings.instance.support_message.value)
 const { $pgettext } = useGettext()
@@ -38,7 +40,7 @@ const fetchData = async () => {
     notifications.count = response.data.count
     notifications.results = response.data.results.map(markRaw)
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false
@@ -64,7 +66,7 @@ const setDisplayDate = async (field: string, days: number) => {
 
     store.commit('auth/profilePartialUpdate', response.data)
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 }
 
@@ -82,7 +84,7 @@ const markAllAsRead = async () => {
     store.commit('ui/notifications', { type: 'inbox', count: 0 })
     notifications.results = notifications.results.map(notification => ({ ...notification, is_read: true }))
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 }
 </script>

front/src/views/admin/Settings.vue

@@ -4,12 +4,14 @@ import type { SettingsGroup as SettingsGroupType } from '~/types'
 import axios from 'axios'
 import $ from 'jquery'
 
+import { ref, nextTick, onMounted, computed, watch } from 'vue'
+import { useCurrentElement } from '@vueuse/core'
+import { useGettext } from 'vue3-gettext'
+import { useRoute } from 'vue-router'
+
 import SettingsGroup from '~/components/admin/SettingsGroup.vue'
 
-import { useCurrentElement } from '@vueuse/core'
+import useErrorHandler from '~/composables/useErrorHandler'
-import { ref, nextTick, onMounted, computed, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import { useGettext } from 'vue3-gettext'
 
 const current = ref()
 const settingsData = ref()
@@ -150,7 +152,7 @@ const fetchSettings = async () => {
     const response = await axios.get('instance/admin/settings/')
     settingsData.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false

front/src/views/admin/library/TrackDetail.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import { humanSize, truncate } from '~/utils/filters'
-import { ref, computed } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useRouter } from 'vue-router'
+import { ref, computed } from 'vue'
 
 import axios from 'axios'
+
 import FetchButton from '~/components/federation/FetchButton.vue'
 import TagsList from '~/components/tags/List.vue'
 
+import useErrorHandler from '~/composables/useErrorHandler'
+
 interface Props {
   id: number
 }
@@ -28,7 +31,7 @@ const fetchData = async () => {
     const response = await axios.get(`manage/library/tracks/${props.id}/`)
     track.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false
@@ -43,7 +46,7 @@ const fetchStats = async () => {
     const response = await axios.get(`manage/library/tracks/${props.id}/stats/`)
     stats.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoadingStats.value = false
@@ -60,7 +63,7 @@ const remove = async () => {
     await axios.delete(`manage/library/tracks/${props.id}/`)
     await router.push({ name: 'manage.library.tracks' })
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false

front/src/views/admin/moderation/ReportsList.vue

@@ -1,18 +1,22 @@
 <script setup lang="ts">
 import type { RouteWithPreferences, OrderingField } from '~/store/ui'
-import type { OrderingProps } from '~/composables/useOrdering'
 import type { SmartSearchProps } from '~/composables/useSmartSearch'
+import type { OrderingProps } from '~/composables/useOrdering'
 
-import axios from 'axios'
-import Pagination from '~/components/vui/Pagination.vue'
-import ReportCard from '~/components/manage/moderation/ReportCard.vue'
-import ReportCategoryDropdown from '~/components/moderation/ReportCategoryDropdown.vue'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
-import { useStore } from '~/store'
 import { computed, ref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import useOrdering from '~/composables/useOrdering'
+import { useStore } from '~/store'
+
+import axios from 'axios'
+
+import ReportCategoryDropdown from '~/components/moderation/ReportCategoryDropdown.vue'
+import ReportCard from '~/components/manage/moderation/ReportCard.vue'
+import Pagination from '~/components/vui/Pagination.vue'
+
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import useErrorHandler from '~/composables/useErrorHandler'
 import useSmartSearch from '~/composables/useSmartSearch'
+import useOrdering from '~/composables/useOrdering'
 
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find more types
@@ -70,7 +74,7 @@ const fetchData = async () => {
       })
     }
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
     result.value = null
   } finally {
     isLoading.value = false

front/src/views/admin/moderation/RequestsList.vue

@@ -3,16 +3,20 @@ import type { RouteWithPreferences, OrderingField } from '~/store/ui'
 import type { OrderingProps } from '~/composables/useOrdering'
 import type { SmartSearchProps } from '~/composables/useSmartSearch'
 
-import axios from 'axios'
-import Pagination from '~/components/vui/Pagination.vue'
-import UserRequestCard from '~/components/manage/moderation/UserRequestCard.vue'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
-import useOrdering from '~/composables/useOrdering'
-import useSmartSearch from '~/composables/useSmartSearch'
 import { ref, computed, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useStore } from '~/store'
 
+import axios from 'axios'
+
+import UserRequestCard from '~/components/manage/moderation/UserRequestCard.vue'
+import Pagination from '~/components/vui/Pagination.vue'
+
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import useErrorHandler from '~/composables/useErrorHandler'
+import useSmartSearch from '~/composables/useSmartSearch'
+import useOrdering from '~/composables/useOrdering'
+
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
   orderingConfigName: RouteWithPreferences | null
@@ -65,7 +69,7 @@ const fetchData = async () => {
       })
     }
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
     result.value = null
   } finally {
     isLoading.value = false

front/src/views/auth/ProfileBase.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import type { Actor } from '~/types'
 
-import axios from 'axios'
-import useReport from '~/composables/moderation/useReport'
 import { onBeforeRouteUpdate } from 'vue-router'
-import { useStore } from '~/store'
-import { useGettext } from 'vue3-gettext'
 import { computed, ref, watch } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import { useStore } from '~/store'
+
+import axios from 'axios'
+
+import useErrorHandler from '~/composables/useErrorHandler'
+import useReport from '~/composables/moderation/useReport'
 
 interface Props {
   username: string
@@ -51,7 +54,7 @@ const fetchData = async () => {
     const response = await axios.get(`federation/actors/${fullUsername.value}/`)
     object.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false

front/src/views/channels/DetailBase.vue

@@ -1,18 +1,22 @@
 <script setup lang="ts">
 import type { Channel } from '~/types'
 
-import axios from 'axios'
-import PlayButton from '~/components/audio/PlayButton.vue'
-import EmbedWizard from '~/components/audio/EmbedWizard.vue'
-import SemanticModal from '~/components/semantic/Modal.vue'
-import TagsList from '~/components/tags/List.vue'
-import SubscribeButton from '~/components/channels/SubscribeButton.vue'
-import useReport from '~/composables/moderation/useReport'
-import ChannelForm from '~/components/audio/ChannelForm.vue'
-import { useStore } from '~/store'
 import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
 import { computed, ref, reactive, watch, watchEffect } from 'vue'
 import { useGettext } from 'vue3-gettext'
+import { useStore } from '~/store'
+
+import axios from 'axios'
+
+import SubscribeButton from '~/components/channels/SubscribeButton.vue'
+import ChannelForm from '~/components/audio/ChannelForm.vue'
+import EmbedWizard from '~/components/audio/EmbedWizard.vue'
+import SemanticModal from '~/components/semantic/Modal.vue'
+import PlayButton from '~/components/audio/PlayButton.vue'
+import TagsList from '~/components/tags/List.vue'
+
+import useErrorHandler from '~/composables/useErrorHandler'
+import useReport from '~/composables/moderation/useReport'
 
 interface Props {
   id: string
@@ -75,7 +79,7 @@ const fetchData = async () => {
       }
     }
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false
@@ -104,7 +108,7 @@ const remove = async () => {
     emit('deleted')
     return router.push({ name: 'profile.overview', params: { username: store.state.auth.username } })
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 }
 

front/src/views/channels/SubscriptionsList.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
 import type { Channel } from '~/types'
+
+import { useGettext } from 'vue3-gettext'
+import { ref, computed } from 'vue'
+
 import axios from 'axios'
-import SemanticModal from '~/components/semantic/Modal.vue'
+
 import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
 import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
-import { ref, computed } from 'vue'
+import SemanticModal from '~/components/semantic/Modal.vue'
-import { useGettext } from 'vue3-gettext'
+
+import useErrorHandler from '~/composables/useErrorHandler'
 
 interface Props {
   defaultQuery?: string
@@ -39,7 +44,7 @@ const fetchData = async () => {
     channels.value.push(...response.data.results)
     count.value = response.data.count
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false

front/src/views/content/libraries/FilesTable.vue

@@ -1,20 +1,24 @@
 <script setup lang="ts">
-import type { ImportStatus } from '~/types'
 import type { RouteWithPreferences, OrderingField } from '~/store/ui'
-import type { OrderingProps } from '~/composables/useOrdering'
 import type { SmartSearchProps } from '~/composables/useSmartSearch'
+import type { OrderingProps } from '~/composables/useOrdering'
+import type { ImportStatus } from '~/types'
 
-import axios from 'axios'
-import time from '~/utils/time'
-import Pagination from '~/components/vui/Pagination.vue'
-import ActionTable from '~/components/common/ActionTable.vue'
-import ImportStatusModal from '~/components/library/ImportStatusModal.vue'
 import { humanSize, truncate } from '~/utils/filters'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
 import { computed, ref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import useOrdering from '~/composables/useOrdering'
+
+import time from '~/utils/time'
+import axios from 'axios'
+
+import ImportStatusModal from '~/components/library/ImportStatusModal.vue'
+import ActionTable from '~/components/common/ActionTable.vue'
+import Pagination from '~/components/vui/Pagination.vue'
+
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import useErrorHandler from '~/composables/useErrorHandler'
 import useSmartSearch from '~/composables/useSmartSearch'
+import useOrdering from '~/composables/useOrdering'
 
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type
@@ -101,7 +105,7 @@ const fetchData = async () => {
 
     result.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
     result.value = null
   } finally {
     isLoading.value = false

front/src/views/content/remote/Card.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
 import type { Library } from '~/types'
 
-import axios from 'axios'
-import RadioButton from '~/components/radios/Button.vue'
-import useReport from '~/composables/moderation/useReport'
 import { useTimeoutFn } from '@vueuse/core'
-import { useStore } from '~/store'
-import { useGettext } from 'vue3-gettext'
 import { computed, ref, watch } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import { useStore } from '~/store'
+
+import axios from 'axios'
+
+import RadioButton from '~/components/radios/Button.vue'
+
+import useErrorHandler from '~/composables/useErrorHandler'
+import useReport from '~/composables/moderation/useReport'
 
 interface Props {
   initialLibrary: Library
@@ -60,7 +64,7 @@ const launchScan = async () => {
         : $pgettext('Content/Library/Message', 'Scan launched')
     })
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 }
 
@@ -116,7 +120,7 @@ const fetchScanStatus = async () => {
       stopFetching()
     }
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 }
 

front/src/views/library/DetailBase.vue

@@ -2,15 +2,19 @@
 // TODO (wvffle): Rename to LibraryBase
 import type { Library } from '~/types'
 
+import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
+import { computed, ref, watch, watchEffect } from 'vue'
+import { humanSize } from '~/utils/filters'
+import { useGettext } from 'vue3-gettext'
+import { useStore } from '~/store'
+
 import axios from 'axios'
+
 import LibraryFollowButton from '~/components/audio/LibraryFollowButton.vue'
 import RadioButton from '~/components/radios/Button.vue'
+
+import useErrorHandler from '~/composables/useErrorHandler'
 import useReport from '~/composables/moderation/useReport'
-import { humanSize } from '~/utils/filters'
-import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
-import { useStore } from '~/store'
-import { useGettext } from 'vue3-gettext'
-import { computed, ref, watch, watchEffect } from 'vue'
 
 interface Props {
   id: string
@@ -57,7 +61,7 @@ const fetchData = async () => {
     const response = await axios.get(`libraries/${props.id}`)
     object.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false

front/src/views/library/Edit.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import type { Library, LibraryFollow } from '~/types'
 
+import { ref } from 'vue'
+
+import axios from 'axios'
+
 import LibraryFilesTable from '~/views/content/libraries/FilesTable.vue'
 import LibraryForm from '~/views/content/libraries/Form.vue'
-import { ref } from 'vue'
+
-import axios from 'axios'
+import useErrorHandler from '~/composables/useErrorHandler'
 
 interface Props {
   object: Library
@@ -23,7 +27,7 @@ const fetchData = async () => {
     const response = await axios.get(`libraries/${props.object.uuid}/follows/`)
     follows.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false
@@ -39,7 +43,7 @@ const updateApproved = async (follow: LibraryFollow, approved: boolean) => {
     await axios.post(`federation/follows/library/${follow.uuid}/${approved ? 'accept' : 'reject'}/`)
     follow.approved = approved
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   follow.isLoading = false

front/src/views/playlists/Detail.vue

@@ -1,16 +1,20 @@
 <script setup lang="ts">
 import type { PlaylistTrack, Playlist } from '~/types'
 
+import { useGettext } from 'vue3-gettext'
+import { useRouter } from 'vue-router'
+import { ref, computed } from 'vue'
+import { useStore } from '~/store'
+
 import axios from 'axios'
-import TrackTable from '~/components/audio/track/Table.vue'
+
-import PlayButton from '~/components/audio/PlayButton.vue'
 import PlaylistEditor from '~/components/playlists/Editor.vue'
 import EmbedWizard from '~/components/audio/EmbedWizard.vue'
 import SemanticModal from '~/components/semantic/Modal.vue'
-import { ref, computed } from 'vue'
+import TrackTable from '~/components/audio/track/Table.vue'
-import { useGettext } from 'vue3-gettext'
+import PlayButton from '~/components/audio/PlayButton.vue'
-import { useRouter } from 'vue-router'
+
-import { useStore } from '~/store'
+import useErrorHandler from '~/composables/useErrorHandler'
 
 interface Props {
   id: string
@@ -50,7 +54,7 @@ const fetchData = async () => {
     playlist.value = playlistResponse.data
     playlistTracks.value = tracksResponse.data.results
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false
@@ -64,7 +68,7 @@ const deletePlaylist = async () => {
     store.dispatch('playlists/fetchOwn')
     return router.push({ path: '/library' })
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 }
 </script>

front/src/views/playlists/List.vue

@@ -4,15 +4,18 @@ import type { OrderingProps } from '~/composables/useOrdering'
 
 import axios from 'axios'
 import $ from 'jquery'
-import { computed, ref, watch, onMounted } from 'vue'
+
 import { useRouter, onBeforeRouteUpdate } from 'vue-router'
+import { computed, ref, watch, onMounted } from 'vue'
 import { useGettext } from 'vue3-gettext'
 
 import PlaylistCardList from '~/components/playlists/CardList.vue'
 import Pagination from '~/components/vui/Pagination.vue'
+
 import useSharedLabels from '~/composables/locale/useSharedLabels'
-import useLogger from '~/composables/useLogger'
+import useErrorHandler from '~/composables/useErrorHandler'
 import useOrdering from '~/composables/useOrdering'
+import useLogger from '~/composables/useLogger'
 
 interface Props extends OrderingProps {
   defaultPage?: number
@@ -79,7 +82,7 @@ const fetchData = async () => {
 
     result.value = response.data
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
     result.value = null
   } finally {
     logger.timeEnd('Fetching albums')

front/src/views/radios/Detail.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
 import type { Track, Radio } from '~/types'
 
-import axios from 'axios'
-import TrackTable from '~/components/audio/track/Table.vue'
-import RadioButton from '~/components/radios/Button.vue'
-import Pagination from '~/components/vui/Pagination.vue'
 import { ref, computed, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useRouter } from 'vue-router'
 
+import axios from 'axios'
+
+import TrackTable from '~/components/audio/track/Table.vue'
+import RadioButton from '~/components/radios/Button.vue'
+import Pagination from '~/components/vui/Pagination.vue'
+
+import useErrorHandler from '~/composables/useErrorHandler'
+
 interface Props {
   id: string
 }
@@ -39,7 +43,7 @@ const fetchData = async () => {
     totalTracks.value = tracksResponse.data.count
     tracks.value = tracksResponse.data.results
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 
   isLoading.value = false
@@ -53,7 +57,7 @@ const deleteRadio = async () => {
     await axios.delete(`radios/radios/${props.id}/`)
     return router.push({ path: '/library' })
   } catch (error) {
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
 }
 </script>