Identify logger for Ionic Vue applications

[alsoK2maan]

What is logging?

Logging is the process of recording some detail about application behaviour and storing it in a persistent medium.

Simply put, it is the process of recording relevant data in a store. That data can be information about usage patterns, activities, and operations within an application, or server, etc.

Types

Logs can be of multiple types, each pertaining to a different use case-

• Event logs- Record events taking place in an application or system and provide a trail to understand the activity of that system and better debug it.
• Transaction logs- Database systems keep transaction logs that record changes made to the stored data and hence, provide recovery means if crashes and errors happen
• Message logs- Textual communication between clients (users) in an app (chat app, games, etc), saved in logs.
• Serve logs- Logs recorded and maintained by a server consisting of a list of activities it performed.

Why do we need logging?

Reasons why logging is important-

• Helps to troubleshoot bugs- Logging makes it easier to identify and resolve bugs as logs provide an idea of why the application broke. Through logs, the developer can easily replicate the error by seeing the activity logged.
• Improves monitoring in production environments- Logging information for apps in production can provide useful information in development as well as the business aspect. For instance, one can monitor the user's flow of using the app, peak user activity time through timestamps in logs, etc.
• Makes debugging easier- The debugging process gets easier as the developer gets an overall view of what is happening where, through logs, cutting the debugging time.

References-

• https://en.wikipedia.org/wiki/Logging_(software)
• https://www.becomebetterprogrammer.com/why-does-writing-logs-is-more-important-than-what-you-think-in-software-development/

[alsoK2maan]

Log levels

Labels that indicate the severity of a log entry and hence, help in classifying its urgency are termed log levels. They serve on multiple grounds such as separating messages that are just informational from fatal ones, that describe a problem and controlling the application's volume of log output.

Log levels were initially developed in the 1980s by Syslog, a logging solution for the Sendmail project. The severity levels defined by the project later became a standard for logging.

Common log levels

Log levels vary depending on the programming language and framework one is using. Following are the common ones-

1. FATAL- The FATAL log level represents messages with the greatest severity. It usually means that something critical is broken, and the application cannot continue to do any more useful work without the fix. Examples of situations may be DB failure or running out of disk space on the server.

2. ERROR- The ERROR log level is used to represent error conditions in an application that prevent a specific operation from running but doesn't mean the application itself will stop working like in FATAL. Examples may include some services not working or some resources not loading.

3. WARN- The WARN log shows that something unexpected has occurred, yet the application will run as usual. It is mainly used to draw attention to issues that might turn into problems if not checked. Examples can be uncalled resource usage causing the app to slow down.

4. INFO- The INFO level logs simply state what happened in the application. They are used to indicate useful insights from the business perspective. Examples can be logging a successful job execution or status change.

5. DEBUG- The DEBUG level is used for logging messages that help developers to diagnose, troubleshoot, or test an application.

6. TRACE- The TRACE level tracks down the path of code execution. It is mainly used to understand the flow of the program and tackle issues like errors, crashes, etc.

References

• https://betterstack.com/community/guides/logging/log-levels-explained/

[alsoK2maan]

Logging for front-end apps

Front-end applications have gone very complex with time, the developer has to manage state, API calls, visibility, platforms, browser support, etc thus, generating multiple opportunities for something to go wrong.

Need for logging

• Logging on the front end gives a view of what's happening to the client, including error cases or untested issues.
• In case of failure in production, the front-end dev won't get the full picture due to a lack of logging info, hence, making it challenging to debug and fix the issue.
• Developers are dependent on browser logs and the reported errors for identifying problems.

References

• https://thenewstack.io/why-frontend-developers-need-logs-too/

[alsoK2maan]

Findings on-

Node libraries for logging

Tested on numerous popular logging libraries available for Node.js, such as Winston, log4js (log4js-node), and Morgan.

Node-based libraries won't be of any use as polyfills for core node modules like HTTP, path, OS, etc are not available in the browser or in the module bundler (webpack). Hence, won't work on the browser (client) environment.

Browser log when using log4js in the Ionic-SDK app-

log4js (client based)

log4js is available for core JavaScript apps only as it does not have an npm package available for use. One needs to download and set up a min.js file for usage.

loglevel and loglevel-plugin-remote

loglevel and loglevel-plugin-remote are client-based logging libraries that provide services respectively for logging and posting logs remotely.

POC for the usage- https://github.com/hotwax/ionic-sdk/pull/65/

vue-logger-plugin

vue-logger-plugin is a vue-specific library that provides browser logging service and aids in sharing the logs to the server.

POC for the usage- https://github.com/hotwax/ionic-sdk/pull/67

[ymaheshwari1]

Reference issue on winston js: https://github.com/winstonjs/winston/issues/287

Another library that can be used for logging: https://www.npmjs.com/package/bunyan https://github.com/farpoint/meteor-winston-client

[alsoK2maan]

Reference issue on winston js: winstonjs/winston#287

Another library that can be used for logging: https://www.npmjs.com/package/bunyan https://github.com/farpoint/meteor-winston-client

Sir, the meteor-wintston-client requires winston to be set up, hence, the problem again boils down to the inability to use node-based libraries. The same goes for bunyan.

[adityasharma7]

Checkout libraries in below link:

https://www.npmjs.com/search?q=keywords%3ABrowser+logger

We should definitely check: loglevelnext https://www.npmjs.com/package/loglevelnext This project originated as a fork of the much-loved loglevel module, but has diverged and has been rewritten, and now shares similarities only in functional intent.

[adityasharma7]

Adding some more Vue Libraries explored:

vue-pretty-logger License: MIT Last publish: 5 years ago

vuex-action-logger License: ISC Last publish: 6 years ago

vue-debug License: MIT Last publish: 9 years ago

vue-bunyan-logger License: MIT Last publish: 5 years ago

vue-raven License: MIT Last publish: 4 years ago

vuejs-logger License: MIT Last publish: 2 years ago

[alsoK2maan]

Thank you, sir. Will explore these.

[adityasharma7]

Sending the logs to the server is a crucial feature. loglevel is quite popular library and could be the first choice but as the loglevel-plugin-remote is not maintained (last release in 2017 ) we chose to go with vue-logger-plugin https://github.com/kutuluk/loglevel-plugin-remote

[adityasharma7]

Initial implementation is done, and applied to Job Manager. Closing this as will have a separate ticket for server side implementation