Use @nextcloud/logger for frontend logging

.eslintrc.js

@@ -4,5 +4,9 @@ module.exports = {
 	},
 	extends: [
 		'@nextcloud',
-	]
-}
+	],
+	rules: {
+		// We are using the @nextcloud/logger
+		'no-console': ['error', { allow: undefined }],
+	},
+}

package.json

@@ -28,6 +28,7 @@
 		"@nextcloud/dialogs": "^3.1.4",
 		"@nextcloud/event-bus": "^2.1.1",
 		"@nextcloud/initial-state": "^1.2.1",
+		"@nextcloud/logger": "^2.2.1",
 		"@nextcloud/l10n": "^1.6.0",
 		"@nextcloud/moment": "^1.2.1",
 		"@nextcloud/router": "^2.0.0",

src/Forms.vue

@@ -107,6 +107,7 @@ import AppNavigationForm from './components/AppNavigationForm.vue'
 import EmptyContent from './components/EmptyContent.vue'
 import PermissionTypes from './mixins/PermissionTypes.js'
 import OcsResponse2Data from './utils/OcsResponse2Data.js'
+import logger from './utils/Logger.js'
 
 export default {
 	name: 'Forms',
@@ -232,17 +233,17 @@ export default {
 				const response = await axios.get(generateOcsUrl('apps/forms/api/v2/forms'))
 				this.forms = OcsResponse2Data(response)
 			} catch (error) {
+				logger.error('Error while loading owned forms list', { error })
 				showError(t('forms', 'An error occurred while loading the forms list'))
-				console.error(error)
 			}
 
 			// Load shared forms
 			try {
 				const response = await axios.get(generateOcsUrl('apps/forms/api/v2/shared_forms'))
 				this.sharedForms = OcsResponse2Data(response)
 			} catch (error) {
+				logger.error('Error while loading shared forms list', { error })
 				showError(t('forms', 'An error occurred while loading the forms list'))
-				console.error(error)
 			}
 
 			this.loading = false
@@ -265,8 +266,8 @@ export default {
 					this.sharedForms.push(form)
 				}
 			} catch (error) {
+				logger.error(`Form ${hash} not found`, { error })
 				showError(t('forms', 'Form not found'))
-				console.error(error)
 			} finally {
 				this.loading = false
 			}
@@ -284,8 +285,8 @@ export default {
 				this.$router.push({ name: 'edit', params: { hash: newForm.hash } })
 				this.mobileCloseNavigation()
 			} catch (error) {
+				logger.error('Unable to create new form', { error })
 				showError(t('forms', 'Unable to create a new form'))
-				console.error(error)
 			}
 		},
 
@@ -302,8 +303,8 @@ export default {
 				this.$router.push({ name: 'edit', params: { hash: newForm.hash } })
 				this.mobileCloseNavigation()
 			} catch (error) {
+				logger.error(`Unable to copy form ${id}`, { error })
 				showError(t('forms', 'Unable to copy form'))
-				console.error(error)
 			}
 		},
 

src/FormsSettings.vue

@@ -66,6 +66,8 @@ import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwi
 import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
 import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
 
+import logger from './utils/Logger.js'
+
 export default {
 	name: 'FormsSettings',
 
@@ -130,7 +132,7 @@ export default {
 					configValue,
 				})
 			} catch (error) {
-				console.error(error)
+				logger.error('Error while saving configuration', { error })
 				showError(t('forms', 'Error while saving configuration'))
 				await this.reloadAppConfig()
 			}
@@ -144,7 +146,7 @@ export default {
 				const resp = await axios.get(generateUrl('apps/forms/config'))
 				this.appConfig = resp.data
 			} catch (error) {
-				console.error(error)
+				logger.error('Error while reloading config', { error })
 				showError(t('forms', 'Error while reloading config'))
 			}
 		},

src/components/AppNavigationForm.vue

@@ -61,6 +61,8 @@ import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import axios from '@nextcloud/axios'
 import moment from '@nextcloud/moment'
 
