Developed with love by KnpLabs Hire us for your project!
0

NelmioJsLoggerBundle

by nelmio

This bundle allows you to log JavaScript errors and others in your backend's Monolog logs

NelmioJsLoggerBundle

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!).

Copyright (c) 2012 Nelmio

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is furnished
to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
nelmio_js_logger:
allowed_levels:

# Defaults:
- DEBUG
- INFO
- NOTICE
- WARNING
- ERROR
- CRITICAL
- ALERT
- EMERGENCY
ignore_messages: []
ignore_url_prefixes: []

# add StackTrace.js as logging provider
use_stacktrace_js:
enabled: false
path: https://cdnjs.cloudflare.com/ajax/libs/stacktrace.js/1.3.1/stacktrace.min.js