From ee975e5854c7def11532ffb8275b37c258d308e9 Mon Sep 17 00:00:00 2001
From: wvffle <funkwhale@wvffle.net>
Date: Tue, 9 Aug 2022 01:08:31 +0000
Subject: [PATCH] Add error handler in all unhandled places

---
 front/src/App.vue                             | 21 +++---
 front/src/components/SetInstanceModal.vue     | 12 ++--
 front/src/components/audio/Search.vue         |  4 +-
 front/src/components/audio/album/Widget.vue   |  7 +-
 front/src/components/audio/artist/Widget.vue  |  7 +-
 front/src/components/audio/podcast/Row.vue    | 12 ++--
 front/src/components/audio/track/Table.vue    | 12 ++--
 front/src/components/audio/track/Widget.vue   |  7 +-
 front/src/components/auth/ApplicationEdit.vue |  9 ++-
 front/src/components/channels/UploadForm.vue  |  8 ++-
 front/src/components/favorites/List.vue       | 18 +++--
 .../components/federation/LibraryWidget.vue   |  5 +-
 front/src/components/library/AlbumBase.vue    | 20 +++---
 front/src/components/library/Albums.vue       | 18 +++--
 front/src/components/library/ArtistDetail.vue |  8 ++-
 front/src/components/library/Artists.vue      | 25 +++----
 front/src/components/library/EditCard.vue     |  5 +-
 front/src/components/library/EditDetail.vue   | 12 ++--
 front/src/components/library/FileUpload.vue   | 14 ++--
 front/src/components/library/Home.vue         | 12 ++--
 front/src/components/library/Podcasts.vue     | 31 +++++----
 front/src/components/library/Radios.vue       | 20 +++---
 front/src/components/library/TrackBase.vue    | 32 +++++----
 front/src/components/library/TrackDetail.vue  |  4 +-
 .../src/components/library/radios/Filter.vue  |  8 ++-
 front/src/components/manage/ChannelsTable.vue | 14 ++--
 .../components/manage/library/AlbumsTable.vue | 18 +++--
 .../manage/library/ArtistsTable.vue           | 16 +++--
 .../manage/library/EditsCardList.vue          | 26 ++++----
 .../manage/library/LibrariesTable.vue         | 19 +++---
 .../components/manage/library/TagsTable.vue   | 18 +++--
 .../components/manage/library/TracksTable.vue | 18 +++--
 .../manage/library/UploadsTable.vue           | 22 ++++---
 .../manage/moderation/AccountsTable.vue       | 16 +++--
 .../manage/moderation/DomainsTable.vue        | 18 +++--
 .../manage/moderation/NotesThread.vue         |  7 +-
 .../manage/moderation/ReportCard.vue          | 21 +++---
 .../manage/moderation/UserRequestCard.vue     | 11 ++--
 .../manage/users/InvitationsTable.vue         | 18 +++--
 .../components/manage/users/UsersTable.vue    | 18 +++--
 front/src/composables/useErrorHandler.ts      | 59 +++++++++++++++++
 front/src/init/sentry.ts                      |  2 +-
 front/src/store/index.ts                      | 65 ++++++++++---------
 front/src/views/Notifications.vue             | 14 ++--
 front/src/views/admin/Settings.vue            | 12 ++--
 front/src/views/admin/library/TrackDetail.vue | 11 ++--
 .../views/admin/moderation/ReportsList.vue    | 22 ++++---
 .../views/admin/moderation/RequestsList.vue   | 18 +++--
 front/src/views/auth/ProfileBase.vue          | 13 ++--
 front/src/views/channels/DetailBase.vue       | 26 ++++----
 .../src/views/channels/SubscriptionsList.vue  | 13 ++--
 .../views/content/libraries/FilesTable.vue    | 24 ++++---
 front/src/views/content/remote/Card.vue       | 18 +++--
 front/src/views/library/DetailBase.vue        | 16 +++--
 front/src/views/library/Edit.vue              | 12 ++--
 front/src/views/playlists/Detail.vue          | 20 +++---
 front/src/views/playlists/List.vue            |  9 ++-
 front/src/views/radios/Detail.vue             | 16 +++--
 58 files changed, 602 insertions(+), 359 deletions(-)
 create mode 100644 front/src/composables/useErrorHandler.ts

