Add an axios global error handler to warn on session expired

Compile assets

Also handle 419 errors

Compile assets

Closes #966

dist/assets/admin/twill-manifest.json

@@ -12,19 +12,19 @@
   "Inter-Regular.woff": "/assets/admin/fonts/Inter-Regular.aebfbb3c.woff",
   "Inter-Regular.woff2": "/assets/admin/fonts/Inter-Regular.bffaed79.woff2",
   "chunk-common.css": "/assets/admin/css/chunk-common.40f7224b.css",
-  "chunk-common.js": "/assets/admin/js/chunk-common.f623f8e0.js",
+  "chunk-common.js": "/assets/admin/js/chunk-common.45dd7aca.js",
   "chunk-vendors.css": "/assets/admin/css/chunk-vendors.e0f3ef32.css",
   "chunk-vendors.js": "/assets/admin/js/chunk-vendors.750de529.js",
   "icons-files.php": "/views/partials/icons/icons-files-svg.blade.php",
   "icons-wysiwyg.php": "/views/partials/icons/icons-wysiwyg-svg.blade.php",
   "icons.php": "/views/partials/icons/icons-svg.blade.php",
   "main-buckets.css": "/assets/admin/css/main-buckets.b3760912.css",
-  "main-buckets.js": "/assets/admin/js/main-buckets.6cc7c1aa.js",
+  "main-buckets.js": "/assets/admin/js/main-buckets.5590f8ca.js",
   "main-dashboard.css": "/assets/admin/css/main-dashboard.7e178125.css",
-  "main-dashboard.js": "/assets/admin/js/main-dashboard.a2913c13.js",
+  "main-dashboard.js": "/assets/admin/js/main-dashboard.fc57884f.js",
   "main-form.css": "/assets/admin/css/main-form.34549069.css",
-  "main-form.js": "/assets/admin/js/main-form.89cd1411.js",
+  "main-form.js": "/assets/admin/js/main-form.3d12537f.js",
   "main-free.js": "/assets/admin/js/main-free.75070804.js",
   "main-listing.css": "/assets/admin/css/main-listing.32e2c205.css",
-  "main-listing.js": "/assets/admin/js/main-listing.5407bbfd.js"
+  "main-listing.js": "/assets/admin/js/main-listing.609e7b17.js"
 }

frontend/js/plugins/A17Config.js

@@ -34,6 +34,9 @@ import a17DatePicker from '@/components/DatePicker.vue'
 // Media Library
 import a17MediaLibrary from '@/components/media-library/MediaLibrary.vue'
 
+// Error handler
+import { globalError } from '@/utils/errors'
+
 // Plugins
 import VueTimeago from 'vue-timeago'
 import get from 'lodash/get'
@@ -113,6 +116,12 @@ const A17Config = {
 
     axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
 
+    axios.interceptors.response.use((response) => response, (error) => {
+      globalError('CONTENT', error)
+
+      return Promise.reject(error)
+    })
+
     // Plugins
     Vue.use(VueTimeago, {
       name: 'timeago', // component name

frontend/js/utils/errors.js

@@ -7,13 +7,17 @@ export function globalError (component = null, error = { message: '', value: nul
 
   const errorMessage = prefix + error.message
 
+  const statusCode = error?.value?.response?.status ?? error?.response?.status ?? null
+
   console.error(errorMessage)
 
-  if (error.value && error.value.response) {
-    console.error(error.value.response.data)
+  if (error?.value && error.value?.response) {
+    console.error(error.value.response?.data)
   }
 
-  if ('response' in error.value && 'status' in error.value.response && error.value.response.status === 401) {
+  // Error 401 = session expired / not authenticated
+  // Error 419 = CSRF token mismatched
+  if (statusCode === 401 || statusCode === 419) {
     window[process.env.VUE_APP_NAME].vm.notif({
       message: 'Your session has expired, please <a href="' + document.location + '" target="_blank">login in another tab</a>. You can then continue working here.',
       variant: 'warning'