Getting Started

Minimal Setup

Installation:

composer require dawen/js-logger-bundle

Add the bundle to config/bundles.php (Symfony 4+) or AppKernel.php (Symfony 3):

Dawen\Bundle\JsLoggerBundle\JsLoggerBundle::class => ['all' => true],

Include in Twig: Add {{ js_logger() }} before closing </body> in your base template (e.g., base.html.twig). Example:
```
<body>
    
    {{ js_logger() }}
</body>
```
Verify Backend: Check Monolog’s javascript channel for captured errors (e.g., via bin/console debug:monolog).

First Use Case: Debugging JS Errors

Introduce a deliberate JS error (e.g., undefinedVar in console).
Refresh the page; the error should appear in Symfony’s logs under the javascript channel.
Confirm the error includes:
- Timestamp
- URL
- Message
- Stack trace (if available).

Implementation Patterns

Core Workflow

Frontend Integration:
- Place {{ js_logger() }} once in your base template to avoid duplicate script tags.
- Ensure it loads after other JS dependencies but before </body> for global error capture.

Backend Processing:

Logs are routed to Monolog’s javascript channel. Configure handlers (e.g., database, file) in config/packages/monolog.yaml:

monolog:
    channels:
        - javascript
    handlers:
        javascript:
            type: stream
            path: "%kernel.logs_dir%/%kernel.environment%.javascript.log"
            level: error

Conditional Loading: Disable in production via config:

js_logger:
    enabled: false  # Disable in prod if needed

Advanced Patterns

Custom Error Filtering: Extend the bundle’s JsLoggerService to filter errors by URL or message:

// src/Service/CustomJsLogger.php
use Dawen\Bundle\JsLoggerBundle\Service\JsLoggerService;

class CustomJsLogger extends JsLoggerService {
    protected function isLoggable(array $error): bool {
        return parent::isLoggable($error) && strpos($error['url'], 'admin') === false;
    }
}

Override the service in config/services.yaml:

Dawen\Bundle\JsLoggerBundle\Service\JsLoggerService: '@custom_js_logger'

Enriching Error Data: Add metadata (e.g., user ID) via a Monolog processor:

// src/EventListener/JsLoggerProcessor.php
use Monolog\Logger;
use Symfony\Component\HttpKernel\Event\RequestEvent;

class JsLoggerProcessor {
    public function onKernelRequest(RequestEvent $event) {
        $request = $event->getRequest();
        Logger::getMonolog()->pushProcessor(function ($record) use ($request) {
            $record['extra']['user_id'] = $request->get('user_id');
            return $record;
        });
    }
}

Async Logging: Use Symfony’s Messenger component to offload logging:

# config/packages/monolog.yaml
handlers:
    javascript_async:
        type: fingers_crossed
        action_level: error
        handler: async
        excluded_404s: ['js']
        channels: [javascript]
    async:
        type: async
        handlers: [streamed]
        queue_name: js_errors

Gotchas and Tips

Pitfalls

Duplicate Script Tags:
- Issue: Multiple {{ js_logger() }} calls in templates.
- Fix: Use Twig’s {% block js_logger %}{% endblock %} in base template to enforce single inclusion.
CORS Blocking:
- Issue: Errors from cross-origin iframes may fail to send.
- Fix: Configure CORS headers for your API endpoint or use a proxy.
Monolog Channel Misconfiguration:
- Issue: Logs not appearing if javascript channel is missing.
- Fix: Explicitly define the channel in monolog.yaml:
```
channels: [javascript]
```
Performance Overhead:
- Issue: Heavy JS errors may slow page load.
- Fix: Disable in production or use lazy-loading:
```
{% if app.environment == 'dev' %}
    {{ js_logger() }}
{% endif %}
```

Debugging Tips

Verify Script Injection:
- Inspect the rendered HTML to confirm js_logger.js is loaded:
```
<script src="/js/js_logger.js"></script>
```
Check Network Tab:
- Ensure the error payload is sent to /js-logger endpoint (default).
- Look for 404 or 500 errors in the Network tab.
Log Level Filtering:
- Default allowed_levels: [warning, error] may drop info logs.
- Adjust in config/packages/js_logger.yaml:
```
js_logger:
    allowed_levels: [info, warning, error]
```
Stack Trace Limitations:
- Gotcha: Browser stack traces may be truncated or missing in minified code.
- Workaround: Use source maps or log the full error.stack if available.

Extension Points

Custom Endpoint: Override the default /js-logger route by extending the bundle’s router:

# config/routes/js_logger.yaml
js_logger:
    path: /custom-js-logger
    methods: POST
    controller: Dawen\Bundle\JsLoggerBundle\Controller\JsLoggerController::logAction

Database Storage: Use Doctrine to store logs:

# config/packages/monolog.yaml
handlers:
    javascript_db:
        type: stream
        path: 'php://temp'
        handler: doctrine
        channels: [javascript]
    doctrine:
        type: doctrine
        entity: App\Entity\JsErrorLog

Real-Time Alerts: Integrate with Slack/Email via Monolog handlers:

handlers:
    javascript_slack:
        type: slack
        token: "%env(SLACK_TOKEN)%"
        channel: "#errors"
        level: error
        channels: [javascript]

Js Logger Bundle Laravel Package