+import logger from '../utils/Logger.js'
+
 export default {
 	name: 'AppNavigationForm',
 
@@ -155,8 +157,8 @@ export default {
 				await axios.delete(generateOcsUrl('apps/forms/api/v2/form/{id}', { id: this.form.id }))
 				this.$emit('delete', this.form.id)
 			} catch (error) {
+				logger.error(`Error while deleting ${this.formTitle}`, { error: error.response })
 				showError(t('forms', 'Error while deleting {title}', { title: this.formTitle }))
-				console.error(error.response)
 			} finally {
 				this.loading = false
 			}

src/components/Questions/AnswerInput.vue

@@ -38,6 +38,7 @@ import Actions from '@nextcloud/vue/dist/Components/Actions'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 
 import OcsResponse2Data from '../../utils/OcsResponse2Data.js'
+import logger from '../../utils/Logger.js'
 
 export default {
 	name: 'AnswerInput',
@@ -150,14 +151,14 @@ export default {
 					questionId: answer.questionId,
 					text: answer.text,
 				})
-				console.debug('Created answer', answer)
+				logger.debug('Created answer', { answer })
 
 				// Was synced once, this is now up to date with the server
 				delete answer.local
 				return Object.assign({}, answer, OcsResponse2Data(response))
 			} catch (error) {
+				logger.error('Error while saving answer', { answer, error })
 				showError(t('forms', 'Error while saving the answer'))
-				console.error(error)
 			}
 
 			return answer
@@ -180,10 +181,10 @@ export default {
 						text: answer.text,
 					},
 				})
-				console.debug('Updated answer', answer)
+				logger.debug('Updated answer', { answer })
 			} catch (error) {
+				logger.error('Error while saving answer', { answer, error })
 				showError(t('forms', 'Error while saving the answer'))
-				console.error(error)
 			}
 		},
 	},

src/components/Questions/QuestionDropdown.vue

@@ -90,6 +90,7 @@ import axios from '@nextcloud/axios'
 import AnswerInput from './AnswerInput.vue'
 import QuestionMixin from '../../mixins/QuestionMixin.js'
 import GenRandomId from '../../utils/GenRandomId.js'