diff --git a/front/src/App.vue b/front/src/App.vue
index 4bc357c44..0db4ba1b4 100644
--- a/front/src/App.vue
+++ b/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 Queue from '~/components/Queue.vue'
-import PlaylistModal from '~/components/playlists/PlaylistModal.vue'
+import { useIntervalFn, useToggle, useWindowSize } from '@vueuse/core'
+import { computed, nextTick, onMounted, ref, watchEffect } from 'vue'
+import { useStore } from '~/store'
+
 import ChannelUploadModal from '~/components/channels/UploadModal.vue'
-import Sidebar from '~/components/Sidebar.vue'
-import ServiceMessages from '~/components/ServiceMessages.vue'
-import SetInstanceModal from '~/components/SetInstanceModal.vue'
-import ShortcutsModal from '~/components/ShortcutsModal.vue'
+import PlaylistModal from '~/components/playlists/PlaylistModal.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()
 
diff --git a/front/src/components/SetInstanceModal.vue b/front/src/components/SetInstanceModal.vue
index fb2647cac..b1a9d65a3 100644
--- a/front/src/components/SetInstanceModal.vue
+++ b/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
diff --git a/front/src/components/audio/Search.vue b/front/src/components/audio/Search.vue
index 88f95b863..822963f22 100644
--- a/front/src/components/audio/Search.vue
+++ b/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
diff --git a/front/src/components/audio/album/Widget.vue b/front/src/components/audio/album/Widget.vue
index 2f289b71a..09f66b132 100644
--- a/front/src/components/audio/album/Widget.vue
+++ b/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
diff --git a/front/src/components/audio/artist/Widget.vue b/front/src/components/audio/artist/Widget.vue
index 986c09fee..d8c3c85f6 100644
--- a/front/src/components/audio/artist/Widget.vue
+++ b/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
diff --git a/front/src/components/audio/podcast/Row.vue b/front/src/components/audio/podcast/Row.vue
index 5bee67dc9..32d07c1ec 100644
--- a/front/src/components/audio/podcast/Row.vue
+++ b/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)
   }
 }
 
diff --git a/front/src/components/audio/track/Table.vue b/front/src/components/audio/track/Table.vue
index 40e81d564..6b3d8ac39 100644
--- a/front/src/components/audio/track/Table.vue
+++ b/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
diff --git a/front/src/components/audio/track/Widget.vue b/front/src/components/audio/track/Widget.vue
index 7957d4cde..2f55bdf3d 100644
--- a/front/src/components/audio/track/Widget.vue
+++ b/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
diff --git a/front/src/components/auth/ApplicationEdit.vue b/front/src/components/auth/ApplicationEdit.vue
index bed320d69..b011b721c 100644
--- a/front/src/components/auth/ApplicationEdit.vue
+++ b/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
diff --git a/front/src/components/channels/UploadForm.vue b/front/src/components/channels/UploadForm.vue
index c2d681318..2e30b2355 100644
--- a/front/src/components/channels/UploadForm.vue
+++ b/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)
diff --git a/front/src/components/favorites/List.vue b/front/src/components/favorites/List.vue
index efd7004ee..2e70ea4c3 100644
--- a/front/src/components/favorites/List.vue
+++ b/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 { computed, onMounted, reactive, ref, watch } from 'vue'
-import { useStore } from '~/store'
-import { useGettext } from 'vue3-gettext'
+import useLogger from '~/composables/useLogger'
 
 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
diff --git a/front/src/components/federation/LibraryWidget.vue b/front/src/components/federation/LibraryWidget.vue
index 6360e4046..bfe4cd75e 100644
--- a/front/src/components/federation/LibraryWidget.vue
+++ b/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
diff --git a/front/src/components/library/AlbumBase.vue b/front/src/components/library/AlbumBase.vue
index f603bbee1..00576803e 100644
--- a/front/src/components/library/AlbumBase.vue
+++ b/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 { sum } from 'lodash-es'
+import { momentFormat } from '~/utils/filters'
 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
