tessl/npm-sentry--integrations

Pluggable integrations that enhance Sentry JavaScript SDKs with additional error tracking, monitoring, and debugging capabilities.

—

Pending

Overview

Eval results

Files

HTTP Client Monitoring

Name: tessl/npm-sentry--integrations
Author: tessl

Monitors HTTP requests made via fetch API and XMLHttpRequest, creating Sentry events for failed requests based on configurable status codes and URL patterns. Useful for tracking API failures and network issues.

Capabilities

Modern Function-based Integration

/**
 * Creates events for failed client-side HTTP requests
 * @param options - Configuration for HTTP monitoring
 * @returns Integration instance that monitors HTTP requests
 */
function httpClientIntegration(options?: Partial<HttpClientOptions>): Integration;

interface HttpClientOptions {
  /** HTTP status codes that should be considered failed */
  failedRequestStatusCodes: HttpStatusCodeRange[];
  /** Targets to track for failed requests */
  failedRequestTargets: HttpRequestTarget[];
}

type HttpStatusCodeRange = [number, number] | number;
type HttpRequestTarget = string | RegExp;

Legacy Class-based Integration (Deprecated)

/**
 * Legacy class-based HTTP client integration
 * @deprecated Use httpClientIntegration() instead
 */
class HttpClient implements Integration {
  constructor(options?: {
    failedRequestStatusCodes: HttpStatusCodeRange[];
    failedRequestTargets: HttpRequestTarget[];
  });
  name: string;
  setup(client: Client): void;
}

Configuration Options

failedRequestStatusCodes

Defines which HTTP status codes should trigger events:

Default: [[500, 599]] (server errors only)
Single codes: [404, 500]
Ranges: [[400, 499], [500, 599]] (client and server errors)
Mixed: [[500, 505], 507, 510]

failedRequestTargets

Defines which URLs to monitor:

Default: [/.*/] (all URLs)
String matching: ['http://api.example.com', '/api/']
Regex patterns: [/\/api\/.*/, /admin/]
Combined: ['localhost', /\/api\/v[12]\//]

Behavior

Request Monitoring

The integration instruments both fetch API and XMLHttpRequest:

Fetch API: Uses addFetchInstrumentationHandler()
XMLHttpRequest: Uses addXhrInstrumentationHandler()
Automatic: No manual wrapping required

Event Creation

Failed requests generate synthetic error events containing:

Request Information:

URL, HTTP method
Request headers (if sendDefaultPii enabled)
Request cookies (if sendDefaultPii enabled)

Response Information:

Status code, response headers
Response cookies, response body size
Exception mechanism: { type: 'http.client', handled: false }

Privacy Controls

Personal data inclusion is controlled by Sentry client's sendDefaultPii option:

true: Includes headers and cookies in events
false: Excludes headers and cookies for privacy

Usage Examples

import { httpClientIntegration } from '@sentry/integrations';
import * as Sentry from '@sentry/browser';

// Monitor server errors only (default)
Sentry.init({
  dsn: 'YOUR_DSN',
  integrations: [
    httpClientIntegration()
  ]
});

// Monitor both client and server errors
Sentry.init({
  dsn: 'YOUR_DSN',
  integrations: [
    httpClientIntegration({
      failedRequestStatusCodes: [[400, 599]]
    })
  ]
});

// Monitor specific APIs and error codes
Sentry.init({
  dsn: 'YOUR_DSN',
  integrations: [
    httpClientIntegration({
      failedRequestStatusCodes: [404, [500, 599]],
      failedRequestTargets: [
        'https://api.example.com',
        /\/api\/v[12]\//,
        'localhost:3000'
      ]
    })
  ]
});

// Include headers and cookies in events
Sentry.init({
  dsn: 'YOUR_DSN',
  sendDefaultPii: true,  // Enables header/cookie capture
  integrations: [
    httpClientIntegration({
      failedRequestStatusCodes: [[400, 499], [500, 599]]
    })
  ]
});

Event Structure

Generated events have the following structure:

{
  message: "HTTP Client Error with status code: 404",
  exception: {
    values: [{
      type: "Error",
      value: "HTTP Client Error with status code: 404"
    }]
  },
  request: {
    url: "https://api.example.com/users/123",
    method: "GET",
    headers: { /* if sendDefaultPii enabled */ },
    cookies: { /* if sendDefaultPii enabled */ }
  },
  contexts: {
    response: {
      status_code: 404,
      headers: { /* if sendDefaultPii enabled */ },
      cookies: { /* if sendDefaultPii enabled */ },
      body_size: 1234  // from Content-Length header
    }
  }
}

Filtering

The integration automatically filters out:

Sentry requests: Prevents infinite loops by excluding Sentry API calls
Non-matching status codes: Only configured status codes generate events
Non-matching URLs: Only URLs matching target patterns generate events

This integration is particularly useful for SPAs and applications that make many API calls, providing visibility into client-side network failures.

Install with Tessl CLI

npx tessl i tessl/npm-sentry--integrations

docs

console-capture.md

context-lines.md

debug-integration.md

error-deduplication.md

reporting-observer.md

session-timing.md

transaction-integration.md

tile.json