JavaScript Error Tracking

Automatically capture JavaScript errors across your website with detailed context for faster debugging.

Enabling Error Tracking

Automatic Capture

Error tracking is enabled by default when you install the Zenovay script. All uncaught JavaScript errors are automatically captured.

<script
  defer
  data-tracking-code="YOUR_TRACKING_CODE"
  src="https://api.zenovay.com/z.js"
></script>

Configuration Options

Error tracking is configured in the dashboard:

1. Go to Settings → Error Tracking
2. Toggle individual options:

Setting	Default	Description
Capture Errors	ON	Capture uncaught errors
Capture Console Errors	OFF	Capture console.error calls
Capture Unhandled Rejections	ON	Capture unhandled Promise rejections

These settings are delivered to the tracker automatically via feature flags -- no script attribute changes needed.

What's Captured

Error Information

For each error, Zenovay captures:

Data	Description
Error message	The error description
Error type	TypeError, ReferenceError, etc.
Stack trace	Full call stack
Source file	File where error occurred
Line & column	Exact position
URL	Page where error happened
User agent	Browser and OS
Visitor ID	Link to session
Timestamp	When error occurred

Context Data

Additional context captured:

• Page URL and referrer
• Browser viewport size
• Device type (desktop/mobile/tablet)
• Network type (if available)
• Time on page before error
• User actions leading to error

Viewing Errors

Errors Dashboard

Navigate to Errors tab in your dashboard:

1. See error count trends over time
2. View top errors by occurrence
3. Filter by error type, browser, page
4. Click any error for details

Error List

The error list shows:

Column	Description
Error	Error message (truncated)
Count	Number of occurrences
Users	Unique users affected
First Seen	When first occurred
Last Seen	Most recent occurrence
Status	New, Reviewed, Resolved

Error Detail View

Click an error to see:

• Full error message
• Stack trace
• Affected browsers and OS
• Pages where error occurs
• Timeline of occurrences
• Related session replays (if available)

Error Types

Common Error Types

Type	Description	Common Causes
TypeError	Type-related error	Accessing undefined properties
ReferenceError	Reference to undefined	Undefined variables
SyntaxError	Invalid syntax	Malformed JSON, typos
RangeError	Value out of range	Invalid array length
URIError	URI handling error	Malformed URIs
EvalError	eval() error	Deprecated, rarely seen

Network Errors

// These are captured as custom events
fetch('/api/data')
  .catch(error => {
    // Captured if unhandled
  });

Promise Rejections

// Unhandled rejection - captured automatically
Promise.reject(new Error('Something failed'));

// Handled rejection - not captured
Promise.reject(new Error('Something failed'))
  .catch(error => handleError(error));

Manual Error Tracking

Track Caught Errors

try {
  riskyOperation();
} catch (error) {
  // Track manually
  window.zenovay('track', 'error', {
    message: error.message,
    context: 'checkout_flow',
    user_action: 'submit_payment'
  });

  // Handle the error
  showErrorMessage(error);
}

Track Custom Errors

// Track without throwing
window.zenovay('track', 'error', {
  message: 'Custom validation failed',
  field: 'email',
  value_type: 'invalid_format'
});

// Track with severity
window.zenovay('track', 'error', {
  severity: 'warning', // 'error' | 'warning' | 'info'
  component: 'PaymentForm'
});

Track API Errors

async function fetchData() {
  try {
    const response = await fetch('/api/data');

    if (!response.ok) {
      const error = new Error(`API Error: ${response.status}`);
      error.status = response.status;
      error.endpoint = '/api/data';

      window.zenovay('track', 'error', {
        message: `API Error: ${response.status}`,
        status: response.status,
        endpoint: '/api/data',
        method: 'GET'
      });
    }

    return response.json();
  } catch (error) {
    window.zenovay('track', 'error', {
      message: error.message,
      type: 'network_error',
      endpoint: '/api/data'
    });
    throw error;
  }
}

Source Maps

Why Source Maps?

Minified code produces unreadable stack traces:

Error: undefined is not a function
    at a.b (main.min.js:1:2345)
    at c.d (main.min.js:1:3456)

With source maps:

