CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-sentry--integrations

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

—

Pending
Overview
Eval results
Files

reporting-observer.mddocs/

Reporting Observer

Browser-only integration that captures Reporting API events such as crash reports, deprecation warnings, and intervention reports. This integration helps monitor browser-generated reports about web application issues.

Capabilities

Modern Function-based Integration

/**
 * Reporting API integration for capturing browser reports
 * @param options - Configuration for report types to observe
 * @returns Integration instance that monitors Reporting API
 */
function reportingObserverIntegration(options?: ReportingObserverOptions): Integration;

interface ReportingObserverOptions {
  /** Types of reports to observe */
  types?: ReportTypes[];
}

type ReportTypes = 'crash' | 'deprecation' | 'intervention';

Legacy Class-based Integration (Deprecated)

/**
 * Legacy class-based Reporting Observer integration
 * @deprecated Use reportingObserverIntegration() instead
 */
class ReportingObserver implements Integration {
  constructor(options?: {
    types?: ReportTypes[];
  });
  name: string;
  setupOnce(): void;
  setup(client: Client): void;
}

Report Types

Crash Reports

Generated when the browser detects application crashes:

  • Type: 'crash'
  • Content: Crash ID and reason information
  • Usefulness: Identify browser-level crashes affecting users

Deprecation Reports

Generated when deprecated web features are used:

  • Type: 'deprecation'
  • Content: Deprecated feature ID, removal timeline, usage location
  • Usefulness: Identify code using deprecated APIs before they're removed

Intervention Reports

Generated when browser intervenes to improve user experience:

  • Type: 'intervention'
  • Content: Intervention reason and affected feature
  • Usefulness: Identify performance or UX issues the browser is addressing

Configuration Options

types Option

Array of report types to observe:

  • Default: ['crash', 'deprecation', 'intervention'] (all types)
  • Selective: ['crash', 'deprecation'] (exclude interventions)
  • Specific: ['crash'] (only crash reports)

Browser Support

This integration requires:

  • Reporting API support: Modern browsers (Chrome 69+, Firefox 65+)
  • Browser environment: Does not work in Node.js or server-side rendering
  • Automatic detection: Gracefully skips setup if Reporting API unavailable

Report Structure Types

interface Report {
  [key: string]: unknown;
  type: ReportTypes;
  url: string;
  body?: ReportBody;
}

type ReportBody = CrashReportBody | DeprecationReportBody | InterventionReportBody;

interface CrashReportBody {
  [key: string]: unknown;
  crashId: string;
  reason?: string;
}

interface DeprecationReportBody {
  [key: string]: unknown;
  id: string;
  anticipatedRemoval?: Date;
  message: string;
  sourceFile?: string;
  lineNumber?: number;
  columnNumber?: number;
}

interface InterventionReportBody {
  [key: string]: unknown;
  id: string;
  message: string;
  sourceFile?: string;
  lineNumber?: number;
  columnNumber?: number;
}

Usage Examples

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

// Monitor all report types (default)
Sentry.init({
  dsn: 'YOUR_DSN',
  integrations: [
    reportingObserverIntegration()
  ]
});

// Monitor only crashes and deprecations
Sentry.init({
  dsn: 'YOUR_DSN',
  integrations: [
    reportingObserverIntegration({
      types: ['crash', 'deprecation']
    })
  ]
});

// Monitor only crash reports
Sentry.init({
  dsn: 'YOUR_DSN',
  integrations: [
    reportingObserverIntegration({
      types: ['crash']
    })
  ]
});

Event Generation

Reports are converted to Sentry message events with:

Event Message Format: ReportingObserver [type]: details

  • Crash: ReportingObserver [crash]: crashId reason
  • Deprecation: ReportingObserver [deprecation]: message
  • Intervention: ReportingObserver [intervention]: message

Event Context:

  • extra.url: URL where report was generated
  • extra.body: Complete report body object

Real-world Examples

Deprecation Warning

// Using deprecated feature triggers report:
document.write('<p>This is deprecated</p>');

// Results in Sentry event:
// "ReportingObserver [deprecation]: Use of document.write() is deprecated"

Browser Intervention

// Slow script triggers intervention:
while(true) { /* infinite loop */ }

// Results in Sentry event:
// "ReportingObserver [intervention]: Long running script was terminated"

Crash Report

// Browser crash (simplified example):
// Results in Sentry event:
// "ReportingObserver [crash]: 12345 Out of memory"

Integration Benefits

  1. Proactive Monitoring: Catch browser-level issues before users report them
  2. Deprecation Tracking: Stay ahead of breaking API changes
  3. Performance Insights: Understand when browsers intervene for performance
  4. Crash Visibility: Get notified of browser crashes affecting your application

This integration is particularly valuable for modern web applications that need to stay current with browser changes and maintain optimal performance.

Install with Tessl CLI

npx tessl i tessl/npm-sentry--integrations

docs

console-capture.md

context-lines.md

debug-integration.md

error-deduplication.md

extra-error-data.md

frame-rewriting.md

http-client.md

index.md

offline-support.md

reporting-observer.md

session-timing.md

transaction-integration.md

tile.json