axios logs

src/logger.ts

@@ -0,0 +1,8 @@
+import log from "loglevel";
+import { apply, reg } from "loglevel-plugin-prefix";
+
+export function initLogger() {
+    log.setLevel(process.env.NODE_ENV === 'production' ? 'info' : 'trace');
+    reg(log);
+    apply(log, {template: '[%t] %l:'});
+}

src/main.ts

@@ -3,9 +3,12 @@ import { createPinia } from 'pinia';
 import { createApp } from 'vue';
 import { createRouter, createWebHistory } from 'vue-router';
 import App from './App.vue';
+import { initLogger } from './logger';
 import { routes } from './routes';
 import './style.css';
 
+initLogger();
+
 const app = createApp(App);
 const pb = providePocketBase(app);
 const pinia = createPinia();

src/service.ts

@@ -1,4 +1,16 @@
-import axios from 'axios';
+import axios, { AxiosInstance } from 'axios';
+import log from 'loglevel';
+
+
+const logResource = (a: AxiosInstance) => {
+    a.interceptors.response.use(r => {
+        log.debug(`[${r.config.method?.toUpperCase()}] ${r.config.url}`);
+        return r;
+    }, e => {
+        log.error(`[${e.config.method?.toUpperCase()}] ${e.config.url} failed with ${e.response?.status} ${e.response?.statusText}`);
+        return Promise.reject(e);
+    });
+}
 
 export const apiAxiosInstance = axios.create({
     baseURL: '/api/',
@@ -7,6 +19,7 @@ export const apiAxiosInstance = axios.create({
         "Content-Type": "application/json"
     },
 })
+logResource(apiAxiosInstance)
 
 export const evepraisalAxiosInstance = axios.create({
     baseURL: '/appraisal/',
@@ -15,6 +28,7 @@ export const evepraisalAxiosInstance = axios.create({
         "Content-Type": "application/json"
     },
 })
+logResource(evepraisalAxiosInstance)
 
 export const esiAxiosInstance = axios.create({
     baseURL: '/esi/',
@@ -23,3 +37,4 @@ export const esiAxiosInstance = axios.create({
         "Content-Type": "application/json"
     },
 })
+logResource(esiAxiosInstance)