Error: undefined is not a function
    at processPayment (checkout.js:45:12)
    at handleSubmit (form.js:123:8)

Uploading Source Maps

Source maps are uploaded through the Zenovay dashboard:

1. Go to Settings → Error Tracking → Source Maps
2. Click Upload Source Map
3. Select the .map file from your build output
4. Enter the release version and the URL of the corresponding JavaScript file
5. Upload

Webpack Configuration

// webpack.config.js - Upload source maps via API after build
// Add a post-build script to upload source maps:
//
// curl -X POST "https://api.zenovay.com/api/external/v1/sourcemaps" \
//   -H "X-API-Key: $ZENOVAY_API_KEY" \
//   -F "website_id=$ZENOVAY_WEBSITE_ID" \
//   -F "release=$VERSION" \
//   -F "file=@dist/main.js.map"

module.exports = {
  devtool: 'hidden-source-map',
  // Source maps generated but not referenced in output
  // Upload them to Zenovay via the API after build
};

Release Tracking

Associate errors with releases by setting the release version when uploading source maps through the dashboard:

1. Go to Settings → Error Tracking → Source Maps
2. Upload your source map with the release version (e.g., v1.2.3)
3. Errors will automatically be linked to the corresponding release

Release versions are managed through source map uploads in the dashboard.

Filtering Errors

Ignore Specific Errors

<script>
window.ZENOVAY_TRACKER_CONFIG = {
  ignoreErrors: [
    'ResizeObserver loop limit exceeded',
    /Script error\.?/,
    'Loading chunk'
  ],
  ignoreUrls: [
    /extensions\//,
    /chrome-extension:/,
    /^file:\/\//
  ]
};
</script>

Sampling

Error sampling is configured in the dashboard:

1. Go to Settings → Error Tracking
2. Set Error Sample Rate (e.g., 0.1 captures 10% of errors)

This is useful for high-traffic sites to reduce volume while maintaining visibility into error patterns.

Error Alerts

Set Up Alerts

1. Go to Settings → Alerts
2. Click New Alert
3. Select Error Spike
4. Configure threshold:
   • Error count increase (e.g., 100% increase)
   • New error type detected
   • Specific error message pattern
5. Choose notification method (email, Slack, webhook)

Alert Types

Alert Type	Description
New Error	First occurrence of error
Error Spike	Sudden increase in errors
Error Threshold	Errors exceed count
Error Resolution	Previously resolved error returns

Integration with Session Replay

When enabled, link errors to session recordings:

1. Error occurs during session
2. Click error in dashboard
3. View Related Sessions
4. Watch replay to see user actions before error

This helps understand:

• What the user was doing
• UI state when error occurred
• Steps to reproduce

Best Practices

Error Handling

// Good: Specific error handling
try {
  const data = JSON.parse(userInput);
} catch (error) {
  if (error instanceof SyntaxError) {
    showValidationError('Invalid JSON format');
  } else {
    zenovay('track', 'error', { message: error.message });
    showGenericError();
  }
}

// Good: Boundary for component errors
class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    zenovay('track', 'error', {
      message: error.message,
      componentStack: info.componentStack
    });
  }
}

Error Context

Add meaningful context:

// Bad: No context
zenovay('track', 'error', { message: error.message });

// Good: Rich context
zenovay('track', 'error', {
  message: error.message,
  component: 'CheckoutForm',
  step: 'payment',
  paymentMethod: 'credit_card',
  cartValue: cart.total,
  itemCount: cart.items.length
});

Noise Reduction

• Filter browser extension errors
• Ignore known third-party issues
• Use sampling for high-volume errors
• Group similar errors

Troubleshooting

Errors Not Appearing

Check:

• Script loads before errors occur
• Error tracking is enabled in Settings → Error Tracking
• Errors not filtered/ignored
• Ad blocker not blocking requests

Missing Stack Traces

Verify:

• CORS headers set for cross-origin scripts
• Source maps uploaded for minified code
• Error not from third-party script

Too Many Errors

Consider:

• Enable sampling
• Add ignore patterns
• Review and fix high-volume errors
• Group similar errors

Next Steps

• Error Groups
• Stack Trace Analysis
• Performance Alerts