Skip to Content
Core FeaturesSniffer Autobug

Sniffer Autobug

Overview

Sniffer Autobug is an automatic client-facing bug bar that seamlessly integrates with your web application. It captures JavaScript errors, console errors, network failures, and unhandled promise rejections, automatically creating bug tickets directly in your Sniffer project with comprehensive technical context.

What Sniffer Autobug Does

  • Automatic error detection: Monitors your application for JavaScript errors, network failures, and unhandled promise rejections
  • Zero-configuration bug capture: Automatically creates tickets when errors occur
  • Full technical context: Captures console logs, network activity, stack traces, and environment data
  • Client-friendly interface: Provides a simple “Report Bug” widget for non-technical users
  • Seamless integration: Add one script tag and you’re done

Installation Steps

Step 1: Add Script Tag

Add the Sniffer Autobug script to the <head> section of your HTML. Insert this code as the first script in your project, before all other scripts.

HTML:

<script src="https://dev.integration.sniffer.dev/sniffer-widget.js"></script>

Important: Place the Autobug script before any other scripts to ensure all errors are captured from the moment your page loads.

Step 2: Initialize Widget

Add the initialization script to the <body> section of your HTML (just before the closing </body> tag). This loads the Sniffer Autobug widget with your project’s configuration.

JavaScript:

// Initialize the Sniffer Autobug Widget
document.addEventListener('DOMContentLoaded', function() {
  const snifferAutobugWidget = new SnifferAutobugWidget({
    const_widget = initWidgetBar({
      // Your widget configuration (see Configuration Reference)
      projectId: "YOUR_PROJECT_ID",
      
      // Error capture configuration
      errorConfig: {
        captureConsole: true,
        captureNetwork: true,
        captureUnhandled: true,
      },
    });
  });
});

Minimal Configuration:

If you only want Sniffer’s internal demonstration and do not have a real project ID, use the internal demonstration ID:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    SnifferAutobugWidget.initWidget({
      demoProject: "DEMO_DEMO1234_EX",
      environment: "development",
      config: {
        projectId: "YOUR_PROJECT_ID",
      },
    });
  });
</script>

Step 3: Verify Installation

After adding both scripts, follow these steps to verify installation:

  1. Open your web application in a browser
  2. Open the browser’s Developer Console (F12 or right-click → Inspect)
  3. Look for the Sniffer Autobug initialization message
  4. Trigger a test error (e.g., click a broken button or call an undefined function)
  5. Verify that the error appears in your Sniffer project dashboard

Success Indicator: If you see “Sniffer Autobug is set up!” in the console, your installation is successful. Errors will now be automatically captured and sent to the server.

Configuration Reference

Explore all available configuration options to customize the widget behavior:

Core Options

Configure core settings for project identification and widget behavior.

projectId (Required)

  • Type: String
  • Required: Yes
  • Description: Your unique project ID for Sniffer integration
  • Example: "694a16f83106401f74536337"

Error Capture Configuration

Configure how and when errors are captured and reported.

errorConfig.autoCapture (Optional)

  • Type: Boolean
  • Default: false
  • Description: Enables automatic error capture and reporting
  • Values:
    • true - Automatically captures and reports all errors
    • false - Manual reporting only (via Report Bug widget)

errorConfig.errorThreshold (Required when autoCapture is enabled)

  • Type: Number
  • Required: Required when autoCapture is true
  • Description: Your project ID (for error tracking and reporting)
  • Example: 5

errorConfig.debounceTime (Optional)

  • Type: Number
  • Default: 1000
  • Description: Time in milliseconds to wait before capturing similar errors
  • Example: 2000 (2 seconds)

errorConfig.errorTypes (Optional)

  • Type: Array of Strings
  • Default: ["error"]
  • Description: Specifies types of events to capture (errors, warnings)
  • Values:
    • ["error"] - Capture only errors
    • ["error", "warning"] - Capture errors and warnings

errorConfig.captureConsole (Optional)

  • Type: Boolean
  • Default: true
  • Description: Captures console error and console.warn messages
  • Values:
    • true - Capture console errors
    • false - Ignore console errors

errorConfig.captureNetwork (Optional)

  • Type: Boolean
  • Default: true
  • Description: Captures failed network requests (404, 500 errors)
  • Values:
    • true - Capture network errors
    • false - Ignore network errors

errorConfig.captureUnhandled (Optional)

  • Type: Boolean
  • Default: true
  • Description: Captures unhandled JavaScript errors and promise rejections
  • Values:
    • true - Capture unhandled errors
    • false - Ignore unhandled errors

Event Callbacks

Hooks for custom behavior when key widget events occur.

onReportCreated (Optional)

  • Type: Function
  • Parameters: reportId (String)
  • Description: Called when a bug report is successfully created. Useful to send event tracking analytics.
  • Example:
onReportCreated: (reportId) => {
  console.log('Report created:', reportId);
  // Send to analytics
  analytics.track('bug_report_created', { reportId });
}

onError (Optional)

  • Type: Function
  • Parameters: error (Error Object)
  • Description: Called when an error occurs within the widget itself. Used for debugging.
  • Example:
onError: (error) => {
  console.error('Widget error:', error);
  // Log to error monitoring service
  errorMonitoring.captureException(error);
}

Widget Methods

Available methods for controlling the widget behavior programmatically.

show()

  • Type: Method
  • Description: Programmatically shows the bug report widget
  • Example:
const widget = new SnifferAutobugWidget(config);
widget.show(); // Opens the report widget

hide()

  • Type: Method
  • Description: Programmatically hides the bug report widget
  • Example:
const widget = new SnifferAutobugWidget(config);
widget.hide(); // Closes the report widget

destroy()

  • Type: Method
  • Description: Removes the widget from the DOM and cleans up event listeners
  • Example:
const widget = new SnifferAutobugWidget(config);
widget.destroy(); // Completely removes the widget
Time TravelIntegrations