Logger

This is a sample to show how you can use the logger using some of the built-in reporters but also write your own reporter.
To see ConsoleReporter open the developer tools and make sure you have the console configured to show all items.

Custom Log Reporter

This is a demo of the scripts from the documentation page with one added reporter, the BootstrapAlertReporter. To see this in action open the developer the developer tools and look at the Console and Network tabs.
To see the result of using ths ConsoleReporter open the developer tools and make sure you have the console configured to show all items (browser default configurations sometime ignore console.debug).

The BootstrapAlertReporter code

          // This SHOULD NOT BE USED IN PRODUCTION!!!
          // This is a stupid way of building the log list.
          class BootstrapAlertReporter /* implements ILogsReporter */{
            constructor(el) {
              this._el = el;
            }
            register(message/* : LogMessage */) {
              this._el.innerHTML += this.getAlertString(message);
            }

            getAlertString(message) {
              var alertClass = message.level >= 4
                ? 'danger'
                : message.level === 3
                  ? 'warning'
                  : 'info';

              return `
              <div class="alert alert-${alertClass} alert-dismissible fade show" role="alert">
                <strong>${message.message}</strong>
                <pre class="d-block"><code>${JSON.stringify(message, undefined, 2)}</code></pre>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
              </div>
              `;

              return
            }
          }
        

Result