-    // TODO (wvffle): Handle error
+    useErrorHandler(error as Error)
   }
+
+  isLoading.value = false
 }
 </script>
 
diff --git a/front/src/components/library/Albums.vue b/front/src/components/library/Albums.vue
index afec15546..6fb0d84b5 100644
--- a/front/src/components/library/Albums.vue
+++ b/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')
diff --git a/front/src/components/library/ArtistDetail.vue b/front/src/components/library/ArtistDetail.vue
index 209c415e2..9d2594c92 100644
--- a/front/src/components/library/ArtistDetail.vue
+++ b/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
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index a8ea2a136..b3f24d95e 100644
--- a/front/src/components/library/Artists.vue
+++ b/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')
diff --git a/front/src/components/library/EditCard.vue b/front/src/components/library/EditCard.vue
index 8cc85a89f..79cbb166d 100644
--- a/front/src/components/library/EditCard.vue
+++ b/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
diff --git a/front/src/components/library/EditDetail.vue b/front/src/components/library/EditDetail.vue
index fee742306..016ff13b0 100644
--- a/front/src/components/library/EditDetail.vue
+++ b/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
   }
diff --git a/front/src/components/library/FileUpload.vue b/front/src/components/library/FileUpload.vue
index 059e73948..0c14b2d21 100644
--- a/front/src/components/library/FileUpload.vue
+++ b/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)
   }
 }
 
diff --git a/front/src/components/library/Home.vue b/front/src/components/library/Home.vue
index ceeb1e43a..bbed52395 100644
--- a/front/src/components/library/Home.vue
+++ b/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
diff --git a/front/src/components/library/Podcasts.vue b/front/src/components/library/Podcasts.vue
index e845cc993..aca65a679 100644
--- a/front/src/components/library/Podcasts.vue
+++ b/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')
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index 8045935bc..c9e1265e2 100644
--- a/front/src/components/library/Radios.vue
+++ b/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 $ 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 { onBeforeRouteUpdate, useRouter } from 'vue-router'
 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')
diff --git a/front/src/components/library/TrackBase.vue b/front/src/components/library/TrackBase.vue
index 25aeeb1f4..f6c2c064c 100644
--- a/front/src/components/library/TrackBase.vue
+++ b/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 useReport from '~/composables/moderation/useReport'
-import useLogger from '~/composables/useLogger'
+import { computed, ref, watch } from 'vue'
+import { useGettext } from 'vue3-gettext'
+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
diff --git a/front/src/components/library/TrackDetail.vue b/front/src/components/library/TrackDetail.vue
index 40e2f9a77..a283b7b04 100644
--- a/front/src/components/library/TrackDetail.vue
+++ b/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)
   }
 }
 
diff --git a/front/src/components/library/radios/Filter.vue b/front/src/components/library/radios/Filter.vue
index a846ed644..08ef3eaed 100644
--- a/front/src/components/library/radios/Filter.vue
+++ b/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)
   }
 }
 
