Replace logger

client/package-lock.json

@@ -59,6 +59,7 @@
         "jest-transform-stub": "^2.0.0",
         "jest-watch-typeahead": "^2.1.2",
         "lodash": "^4.17.10",
+        "loglevel": "^1.8.0",
         "mini-css-extract-plugin": "^2.4.5",
         "mock-apollo-client": "^1.2.0",
         "node-sass": "^7.0.3",
@@ -86,7 +87,6 @@
         "vue-style-loader": "^3.0.1",
         "vue-template-compiler": "^2.7.13",
         "vue-vimeo-player": "^0.2.2",
-        "vuejs-logger": "1.5.5",
         "vuex": "^3.0.1",
         "webpack": "^5.67.0",
         "webpack-bundle-analyzer": "^4.5.0",
@@ -7945,11 +7945,6 @@
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
       "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ=="
     },
-    "node_modules/es6-object-assign": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
-      "integrity": "sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw=="
-    },
     "node_modules/escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -14491,6 +14486,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/loglevel": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.8.0.tgz",
+      "integrity": "sha512-G6A/nJLRgWOuuwdNuA6koovfEV1YpqqAG4pRUlFaz3jj2QNZ8M4vBqnVA+HBTmU/AMNUtlOsMmSpF6NyOjztbA==",
+      "engines": {
+        "node": ">= 0.6.0"
+      },
+      "funding": {
+        "type": "tidelift",
+        "url": "https://tidelift.com/funding/github/npm/loglevel"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -19741,20 +19748,6 @@
         "vue": "^2.5.17"
       }
     },
-    "node_modules/vuejs-logger": {
-      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/vuejs-logger/-/vuejs-logger-1.5.5.tgz",
-      "integrity": "sha512-wESz1F4KWk98YANEDg2yeS+fpwk2WrR41ZslLfZgTD+EYFm/7VMMUjRThhHT8CCOLOCQdsS4Ge2C9bIs68v8Ww==",
-      "dependencies": {
-        "es6-object-assign": "1.1.0",
-        "vue": "2.6.11"
-      }
-    },
-    "node_modules/vuejs-logger/node_modules/vue": {
-      "version": "2.6.11",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
-      "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
-    },
     "node_modules/vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
@@ -26476,11 +26469,6 @@
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
       "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ=="
     },
-    "es6-object-assign": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
-      "integrity": "sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw=="
-    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -31291,6 +31279,11 @@
         }
       }
     },
+    "loglevel": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.8.0.tgz",
+      "integrity": "sha512-G6A/nJLRgWOuuwdNuA6koovfEV1YpqqAG4pRUlFaz3jj2QNZ8M4vBqnVA+HBTmU/AMNUtlOsMmSpF6NyOjztbA=="
+    },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -35148,22 +35141,6 @@
         "object-assign": "^4.1.1"
       }
     },
-    "vuejs-logger": {
-      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/vuejs-logger/-/vuejs-logger-1.5.5.tgz",
-      "integrity": "sha512-wESz1F4KWk98YANEDg2yeS+fpwk2WrR41ZslLfZgTD+EYFm/7VMMUjRThhHT8CCOLOCQdsS4Ge2C9bIs68v8Ww==",
-      "requires": {
-        "es6-object-assign": "1.1.0",
-        "vue": "2.6.11"
-      },
-      "dependencies": {
-        "vue": {
-          "version": "2.6.11",
-          "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
-          "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
-        }
-      }
-    },
     "vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",

client/package.json

@@ -76,6 +76,7 @@
     "jest-transform-stub": "^2.0.0",
     "jest-watch-typeahead": "^2.1.2",
     "lodash": "^4.17.10",
+    "loglevel": "^1.8.0",
     "mini-css-extract-plugin": "^2.4.5",
     "mock-apollo-client": "^1.2.0",
     "node-sass": "^7.0.3",
@@ -103,7 +104,6 @@
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.7.13",
     "vue-vimeo-player": "^0.2.2",
-    "vuejs-logger": "1.5.5",
     "vuex": "^3.0.1",
     "webpack": "^5.67.0",
     "webpack-bundle-analyzer": "^4.5.0",

