A TYPO3 Flow Logger Backend to send log the the Chrome Console

The Logger Backend can display your application in the Chrome Console, with the extension "Chrome Logger"., _(*1)

Sample image based on the TYPO3 Neos Demo Site , _(*2)

How to use it ?

You need to configure the Logger Backend in Settings.yaml::, _(*3)

TYPO3:
  Flow:
    log:
      systemLogger:
        backend:
          0: 'TYPO3\Flow\Log\Backend\FileBackend'
          1: 'Ttree\ChromeLogger\Log\Backend\ChromeConsoleBackend'
        backendOptions:
          0:
            logFileURL: '%FLOW_PATH_DATA%Logs/System_Development.log'
            createParentDirectories: TRUE
            severityThreshold: '%LOG_INFO%'
            maximumLogFileSize: 10485760
            logFilesToKeep: 1
            logMessageOrigin: FALSE
          1:
            severityThreshold: '%LOG_CRIT%'

By default the package use a grouped output to show log on mulitple lines:, _(*4)

Default Output , _(*5)

Use it in your own package

You can use the default system logger provided by Flow, but you can also inject the ChomeLoggerServive in your own class., _(*6)

Check the following code for some example:, _(*7)

$this->chromeLoggerInstance->log('Foo');
$this->chromeLoggerInstance->info('Foo');
$this->chromeLoggerInstance->warn('Foo');
$this->chromeLoggerInstance->error('Foo');

// You can group your log entry, groupCollapsed method for a more compact rendering
$this->chromeLoggerInstance->group('String');
$this->chromeLoggerInstance->log('Foo');
$this->chromeLoggerInstance->log(array('Foo'));
$this->chromeLoggerInstance->groupEnd();

$this->chromeLoggerInstance->group('Table');
$this->chromeLoggerInstance->table('Foo');
$this->chromeLoggerInstance->table(array('Foo'));
$this->chromeLoggerInstance->groupEnd();

$this->chromeLoggerInstance->group('Object');
$this->chromeLoggerInstance->log($this->request->getHttpRequest());
$this->chromeLoggerInstance->log(new \DateTime());
$this->chromeLoggerInstance->groupEnd();

Warning: HTTP Header are limited to 256kb, currently if you hit the limit, you wont see any logs in the console., _(*8)

Sample image with more advanced log values , _(*9)

TODO

Feel free to open issue if you need a specific feature and better send a pull request. Here are some idea for future improvements:, _(*10)

Support for exception and backtrace
Add support for Header compression (gzip) to mitigate the 256kb limit (need change in the Chrome extension too)
Better reflexion, maybe