diff --git a/front/src/components/manage/ChannelsTable.vue b/front/src/components/manage/ChannelsTable.vue
index 824d0a131..84d89c092 100644
--- a/front/src/components/manage/ChannelsTable.vue
+++ b/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
diff --git a/front/src/components/manage/library/AlbumsTable.vue b/front/src/components/manage/library/AlbumsTable.vue
index 8cda94936..91f9f8c5d 100644
--- a/front/src/components/manage/library/AlbumsTable.vue
+++ b/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
diff --git a/front/src/components/manage/library/ArtistsTable.vue b/front/src/components/manage/library/ArtistsTable.vue
index fa6de0935..df8bee224 100644
--- a/front/src/components/manage/library/ArtistsTable.vue
+++ b/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
diff --git a/front/src/components/manage/library/EditsCardList.vue b/front/src/components/manage/library/EditsCardList.vue
index 604483953..fc88a82b7 100644
--- a/front/src/components/manage/library/EditsCardList.vue
+++ b/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
diff --git a/front/src/components/manage/library/LibrariesTable.vue b/front/src/components/manage/library/LibrariesTable.vue
index 69e70a117..221a7051a 100644
--- a/front/src/components/manage/library/LibrariesTable.vue
+++ b/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
diff --git a/front/src/components/manage/library/TagsTable.vue b/front/src/components/manage/library/TagsTable.vue
index 6ef1af96f..c731ea374 100644
--- a/front/src/components/manage/library/TagsTable.vue
+++ b/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 Pagination from '~/components/vui/Pagination.vue'
-import ActionTable from '~/components/common/ActionTable.vue'
-import ImportStatusModal from '~/components/library/ImportStatusModal.vue'
+import { computed, ref, watch } from '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
diff --git a/front/src/components/manage/library/TracksTable.vue b/front/src/components/manage/library/TracksTable.vue
index e1207b358..386647ea1 100644
--- a/front/src/components/manage/library/TracksTable.vue
+++ b/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
diff --git a/front/src/components/manage/library/UploadsTable.vue b/front/src/components/manage/library/UploadsTable.vue
index b3695c123..3ef750e06 100644
--- a/front/src/components/manage/library/UploadsTable.vue
+++ b/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
diff --git a/front/src/components/manage/moderation/AccountsTable.vue b/front/src/components/manage/moderation/AccountsTable.vue
index b3f6ac5e7..5f7de40d1 100644
--- a/front/src/components/manage/moderation/AccountsTable.vue
+++ b/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
diff --git a/front/src/components/manage/moderation/DomainsTable.vue b/front/src/components/manage/moderation/DomainsTable.vue
index e496442f7..c1a33e118 100644
--- a/front/src/components/manage/moderation/DomainsTable.vue
+++ b/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 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 { watchDebounced } from '@vueuse/core'
 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
diff --git a/front/src/components/manage/moderation/NotesThread.vue b/front/src/components/manage/moderation/NotesThread.vue
index 0b6ee7c94..cd15dc8f6 100644
--- a/front/src/components/manage/moderation/NotesThread.vue
+++ b/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
diff --git a/front/src/components/manage/moderation/ReportCard.vue b/front/src/components/manage/moderation/ReportCard.vue
index cd6996a7e..9652e9c1b 100644
--- a/front/src/components/manage/moderation/ReportCard.vue
+++ b/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 NotesThread from '~/components/manage/moderation/NotesThread.vue'
-import ReportCategoryDropdown from '~/components/moderation/ReportCategoryDropdown.vue'
+import axios from 'axios'
+
 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
