diff --git a/client/package-lock.json b/client/package-lock.json index 5851f199..6194581b 100644 --- a/client/package-lock.json +++ b/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", diff --git a/client/package.json b/client/package.json index 9a6a9e8c..fb771cec 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/@types/vuejs-logger.d.ts b/client/src/@types/vuejs-logger.d.ts deleted file mode 100644 index 298e120b..00000000 --- a/client/src/@types/vuejs-logger.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -import Vue from 'vue'; -import {Log} from "vuejs-logger"; - -declare module 'vue/types/vue' { - interface Vue { - $log: Log - } -} diff --git a/client/src/graphql/cache.js b/client/src/graphql/cache.js index 6e536cef..ad58703f 100644 --- a/client/src/graphql/cache.js +++ b/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? - console.log(`Referencing ${__typename} with ${args.id}`); + log.debug(`Referencing ${__typename} with ${args.id}`); return toReference({ __typename, id: args.id diff --git a/client/src/graphql/client.js b/client/src/graphql/client.js index a8eba91c..a5c36a2d 100644 --- a/client/src/graphql/client.js +++ b/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}`, ), ); diff --git a/client/src/main.js b/client/src/main.js index 13cca147..e5af44b6 100644 --- a/client/src/main.js +++ b/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); - Vue.$log.debug('await redirectStudentsWithoutClass()', await redirectStudentsWithoutClass()); + log.debug('redirecting to join-class', to); + 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(); }); diff --git a/client/src/mixins/add-school-class.js b/client/src/mixins/add-school-class.js index 8a336b09..8012b47b 100644 --- a/client/src/mixins/add-school-class.js +++ b/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 = [ diff --git a/client/src/mixins/update-project-share-state.js b/client/src/mixins/update-project-share-state.js index da9a5960..73a3acda 100644 --- a/client/src/mixins/update-project-share-state.js +++ b/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 = { diff --git a/client/src/pages/article.vue b/client/src/pages/article.vue index 49474e3a..f9e73736 100644 --- a/client/src/pages/article.vue +++ b/client/src/pages/article.vue @@ -32,6 +32,7 @@