amos-ionic-logging

<!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>ionic-logging-service</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="./images/favicon.ico"> <link rel="stylesheet" href="./styles/style.css"> </head> <body> <div class="navbar navbar-default navbar-fixed-top visible-xs"> <a href="./" class="navbar-brand">ionic-logging-service</a> <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button> </div> <div class="xs-menu menu" id="mobile-menu"> <div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu> </div> <div class="container-fluid main"> <div class="row main"> <div class="hidden-xs menu"> <compodoc-menu mode="normal"></compodoc-menu> </div>  <div class="content getting-started"> <div class="content-data"> <h1 id="ionic-logging-service">ionic-logging-service</h1> <p><strong>The dependencies used by the latest version are the same as needed for <a href="https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md">Ionic 5.0.0</a>. For older versions use:</strong></p> <table class="table table-bordered compodoc-table"> <thead> <tr> <th>ionic-logging-service</th> <th>Ionic</th> <th>Angular</th> </tr> </thead> <tbody> <tr> <td>9.0.0</td> <td>>= 5.0.0</td> <td>^9.0.0</td> </tr> <tr> <td>8.0.0</td> <td>>= 4.7.0</td> <td>^8.0.0</td> </tr> <tr> <td>7.0.0</td> <td>>= 4.0.0-rc</td> <td>^7.0.0</td> </tr> <tr> <td>6.0.0</td> <td>>= 4.0.0-beta</td> <td>^6.0.0</td> </tr> <tr> <td>5.1.0</td> <td>>= 3.9.0</td> <td>^5.0.0</td> </tr> <tr> <td>3.1.0</td> <td>>= 3.0.0</td> <td>^4.0.0</td> </tr> <tr> <td>2.0.0</td> <td>>= 2.2.0</td> <td>^2.4.8</td> </tr> <tr> <td>1.2.1</td> <td>>= 2.0.0</td> <td>^2.2.1</td> </tr> </tbody> </table> <p>This service encapsulates <a href="http://log4javascript.org/">log4javascript</a>'s functionalities for apps built with <a href="http://ionicframework.com">Ionic framework</a>.</p> <p>For a sample, just have a look at <a href="https://github.com/Ritzlgrmft/ionic-logging-viewer">ionic-logging-viewer</a>.</p> <h2 id="usage">Usage</h2> <p>First, you need to import the <code>LoggingServiceModule</code> in your <code>AppModule</code>. The next step is typically the configuration (see below). And then, finally, you can use the <code>LoggingService</code> in your code, e.g.:</p> <div><pre class="line-numbers"><code class="language-TypeScript">import { Logger, LoggingService } from "ionic-logging-service"; export class MyComponent { private logger: Logger; constructor( loggingService: LoggingService) { this.logger = loggingService.getLogger("MyApp.MyComponent"); const methodName = "ctor"; this.logger.entry(methodName); ... this.logger.exit(methodName); } public myMethod(index: number, message: string): number[] { const methodName = "myMethod"; this.logger.entry(methodName, index, number); try { ... } catch (e) { this.logger.error(methodName, "some error", e); } this.logger.exit(methodName); return result; } }</code></pre></div><p>Depending how the code is called, this could produce the following output in the browser's console:</p> <div><pre class="line-numbers"><code class="language-text">I 18:49:43.794 MyApp.MyComponent ctor entry I 18:49:43.797 MyApp.MyComponent ctor exit I 18:49:43.801 MyApp.MyComponent myMethod entry 42 Hello E 18:49:43.814 MyApp.MyComponent myMethod some error I 18:49:43.801 MyApp.MyComponent myMethod exit [2, 5, 99]</code></pre></div><h2 id="logger">Logger</h2> <p>A logger is the component responsible for logging. Typically, you have one logger per every class. The logger name describe the place where in your app the class is placed. The single parts are separated by dots ('.'). This is quite the same as with namespaces in dotnet or packages in Java.</p> <p>This builds some kind of hierarchy. E.g., if you have a logger named <code>A.B.C.D</code>, you get automatically also loggers for <code>A.B.C</code>, <code>A.B</code> and <code>A</code>. Additionally, there is the so-called root logger, which is the parent of all other loggers.</p> <p>The hierarchy is important, since the loggers inherit the log level from there parent - if there is no other level defined. That means, you can define just one log level for the complete app (by setting the root logger's level), and you can par example define, you do not want to see logs written for logger <code>A.B.C</code> (this includes also <code>A.B.C.D</code>).</p> <h2 id="level">Level</h2> <p>Every log message has a level. This is the severity of the message. Available levels are <code>TRACE</code>, <code>DEBUG</code>, <code>INFO</code>, <code>WARN</code>, <code>ERROR</code> and <code>FATAL</code> - these correspond to the logging methods <code>trace</code>, <code>debug</code>, <code>info</code>, <code>warn</code>, <code>error</code> and <code>fatal</code> of <code>Logger</code>. Levels are ordered as follows: <code>TRACE</code> < <code>DEBUG</code> < <code>INFO</code> < <code>WARN</code> < <code>ERROR</code> < <code>FATAL</code>. This means the <code>FATAL</code> is the most severe and <code>TRACE</code> the least. Also included are levels called <code>ALL</code> and <code>OFF</code> intended to enable or disable all logging respectively.</p> <p>Setting a level to a logger disables log messages of severity lower than that level. For instance, if a level of <code>INFO</code> is set on a logger then only log messages of severity <code>INFO</code> or greater will be logged, meaning <code>DEBUG</code> and <code>TRACE</code> messages will not be logged.</p> <h2 id="appender">Appender</h2> <p>Appenders make the logs visible, e.g. by writing them to the browser's console. This is quite useful during development, either in console or using <code>ionic serve --consolelogs</code>. But later, you will need other logs:</p> <ul> <li><code>AjaxAppender</code>: sends the log messages to a backend server</li> <li><code>MemoryAppender</code>: keeps the log messages in memory</li> <li><code>LocalStorageAppender</code>: stores the log messages in local storage</li> </ul> <p>If you want to see a complete example, have a look at <a href="https://github.com/Ritzlgrmft/ionic-feedback-sample">ionic-feedback-sample</a>.</p> <h2 id="configuration">Configuration</h2> <p>By default, the following configuration is used:</p> <ul> <li><p>Logger:</p> <ul> <li>root: <code>Level.WARN</code></li> </ul> </li> <li><p>Appender:</p> <ul> <li><code>BrowserConsoleAppender</code></li> <li><code>MemoryAppender</code></li> </ul> </li> </ul> <p>To change it, just call <code>configure()</code>. This method takes an object of type <code>LoggingConfiguration</code>.</p> <p>The recommended way is to place the configuration in <code>environment.ts</code>:</p> <div><pre class="line-numbers"><code class="language-TypeScript">export const environment = { logging: { ... } };</code></pre></div><p>Call <code>configure()</code> in your <code>app.module.ts</code>:</p> <div><pre class="line-numbers"><code class="language-TypeScript">export function configureLogging(loggingService: LoggingService): () => void { return () => loggingService.configure(environment.logging); } @NgModule({ ... imports: [ ... LoggingServiceModule ], providers: [ { deps: [LoggingService], multi: true, provide: APP_INITIALIZER, useFactory: configureLogging } ] }) export class AppModule { }</code></pre></div><h3 id="loglevels">logLevels</h3> <p><code>logLevels</code> gets an array of log level definitions for different loggers, e.g.</p> <div><pre class="line-numbers"><code class="language-JavaScript">{ "logLevels": [ { "loggerName": "root", "logLevel": "DEBUG" }, { "loggerName": "MyApp.MyNamespace.MyLogger", "logLevel": "INFO" } ] };</code></pre></div><p>That means, instead of the default log level <code>WARN</code>, you want to log all messages with level <code>DEBUG</code> and higher. Only for <code>MyApp.MyNamespace.MyLogger</code>, you want to restrict the level to <code>INFO</code>.</p> <h3 id="ajaxappender">ajaxAppender</h3> <p>With <code>ajaxAppender</code>, you add an additional appender of type <code>AjaxAppender</code>, which sends the log messages to a backend server.</p> <h3 id="browserconsoleappender">browserConsoleAppender</h3> <p>With <code>browserConsoleAppender</code>, it is possible to configure the <code>BrowserConsoleAppender</code>, which writes the log to the browser's console.</p> <h3 id="localstorageappender">localStorageAppender</h3> <p>With <code>localStorageAppender</code>, you add an additional appender of type <code>LocalStorageAppender</code>, which stores log messages in the local storage.</p> <h3 id="memoryappender">memoryAppender</h3> <p>With <code>memoryAppender</code>, it is possible to configure the <code>MemoryAppender</code>, which keeps log messages in the memory.</p> <h2 id="api">API</h2> <p>see <a href="https://ritzlgrmft.github.io/ionic-logging-service//service/index.html">API documentation</a>.</p> </div><div class="search-results"> <div class="has-results"> <h1 class="search-results-title"><span class='search-results-count'></span> result-matching "<span class='search-query'></span>"</h1> <ul class="search-results-list"></ul> </div> <div class="no-results"> <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1> </div> </div> </div>  </div> </div> <script> var COMPODOC_CURRENT_PAGE_DEPTH = 0; var COMPODOC_CURRENT_PAGE_CONTEXT = 'getting-started'; var COMPODOC_CURRENT_PAGE_URL = 'index.html'; var MAX_SEARCH_RESULTS = 15; </script> <script src="./js/libs/custom-elements.min.js"></script> <script src="./js/libs/lit-html.js"></script>  <script src="./js/libs/custom-elements-es5-adapter.js" charset="utf-8" defer></script> <script src="./js/menu-wc.js" defer></script> <script src="./js/libs/bootstrap-native.js"></script> <script src="./js/libs/es6-shim.min.js"></script> <script src="./js/libs/EventDispatcher.js"></script> <script src="./js/libs/promise.min.js"></script> <script src="./js/libs/zepto.min.js"></script> <script src="./js/compodoc.js"></script> <script src="./js/tabs.js"></script> <script src="./js/menu.js"></script> <script src="./js/libs/clipboard.min.js"></script> <script src="./js/libs/prism.js"></script> <script src="./js/sourceCode.js"></script> <script src="./js/search/search.js"></script> <script src="./js/search/lunr.min.js"></script> <script src="./js/search/search-lunr.js"></script> <script src="./js/search/search_index.js"></script> <script src="./js/lazy-load-graphs.js"></script> </body> </html>