client/src/@types/vuejs-logger.d.ts

@@ -1,8 +0,0 @@
-import Vue from 'vue';
-import {Log} from "vuejs-logger";
-
-declare module 'vue/types/vue' {
-  interface Vue {
-    $log: Log
-  }
-}

client/src/graphql/cache.js

@@ -1,4 +1,5 @@
 import {makeVar, InMemoryCache} from '@apollo/client/core';
+import log from 'loglevel';
 
 const showNavigationSidebarVar = makeVar(false);
 const showProfileSidebarVar = makeVar(false);
@@ -7,8 +8,7 @@ const currentFilterVar = makeVar('');
 const helloEmailVar = makeVar('');
 
 const idToRefFactory = (__typename) => (_, {args, toReference}) => {
-  // todo: can we log this via Vue.$log somehow?
+  log.debug(`Referencing ${__typename} with ${args.id}`);
-  console.log(`Referencing ${__typename} with ${args.id}`);
   return toReference({
     __typename,
     id: args.id

client/src/graphql/client.js

@@ -7,6 +7,7 @@ import {
 import {typeDefs} from '@/graphql/typedefs';
 import {resolvers} from '@/graphql/resolvers';
 import cache from './cache';
+import log from 'loglevel';
 
 import {router} from '@/router';
 
@@ -21,10 +22,10 @@ export default function (uri, networkErrorCallback) {
   });
 
   const consoleLink = new ApolloLink((operation, forward) => {
-    console.log('operation', operation.operationName);
+    log.debug('operation', operation.operationName);
 
     return forward(operation).map(data => {
-      console.log(`returned from server for ${operation.operationName}`, data);
+      log.debug(`returned from server for ${operation.operationName}`, data);
       return data;
     });
   });
@@ -49,7 +50,7 @@ export default function (uri, networkErrorCallback) {
 
     if (graphQLErrors) {
       graphQLErrors.forEach(({message, locations, path}) =>
-        console.log(
+        log.warn(
           `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
         ),
       );

client/src/main.js

@@ -13,23 +13,23 @@ import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
 import VueModal from '@/plugins/modal';
 import VueRemoveEdges from '@/plugins/edges';
 import VueMatomo from 'vue-matomo';
-import VueLogger from 'vuejs-logger';
 import { joiningClass, loginRequired, unauthorizedAccess } from '@/router/guards';
 import flavorPlugin from '@/plugins/flavor';
+import log from 'loglevel';
+
+window.log = log; // make log available in app when built, to change log level: log.setLevel('debug')
 
 Vue.config.productionTip = false;
 const isProduction = process.env.NODE_ENV === 'production';
 
+const logLevel = isProduction ? 'error' : 'warn';
+
+log.setDefaultLevel(logLevel);
+
 Vue.use(VueModal);
 Vue.use(VueRemoveEdges);
 Vue.use(VueApollo);
 Vue.use(VueVimeoPlayer);
-Vue.use(VueLogger, {
-  isEnabled: true,
-  logLevel: isProduction ? 'error' : 'debug',
-  stringifyArguments: false,
-  showConsoleColors: true,
-});
 
 Vue.use(VueScrollTo, {
   duration: 500,
@@ -84,16 +84,16 @@ function redirectUsersToOnboarding() {
 
 function networkErrorCallback(statusCode) {
   if (statusCode === 402) {
-    Vue.$log.debug('status code 402, redirecting');
+    log.debug('status code 402, redirecting');
     router.push({name: 'licenseActivation'});
   }
 }
 
 
 router.beforeEach(async (to, from, next) => {
-  Vue.$log.debug('navigation guard called', to, from);
+  log.debug('navigation guard called', to, from);
   if (to.path === '/logout') {
-    Vue.$log.debug('logout', to);
+    log.debug('logout', to);
     publicApolloClient.resetStore();
     if (process.env.LOGOUT_REDIRECT_URL) {
       location.replace(`https://sso.hep-verlag.ch/logout?return_to=${process.env.LOGOUT_REDIRECT_URL}`);
@@ -106,7 +106,7 @@ router.beforeEach(async (to, from, next) => {
   }
 
   if (unauthorizedAccess(to)) {
-    Vue.$log.debug('unauthorized', to);
+    log.debug('unauthorized', to);
     const postLoginRedirectionUrl = to.path;
     const redirectUrl = `/hello/`;
 
@@ -114,32 +114,32 @@ router.beforeEach(async (to, from, next) => {
       localStorage.setItem(postLoginRedirectUrlKey, postLoginRedirectionUrl);
     }
 
-    Vue.$log.debug('redirecting to hello', to);
+    log.debug('redirecting to hello', to);
     next(redirectUrl);
     return;
   }
 
   if (to.name && to.name !== 'licenseActivation' && loginRequired(to) && await redirectUsersWithoutValidLicense()) {
-    Vue.$log.debug('redirecting to licenseActivation', to, null);
+    log.debug('redirecting to licenseActivation', to, null);
     console.log('redirecting to licenseActivation', to, null);
     next({name: 'licenseActivation'});
     return;
   }
 
   if (!joiningClass(to) && loginRequired(to) && await redirectStudentsWithoutClass()) {
-    Vue.$log.debug('redirecting to join-class', to);
+    log.debug('redirecting to join-class', to);
-    Vue.$log.debug('await redirectStudentsWithoutClass()', await redirectStudentsWithoutClass());
+    log.debug('await redirectStudentsWithoutClass()', await redirectStudentsWithoutClass());
     next({name: 'join-class'});
     return;
   }
 
   if ((to.name && to.name.indexOf('onboarding') === -1) && !joiningClass(to) && loginRequired(to) && await redirectUsersToOnboarding()) {
-    Vue.$log.debug('redirecting to onboarding-start', to);
+    log.debug('redirecting to onboarding-start', to);
     next({name: 'onboarding-start'});
     return;
   }
 
-  Vue.$log.debug('End of Guard reached', to);
+  log.debug('End of Guard reached', to);
   next();
 });
 

client/src/mixins/add-school-class.js

@@ -1,11 +1,12 @@
 import ME_QUERY from '@/graphql/gql/queries/meQuery';
+import log from 'loglevel';
 
 export default {
   methods: {
     addSchoolClass(store, schoolClass) {
       const query = ME_QUERY;
       if (schoolClass) {
-        this.$log.debug('updating school class', schoolClass);
+        log.debug('updating school class', schoolClass);
         const  {me} = store.readQuery({query});
         if (me) {
           let schoolClasses = [

client/src/mixins/update-project-share-state.js

@@ -1,5 +1,6 @@
 import UPDATE_PROJECT_SHARED_STATE_MUTATION from '@/graphql/gql/mutations/updateProjectSharedState.gql';
 import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
+import log from 'loglevel';
 
 export default {
   methods: {
@@ -8,7 +9,7 @@ export default {
         slug,
         shared,
       };
-      this.$log.debug('updateProjectShareState', input);
+      log.debug('updateProjectShareState', input);
       this.$apollo.mutate({
         mutation: UPDATE_PROJECT_SHARED_STATE_MUTATION,
         variables: {
@@ -22,7 +23,7 @@ export default {
             };
 
             const {project} = store.readQuery({query, variables});
-            this.$log.debug(`updating project ${project.id} ${project.title}`);
+            log.debug(`updating project ${project.id} ${project.title}`);
 
             if (project) {
               const data = {

client/src/pages/article.vue

@@ -32,6 +32,7 @@
 
 <script>
   import UserMetaWidget from '@/components/UserMetaWidget';
+  import log from 'loglevel';
 
   import ROOM_ENTRY_QUERY from '@/graphql/gql/queries/roomEntryQuery.gql';
   import ADD_COMMENT_MUTATION from 'gql/mutations/addComment.gql';
@@ -80,12 +81,12 @@
 
     methods: {
       createComment(text) {
-        this.$log.debug(`createComment ${text}`);
+        log.debug(`createComment ${text}`);
         const input = {
               roomEntry: this.roomEntry.id,
               comment: text,
             };
-        this.$log.debug(`input `, input);
+        log.debug(`input `, input);
         this.$apollo.mutate({
           mutation: ADD_COMMENT_MUTATION,
           variables: {

client/src/pages/joinClass.vue

@@ -14,6 +14,7 @@
 <script>
   import JOIN_CLASS_MUTATION from '@/graphql/gql/mutations/joinClass.gql';
   import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/queries/mySchoolClass';
+  import log from 'loglevel';
 
   import addSchoolClass from '@/mixins/add-school-class';
   import logout from '@/mixins/logout';
@@ -35,7 +36,7 @@
         this.error = '';
       },
       joinClass(code) {
-        this.$log.debug('joining class');
+        log.debug('joining class');
         this.$apollo.mutate({
             mutation: JOIN_CLASS_MUTATION,
             variables: {
@@ -45,7 +46,7 @@
             },
             update: (store, {data: {joinClass: {schoolClass}}}) => {
               this.addSchoolClass(store, schoolClass);
-              this.$log.debug('added school class');
+              log.debug('added school class');
               this.$router.push({name: 'my-class'});
             },
             refetchQueries: [{query: MY_SCHOOL_CLASS_QUERY}],

client/src/pages/module/module.vue

@@ -9,6 +9,7 @@
 
 <script>
   import Module from '@/components/modules/Module';
+  import log from 'loglevel';
 
   import UPDATE_LAST_MODULE_MUTATION from '@/graphql/gql/mutations/updateLastModule.gql';
   import UPDATE_MODULE_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateModuleBookmark.gql';
@@ -53,7 +54,7 @@
           },
           result({data: {module: {id}}}) {
             if (!this.updateSent) {
-              this.$log.debug(`=== updating result for module ${id} ===`);
+              log.debug(`=== updating result for module ${id} ===`);
               this.updateLastVisitedModule(id);
               this.updateSent = true;
             }
@@ -68,14 +69,14 @@
 
     methods: {
       updateLastVisitedModule(moduleId) {
-        this.$log.debug(`updating last visited module for module ${moduleId}`);
+        log.debug(`updating last visited module for module ${moduleId}`);
         if (!moduleId) {
-          this.$log.warn('no module id');
+          log.warn('no module id');
           return;
         }
 
         if (this.me.lastModule && this.me.lastModule.id === moduleId) {
-          this.$log.debug('same module already set as last module');
+          log.debug('same module already set as last module');
           return;
         }
 
@@ -88,7 +89,7 @@
           },
           update: (store, {data: {updateLastModule: {lastModule}}}) => {
             const {id, slug} = lastModule;
-            this.$log.debug('updating last module', id, slug);
+            log.debug('updating last module', id, slug);
             const query = ME_QUERY;
             let {me} = store.readQuery({
               query,

client/src/pages/studentSubmission.vue

@@ -48,6 +48,7 @@
   import {newLineToParagraph} from '@/helpers/text';
   import debounce from 'lodash/debounce';
   import cloneDeep from 'lodash/cloneDeep';
+  import log from 'loglevel';
 
   import StudentSubmissionDocument from '@/components/StudentSubmissionDocument';
   import STUDENT_SUBMISSIONS_QUERY from '@/graphql/gql/queries/studentSubmissionQuery.gql';
@@ -165,7 +166,7 @@
       },
       update({withText, text, final}) {
         if (this.readOnly) {
-          this.$log.debug('read-only');
+          log.debug('read-only');
           return;
         }
         let mutation = withText ? UPDATE_FEEDBACK_WITH_TEXT_MUTATION : UPDATE_FEEDBACK_MUTATION;
@@ -184,7 +185,7 @@
         });
       },
       create() {
-        this.$log.debug('create');
+        log.debug('create');
         this.update({
           withText: true,
           text: '',
@@ -192,7 +193,7 @@
         });
       },
       turnIn() {
-        this.$log.debug('turnIn');
+        log.debug('turnIn');
         this.update({
           withText: true,
           text: this.studentSubmission.submissionFeedback.text,
@@ -200,7 +201,7 @@
         });
       },
       reopen() {
-        this.$log.debug('reopen');
+        log.debug('reopen');
         if (!this.studentSubmission.id) {
           return;
         }