Javascript Panel

The module supports logging of javascript errors, warnings and even regular log entries. To activate, register the asset JSLoggingAsset in any of your views:


Or add the asset to your bundle:

class AppAsset extends yii\web\AssetBundle\AssetBundle
    public $depends = [

This will activate the logger automatically. By default all warnings and errors are transmitted to the backend.

This means that the javascript will need an URL to submit its data to.
Usually the module can automatically determine what URL to use.

Should the auto detection fail you can correct the url by updating the setting somewhere in your javascript:

window.auditUrl = '/mymodulename/javascript/log';

(Please also open an issue so we can figure out why the auto-detection failed and hopefully fix it)

What is logged?

The module works by overriding window.onerror. Everything that arrives there is logged. That functionality is active out of the box. This is triggered on for example syntax errors in your javascript.

How to test?

Just introduce a syntax error in your script (forget to close a bracket or something). A logentry should be created.

function test(){

Logging yourself

The component is available as window.jsLogger and provides several functions for custo logging.
By default the functions also call the console, so you still see the messages there. Available functions are, window.jsLogger.log(), window.jsLogger.warn() and window.jsLogger.error(). All functions accept a message and optional data (object) to attach.

Unlike the console functions jsLogger doesn’t accept multiple parameters to output at once. If you need it, feel free to create a PR to add the functionality.

If you do not want the console-functions to be called, set the consoleOutput to false:

window.jsLogger.consoleOutput = false;

Important: By default calls to the info()-function are not sent to the backend but just echoed in the console. If you wish to send info as well, you can do so by simply adding 'info' to the captureTypes-array:


This needs to happen after the logger was actually loaded (probably via document.onready or in $(document).ready())

Custom Capture

If you want to log custom things, you are free to directly call the capture-function directly without using one of the helper functions:

window.jsLogger.capture(string type, string message, object data, string file, integer line, integer col)

You can omit whatever paramters you don’t need.


Imagine the following flow: