nelmio/js-logger-bundle

Adds logging of JS errors in your Symfony application

1.10.1 2024-07-05 06:59 UTC

Requires

• php: >=7.2.5
• ext-json: *
• psr/log: ^1.0 || ^2.0 || ^3.0
• symfony/config: ^4.4 || ^5.3 || ^6.0 || ^7.0
• symfony/dependency-injection: ^4.4 || ^5.3 || ^6.0 || ^7.0
• symfony/http-foundation: ^4.4 || ^5.3 || ^6.0 || ^7.0
• symfony/http-kernel: ^4.4 || ^5.3 || ^6.0 || ^7.0
• symfony/routing: ^4.4 || ^5.3 || ^6.0 || ^7.0

Requires (Dev)

• twig/twig: ^1.40 || ^2.10 || ^3.0

MIT

• Nelmio
• Symfony Community

• log
• logging
• javascript
• JS

README

The NelmioJsLoggerBundle bundle allows you to log errors happening in the frontend.

Installation

Require the nelmio/js-logger-bundle package in your composer.json and update your dependencies.

$ composer require nelmio/js-logger-bundle

Register the bundle in app/AppKernel.php:

// app/AppKernel.php
public function registerBundles()
{
    return array(
        // ...
        new Nelmio\JsLoggerBundle\NelmioJsLoggerBundle(),
    );
}

Import the bundle's routing definition in app/config/routing.yml:

# app/config/routing.yml
NelmioJsLoggerBundle:
    resource: "@NelmioJsLoggerBundle/Resources/config/routing.xml"
    prefix:   /nelmio-js-logger

Automated Error Logging

The bundle exposes two twig functions that you should put in your site template somewhere.

To enable automatic logging of javascript errors, use nelmio_js_error_logger():

{{ nelmio_js_error_logger() }}

You can optionally change the level (default is ERROR) and remove the surrounding <script>..</script> tags - don't forget to add them manually!:

<script>
    {{ nelmio_js_error_logger('WARNING', false) }}
</script>

You can also optionally give some extra context information by defining a global window.nelmio_js_logger_custom_context in the page:

<script>
    window.nelmio_js_logger_custom_context = { userinfo: 'some info', appinfo: 'another useful info' };
    {{ nelmio_js_error_logger('ERROR', false) }}
</script>

Manual Logging from JavaScript

To expose the log() function to your JS code, use nelmio_js_logger():

{{ nelmio_js_logger() }}

You can also change the function name if log is too generic for you:

{{ nelmio_js_logger('my_log_function') }}

The function signature is as such: log(level, message, context). The level and message are mandatory. The context is a data object that can contain any additional details you want to store.

Configuration

You can restrict the logging levels accessible from javascript. The point is that if some of your logging levels email you or notify you in some way, you probably do not want to allow anyone to send requests and wake you up at 2AM.

Here is the default configuration that exposes all levels:

# app/config/config.yml
nelmio_js_logger:
    allowed_levels: ['DEBUG', 'INFO', 'NOTICE', 'WARNING', 'ERROR', 'CRITICAL', 'ALERT', 'EMERGENCY']

You can also restrict the logging by ignoring some messages or scripts URLs with this configuration:

# app/config/config.yml
nelmio_js_logger:
    ignore_messages:
        - originalCreateNotification
    ignore_url_prefixes:
        - https://graph.facebook.com

The URL matches as a prefix to the script URL, and the message will match if the ignored string is found anywhere in the message.

Optional: Log the whole javascript stack trace with Stacktrace.js

Stacktrace.js is a small js-library to create javascript stack traces anywhere.

# app/config/config.yml
nelmio_js_logger:
    use_stacktrace_js: ~

If stacktrace.js is loaded before an error occurs, an array with stack trace information (file, line, column) will be logged additionally to the other information.

By default, the stacktracejs javascript file is loaded from https://cdnjs.cloudflare.com/ajax/libs/stacktrace.js/1.3.1/stacktrace.min.js you can change this by setting the path value in the config.yml

# app/config/config.yml
nelmio_js_logger:
    use_stacktrace_js: 
        path: 'your-url-for-stacktracejs'

Properly tracking scripts in other domains

If an error occurs in a script from another domain, browser same origin policy will make it to be logged with a generic message, file and line number (like Script error. {"file":"","line":"0", ...}). To properly track these scripts move them to your domain or load them using CORS:

<script src="//code.jquery.com/jquery-1.9.0.min.js" crossorigin></script>

Note that browser support for <script crossorigin> varies:

As of this writing, only Firefox supports reporting errors for cross-domain scripts. All WebKit browsers including Chrome is expected to support this very soon. This isn't a problem with IE at all, since IE already reports errors to window.onerror irrespective of the domain (yay, security!).