Error & Crash Monitoring

diy-analytics captures runtime JavaScript crashes, unhandled promise rejections, and failed asset loads directly from visitor browsers — no external monitoring SDK required.

Error tracking and exception grouped by fingerprint

How It Works

The tracker hooks into global browser error boundaries (window.onerror and window.onunhandledrejection). When a crash occurs, it gathers diagnostic telemetry and sends an error beacon to /api/track.

Key Capabilities

Smart Error Fingerprinting — normalizes error messages and top stack frames to group identical exceptions together, staying resilient across minification changes.
Regression Detection — when a previously resolved error reoccurs in a later release, it reopens automatically and gets flagged with a Regression badge.
On-Demand Source Map Resolution — resolves minified production stack traces against deployed //# sourceMappingURL= artifacts to show original source lines and function context.
Breadcrumbs Timeline — records the last 20 client events before the crash: console logs, DOM click targets, network fetch/XHR requests, and SPA route transitions.
Impact Metrics — raw crash occurrences alongside distinct affected user counts, operating systems, browsers, and geographic distribution.

Release Tagging

Tag your production deployments with a version string to filter errors and pinpoint which release introduced a bug:

html

<script>
  window.__DIY_RELEASE__ = "v2.1.0";
</script>
<script async defer src="https://analytics.yourdomain.com/api/tracker.js?site-id=YOUR_SITE_ID"></script>

In Next.js, you can define this in your root layout:

tsx

// app/layout.tsx
<script
  dangerouslySetInnerHTML={{
    __html: `window.__DIY_RELEASE__ = "${process.env.NEXT_PUBLIC_APP_VERSION || 'production'}";`,
  }}
/>

Manual Exception Capture

Capture caught exceptions or errors from React Error Boundaries manually, with custom diagnostic metadata attached:

javascript

try {
  executeCriticalTransaction();
} catch (error) {
  window.__DIY_CAPTURE_EXCEPTION__?.(error, {
    level: 'error', // 'error' | 'warning' | 'info'
    tags: {
      component: 'CheckoutModal',
      featureFlag: 'new-payment-flow'
    },
    extra: {
      cartTotal: 120.50,
      currency: 'USD'
    }
  });
}

React Error Boundary Example

tsx

// components/ErrorBoundary.tsx
'use client';

import React, { Component, ErrorInfo, ReactNode } from 'react';

interface Props {
  children: ReactNode;
}

interface State {
  hasError: boolean;
}

export class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(): State {
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    if (typeof window !== 'undefined' && window.__DIY_CAPTURE_EXCEPTION__) {
      window.__DIY_CAPTURE_EXCEPTION__(error, {
        tags: { componentStack: errorInfo.componentStack || '' },
      });
    }
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="p-6 text-center">
          <h2>Something went wrong.</h2>
          <button
            className="mt-4 px-4 py-2 bg-blue-600 text-white rounded"
            onClick={() => this.setState({ hasError: false })}
          >
            Try again
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

TypeScript Declaration

Add the error monitoring API to your global types.

typescript

// types/analytics.d.ts
declare global {
  interface Window {
    __DIY_RELEASE__?: string;
    __DIY_CAPTURE_EXCEPTION__?: (
      error: unknown,
      context?: {
        level?: 'error' | 'warning' | 'info';
        tags?: Record<string, string>;
        extra?: Record<string, unknown>;
      }
    ) => void;
  }
}

export {};