Menu
Capture client-side JavaScript errors with breadcrumbs, deduplication, and sampling using Ranetrace's Blade directive.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Send application logs to Ranetrace via the auto-registered logging channel, and integrate it with Laravel's logging stack.
Set up and schedule the Ranetrace worker to flush buffered errors, events, logs, analytics, and JavaScript errors to the API.
Track custom application events like sales, signups, and user actions with Ranetrace's privacy-first event system.
Set up and configure Ranetrace's privacy-first website analytics with bot detection, path filtering, and custom request filters.
Track, investigate, and manage application errors with Ranetrace, including MCP tools for AI-assisted debugging.
| name | ranetrace-javascript-errors |
| description | Capture client-side JavaScript errors with breadcrumbs, deduplication, and sampling using Ranetrace's Blade directive. |
Use this skill when setting up client-side JavaScript error tracking, configuring error filtering, or using the manual JavaScript error capture API.
RANETRACE_JAVASCRIPT_ERRORS_ENABLED=true
Place @ranetraceErrorTracking in your layout, just before the closing </body> tag:
<!DOCTYPE html>
<html>
<head>...</head>
<body>
{{ $slot }}
@ranetraceErrorTracking
</body>
</html>
The directive injects a self-contained script that automatically captures errors. No npm packages or build steps required.
window.onerrorEach error report includes browser info (screen size, viewport, device memory, connection type) and the current URL.
The script exposes a global API for manual error tracking:
// Capture a caught error
try {
riskyOperation();
} catch (error) {
window.Ranetrace.captureError(error, {
component: 'PaymentForm',
action: 'submit',
});
}
// Add a custom breadcrumb
window.Ranetrace.addBreadcrumb('custom', 'User selected plan', {
plan: 'premium',
price: 29.99,
});
// config/ranetrace.php
'javascript_errors' => [
'enabled' => env('RANETRACE_JAVASCRIPT_ERRORS_ENABLED', false),
'queue' => env('RANETRACE_JAVASCRIPT_ERRORS_QUEUE', true),
'queue_name' => env('RANETRACE_JAVASCRIPT_ERRORS_QUEUE_NAME', 'default'),
'timeout' => env('RANETRACE_JAVASCRIPT_ERRORS_TIMEOUT', 10),
'sample_rate' => env('RANETRACE_JAVASCRIPT_ERRORS_SAMPLE_RATE', 1.0),
'capture_console_errors' => env('RANETRACE_JAVASCRIPT_ERRORS_CAPTURE_CONSOLE_ERRORS', false),
'max_breadcrumbs' => env('RANETRACE_JAVASCRIPT_ERRORS_MAX_BREADCRUMBS', 20),
'ignored_errors' => [
'ResizeObserver loop limit exceeded',
'ResizeObserver loop completed with undelivered notifications',
'Script error.',
'Script error',
'Failed to fetch',
'NetworkError when attempting to fetch resource',
'Network request failed',
'Load failed',
'Loading chunk',
'ChunkLoadError',
'cancelled',
'canceled',
'The operation was aborted',
'AbortError',
'Illegal invocation',
],
],
sample_rate — 1.0 captures 100% of errors, 0.1 captures 10%. Useful for high-traffic sites.capture_console_errors — When true, intercepts console.error() calls and reports them.max_breadcrumbs — Maximum number of breadcrumbs stored per error (default: 20).ignored_errors — Error messages containing any of these strings are silently dropped. Add your own patterns as needed.Errors are sent to POST /ranetrace/javascript-errors/store (route name ranetrace.javascript-errors.store). The route is auto-registered when JS error tracking is enabled, with web middleware (CSRF — the injected script sends the host page's X-CSRF-TOKEN) plus throttle. The default rate limit is 60,1 (60 requests/minute), keyed by the authenticated user's id when present, otherwise the client IP — tune via RANETRACE_JAVASCRIPT_ERRORS_THROTTLE (Laravel requests,minutes format).
Client-side deduplication prevents the same error (same message + file + line + column) from being sent more than once per page session.
php artisan ranetrace:test-javascript-errors