+import logger from '../../utils/Logger.js'
 
 export default {
 	name: 'QuestionDropdown',
@@ -285,8 +286,8 @@ export default {
 				// let's not await, deleting in background
 				axios.delete(generateOcsUrl('apps/forms/api/v2/option/{id}', { id: option.id }))
 					.catch(error => {
+						logger.error('Error while deleting an option', { option, error })
 						showError(t('forms', 'There was an issue deleting this option'))
-						console.error(error)
 						// restore option
 						this.restoreOption(option, optionIndex)
 					})

src/components/Questions/QuestionMultiple.vue

@@ -97,6 +97,7 @@ import axios from '@nextcloud/axios'
 import AnswerInput from './AnswerInput.vue'
 import QuestionMixin from '../../mixins/QuestionMixin.js'
 import GenRandomId from '../../utils/GenRandomId.js'
+import logger from '../../utils/Logger.js'
 
 // Implementations docs
 // https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/radio/radio.html
@@ -317,8 +318,8 @@ export default {
 				// let's not await, deleting in background
 				axios.delete(generateOcsUrl('apps/forms/api/v2/option/{id}', { id: option.id }))
 					.catch(error => {
+						logger.error('Error while deleting an option', { error, option })
 						showError(t('forms', 'There was an issue deleting this option'))
-						console.error(error)
 						// restore option
 						this.restoreOption(option, optionIndex)
 					})

src/components/SidebarTabs/SharingSearchDiv.vue

@@ -56,6 +56,7 @@ import debounce from 'debounce'
 
 import OcsResponse2Data from '../../utils/OcsResponse2Data.js'
 import ShareTypes from '../../mixins/ShareTypes.js'
+import logger from '../../utils/Logger.js'
 
 export default {
 	components: {
@@ -210,7 +211,7 @@ export default {
 
 				this.suggestions = exactSuggestions.concat(suggestions)
 			} catch (error) {
-				console.error('Loading Suggestions failed.', error)
+				logger.error('Loading Suggestions failed.', { error })
 			} finally {
 				this.loading = false
 			}
@@ -232,7 +233,7 @@ export default {
 
 				this.recommendations = this.formatSearchResults(OcsResponse2Data(request).exact)
 			} catch (error) {
-				console.error('Fetching recommendations failed.', error)
+				logger.error('Fetching recommendations failed.', { error })
 			} finally {
 				this.loading = false
 			}

src/components/SidebarTabs/SharingSidebarTab.vue

@@ -139,6 +139,7 @@ import SharingShareDiv from './SharingShareDiv.vue'
 import ShareTypes from '../../mixins/ShareTypes.js'
 import ShareLinkMixin from '../../mixins/ShareLinkMixin.js'
 import OcsResponse2Data from '../../utils/OcsResponse2Data.js'
+import logger from '../../utils/Logger.js'
 
 export default {
 	components: {
@@ -201,7 +202,7 @@ export default {
 				this.$emit('add-share', share)
 
 			} catch (error) {
-				console.error(error)
+				logger.error('Error while adding new share', { error, share: newShare })
 				showError(t('forms', 'There was an error while adding the share'))
 			} finally {
 				this.isLoading = false
@@ -222,7 +223,7 @@ export default {
 				this.$emit('add-share', share)
 
 			} catch (error) {
-				console.error(error)
+				logger.error('Error adding public link', { error })
 				showError(t('forms', 'There was an error while adding the link'))
 			} finally {
 				this.isLoading = false
@@ -243,7 +244,7 @@ export default {
 				}))
 				this.$emit('remove-share', share)
 			} catch (error) {
-				console.error(error)
+				logger.error('Error while removing share', { error, share })
 				showError(t('forms', 'There was an error while removing the share'))
 			} finally {
 				this.isLoading = false

src/mixins/QuestionMixin.js

@@ -24,6 +24,7 @@ import { generateOcsUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
 
+import logger from '../utils/Logger.js'
 import Question from '../components/Questions/Question.vue'
 
 export default {
@@ -196,8 +197,8 @@ export default {
 					},
 				})
 			} catch (error) {
+				logger.error('Error while saving question', { error })
 				showError(t('forms', 'Error while saving question'))
-				console.error(error)
 			}
 		},
 	},

src/mixins/ViewsMixin.js

@@ -28,6 +28,7 @@ import Vue from 'vue'
 
 import CancelableRequest from '../utils/CancelableRequest.js'
 import OcsResponse2Data from '../utils/OcsResponse2Data.js'
+import logger from '../utils/Logger.js'
 
 Vue.use(Clipboard)
 
@@ -79,7 +80,7 @@ export default {
 			this.cancelFetchFullForm('New request pending.')
 
 			// Output after cancelling previous request for logical order.
-			console.debug('Loading form', id)
+			logger.debug(`Loading form ${id}`)
 
 			// Create new cancelable get request
 			const { request, cancel } = CancelableRequest(async function(url, requestOptions) {
@@ -94,9 +95,9 @@ export default {
 				this.isLoadingForm = false
 			} catch (error) {
 				if (axios.isCancel(error)) {
-					console.debug('The request for form', id, 'has been canceled.', error)
+					logger.debug(`The request for form ${id} has been canceled`, { error })
 				} else {
-					console.error(error)
+					logger.error(`Unexpected error fetching form ${id}`, { error })
 					this.isLoadingForm = false
 				}
 			} finally {
@@ -116,8 +117,8 @@ export default {
 					},
 				})
 			} catch (error) {
+				logger.error('Error saving form property', { error })
 				showError(t('forms', 'Error while saving form'))
-				console.error(error)
 			}
 		},
 	},

src/utils/Logger.js

@@ -0,0 +1,8 @@
+import { getLoggerBuilder } from '@nextcloud/logger'
+
+const logger = getLoggerBuilder()
+	.setApp('forms')
+	.detectUser()
+	.build()
+
+export default logger

src/views/Create.vue

@@ -142,6 +142,7 @@ import QuestionMultiple from '../components/Questions/QuestionMultiple.vue'
 import QuestionShort from '../components/Questions/QuestionShort.vue'
 import TopBar from '../components/TopBar.vue'
 import ViewsMixin from '../mixins/ViewsMixin.js'
+import logger from '../utils/Logger.js'
 import SetWindowTitle from '../utils/SetWindowTitle.js'
 import OcsResponse2Data from '../utils/OcsResponse2Data.js'
 
@@ -308,7 +309,7 @@ export default {
 				})
 
 			} catch (error) {
-				console.error(error)
+				logger.error('Error while adding new question', { error })
 				showError(t('forms', 'There was an error while adding the new question'))
 			} finally {
 				this.isLoadingQuestions = false
@@ -329,7 +330,7 @@ export default {
 				const index = this.form.questions.findIndex(search => search.id === id)
 				this.form.questions.splice(index, 1)
 			} catch (error) {
-				console.error(error)
+				logger.error(`Error while removing question ${id}`, { error })
 				showError(t('forms', 'There was an error while removing the question'))
 			} finally {
 				this.isLoadingQuestions = false
@@ -349,8 +350,8 @@ export default {
 					newOrder,
 				})
 			} catch (error) {
+				logger.error('Error while saving form', { error })
 				showError(t('forms', 'Error while saving form'))
-				console.error(error)
 			} finally {
 				this.isLoadingQuestions = false
 			}