diff --git a/front/src/components/manage/moderation/UserRequestCard.vue b/front/src/components/manage/moderation/UserRequestCard.vue
index 7a9ad8079..da2fb91ec 100644
--- a/front/src/components/manage/moderation/UserRequestCard.vue
+++ b/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
diff --git a/front/src/components/manage/users/InvitationsTable.vue b/front/src/components/manage/users/InvitationsTable.vue
index 6c901cee6..ad2c5e4a2 100644
--- a/front/src/components/manage/users/InvitationsTable.vue
+++ b/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
diff --git a/front/src/components/manage/users/UsersTable.vue b/front/src/components/manage/users/UsersTable.vue
index 0191f927b..e23d3dbc7 100644
--- a/front/src/components/manage/users/UsersTable.vue
+++ b/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
diff --git a/front/src/composables/useErrorHandler.ts b/front/src/composables/useErrorHandler.ts
new file mode 100644
index 000000000..85d49ad2b
--- /dev/null
+++ b/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
+  })
+}
diff --git a/front/src/init/sentry.ts b/front/src/init/sentry.ts
index 53f5121a0..b23febd3c 100644
--- a/front/src/init/sentry.ts
+++ b/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([
diff --git a/front/src/store/index.ts b/front/src/store/index.ts
index eb9bdd38e..d890ad0bc 100644
--- a/front/src/store/index.ts
+++ b/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({
diff --git a/front/src/views/Notifications.vue b/front/src/views/Notifications.vue
index cf6429d9f..3f44e7327 100644
--- a/front/src/views/Notifications.vue
+++ b/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>
diff --git a/front/src/views/admin/Settings.vue b/front/src/views/admin/Settings.vue
index ee8c0c1b3..6cdc74db1 100644
--- a/front/src/views/admin/Settings.vue
+++ b/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 { ref, nextTick, onMounted, computed, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import { useGettext } from 'vue3-gettext'
+import useErrorHandler from '~/composables/useErrorHandler'
 
 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
diff --git a/front/src/views/admin/library/TrackDetail.vue b/front/src/views/admin/library/TrackDetail.vue
index 853b5d936..6123e8427 100644
--- a/front/src/views/admin/library/TrackDetail.vue
+++ b/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
diff --git a/front/src/views/admin/moderation/ReportsList.vue b/front/src/views/admin/moderation/ReportsList.vue
index 526860ba8..2d0a4ca74 100644
--- a/front/src/views/admin/moderation/ReportsList.vue
+++ b/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
diff --git a/front/src/views/admin/moderation/RequestsList.vue b/front/src/views/admin/moderation/RequestsList.vue
index 07eb2c088..a6f435c46 100644
--- a/front/src/views/admin/moderation/RequestsList.vue
+++ b/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
diff --git a/front/src/views/auth/ProfileBase.vue b/front/src/views/auth/ProfileBase.vue
index a77e3196c..3fd396ed4 100644
--- a/front/src/views/auth/ProfileBase.vue
+++ b/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
diff --git a/front/src/views/channels/DetailBase.vue b/front/src/views/channels/DetailBase.vue
index 2bf068c45..7a5cc7680 100644
--- a/front/src/views/channels/DetailBase.vue
+++ b/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)
   }
 }
 
diff --git a/front/src/views/channels/SubscriptionsList.vue b/front/src/views/channels/SubscriptionsList.vue
index f114731bb..3e14aa0b6 100644
--- a/front/src/views/channels/SubscriptionsList.vue
+++ b/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 { useGettext } from 'vue3-gettext'
+import SemanticModal from '~/components/semantic/Modal.vue'
+
+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
diff --git a/front/src/views/content/libraries/FilesTable.vue b/front/src/views/content/libraries/FilesTable.vue
index e82ee4ba1..22d47ffcb 100644
--- a/front/src/views/content/libraries/FilesTable.vue
+++ b/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
diff --git a/front/src/views/content/remote/Card.vue b/front/src/views/content/remote/Card.vue
index fffbca3c5..0e11feb6e 100644
--- a/front/src/views/content/remote/Card.vue
+++ b/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)
   }
 }
 
diff --git a/front/src/views/library/DetailBase.vue b/front/src/views/library/DetailBase.vue
index ae4d04334..035b785d4 100644
--- a/front/src/views/library/DetailBase.vue
+++ b/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
diff --git a/front/src/views/library/Edit.vue b/front/src/views/library/Edit.vue
index eaec346ec..ec6791522 100644
--- a/front/src/views/library/Edit.vue
+++ b/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
diff --git a/front/src/views/playlists/Detail.vue b/front/src/views/playlists/Detail.vue
index 32be975df..e525750b1 100644
--- a/front/src/views/playlists/Detail.vue
+++ b/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 { useGettext } from 'vue3-gettext'
-import { useRouter } from 'vue-router'
-import { useStore } from '~/store'
+import TrackTable from '~/components/audio/track/Table.vue'
+import PlayButton from '~/components/audio/PlayButton.vue'
+
+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>
diff --git a/front/src/views/playlists/List.vue b/front/src/views/playlists/List.vue
index 1317d82c8..98994f25b 100644
--- a/front/src/views/playlists/List.vue
+++ b/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')
diff --git a/front/src/views/radios/Detail.vue b/front/src/views/radios/Detail.vue
index 192923988..7657098c5 100644
--- a/front/src/views/radios/Detail.vue
+++ b/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>