Your Error Dashboard Is Lying to You — Here's What It's Not Showing

Source: Dev.to

The dirty secret of frontend error monitoring

Every tool on the market does the same thing:

1. Captures the exception.
2. Groups it by stack trace.
3. Sends you a Slack alert.

Then it’s your problem. You still have to figure out:

• Is this a race condition?
• A failed API call?
• A memory leak?
• A hydration mismatch?

You don’t know. The tool doesn’t know. Enjoy your next 3 hours of detective work.

“Why does every error tool tell me WHAT crashed, but none of them tell me WHY?”

Introducing CrashSense – a crash‑diagnosis SDK (not another error tracker)

That same TypeError? CrashSense returns this structured report:

{
  "category": "memory_issue",
  "subcategory": "memory_leak",
  "confidence": 0.87,
  "severity": "critical",

  "contributingFactors": [
    {
      "factor": "high_memory_utilization",
      "weight": 0.9,
      "evidence": "Heap at 92% (487MB / 528MB)"
    },
    {
      "factor": "memory_growing_trend",
      "weight": 0.8,
      "evidence": "Heap growing at 2.3MB/s over 60s"
    },
    {
      "factor": "high_long_task_count",
      "weight": 0.6,
      "evidence": "4 long tasks in last 30s (avg 340ms)"
    }
  ],

  "breadcrumbs": [
    { "type": "navigation", "message": "User navigated to /checkout" },
    { "type": "click",      "message": "User clicked 'Add to Cart'" },
    { "type": "network",    "message": "POST /api/cart → 200 (142ms)" },
    { "type": "console",    "message": "Warning: memory pressure elevated" }
  ],

  "aiAnalysis": {
    "rootCause": "Memory leak in useEffect — event listener not cleaned up",
    "fix": { "code": "return () => window.removeEventListener('resize', handler);" },
    "prevention": "Always return cleanup functions from useEffect with side effects"
  }
}

Root cause classified. Evidence chain provided. Fix suggested.

The junior on call could’ve resolved it at 2:01 am—without waking anyone up.

How CrashSense works

CrashSense is a classification engine that correlates system signals with error patterns in real‑time.
The SDK passively monitors four system dimensions using native browser APIs—no monkey‑patching, no proxy wrapping. CPU overhead stays under 2 %.

Monitored dimensions

All monitoring is passive.

Signal‑based classification

When an error occurs the classifier looks at the current system state, not just the error message:

Error: TypeError (reading 'map')
  + Memory at 92% and growing          → memory_issue signal
  + 4 long tasks in last 30 s          → event_loop signal
  + 0 network failures                → not network_induced
  + React component stack present     → check framework_react

Each signal receives a weight based on evidence strength.
The category with the highest weighted score wins; the confidence score reflects certainty.

Crash categories

Every user interaction is automatically recorded—clicks, navigation, network requests, console output, state changes. When the crash report lands you’re reading a timeline, not just a stack trace.

LLM integration

Plug in your own LLM (OpenAI, Anthropic, Google, or any compatible endpoint). CrashSense sends a structured, token‑optimized payload and receives parsed root‑cause analysis with fix code.

Architecture diagram

![Architecture diagram showing CrashSense monitoring pipeline: System Monitors → Event Bus → Classifier → Crash Report]

Quick start (React)

npm install @crashsense/core @crashsense/react

import { createCrashSense } from '@crashsense/core';
import { CrashSenseProvider } from '@crashsense/react';

const cs = createCrashSense({
  appId: 'my-app',
  onCrash: (report) => {
    console.log(report.event.category);     // "memory_issue"
    console.log(report.event.confidence);   // 0.87
    console.log(report.event.contributingFactors);
  },
});

function App() {
  return (
    <CrashSenseProvider cs={cs}>
      {/* ... */}
    </CrashSenseProvider>
  );
}

Hooks for granular control

import { useCrashSense, useRenderTracker } from '@crashsense/react';

function Checkout() {
  const { captureException, addBreadcrumb } = useCrashSense();
  useRenderTracker('Checkout'); // warns on excessive re‑renders

  const handlePay = async () => {
    addBreadcrumb({ type: 'click', message: 'User clicked pay' });
    try {
      await processPayment();
    } catch (err) {
      captureException(err, { action: 'payment' });
    }
  };

  return <button onClick={handlePay}>Pay Now</button>;
}

Quick start (Vue)

npm install @crashsense/core @crashsense/vue

import { createCrashSense } from '@crashsense/core';
import { CrashSensePlugin } from '@crashsense/vue';

const cs = createCrashSense({
  appId: 'my-app',
  onCrash: (report) => console.log(report),
});

app.use(CrashSensePlugin, { cs });

(The Vue example continues in the SDK docs.)

Bottom line

CrashSense doesn’t magically fix bugs; it classifies them, correlates them with real‑time system signals, and surfaces a concise, actionable report. The junior on call can now resolve a 2 am memory leak without waking anyone else.

CrashSense Quick‑Start (Vue)

import { createApp } from 'vue';
import { crashSensePlugin } from '@crashsense/vue';
import App from './App.vue';

const app = createApp(App);
app.use(crashSensePlugin, { appId: 'my-app' });
app.mount('#app');

Captures: reactivity loops, lifecycle errors, component failures via app.config.errorHandler.

AI‑Powered Root‑Cause Analysis

npm install @crashsense/ai

import { createAIClient } from '@crashsense/ai';

const ai = createAIClient({
  endpoint: 'https://api.openai.com/v1/chat/completions',
  apiKey: process.env.OPENAI_API_KEY!,
  model: 'gpt-4',
});

const analysis = await ai.analyze(report.event);
console.log(analysis?.rootCause);   // "Memory leak in useEffect..."
console.log(analysis?.fix?.code);    // "return () => window.removeEventListener(..."

“This is the feature I’m most proud of.” – CrashSense

CrashSense doesn’t just tell you after the crash. It detects dangerous conditions before the browser tab dies.

Pre‑Crash Memory‑Pressure Levels

import { createCrashSense } from '@crashsense/core';

const cs = createCrashSense({
  appId: 'my-app',
  enablePreCrashWarning: true,
  enableMemoryMonitoring: true,
});

Warnings are recorded as breadcrumbs. When a crash occurs, the report shows the full escalation path: elevated → critical → imminent → crash.

![Pre‑crash warning escalation timeline showing elevated → critical → imminent → crash]

SDK Constraints & Stats

Design Constraints

1. The SDK must never crash your app.
2. Bundle size matters – ~7 KB gzipped with zero runtime dependencies.
3. PII must be scrubbed before any data leaves the browser (GDPR‑by‑design).
4. False positives destroy trust.

Package Sizes & Dependencies

Feature Comparison

Recent Release & Roadmap

• v1.1.0 – OOM Recovery Detection: when the browser kills a tab due to memory exhaustion, CrashSense recovers the full crash context (checkpoints, breadcrumbs, pre‑crash warnings) on the next page load using sessionStorage snapshots and a 6‑signal analysis engine.

Upcoming

• Source‑map support for production stack traces
• Dashboard UI for crash analytics
• More framework adapters (Svelte, Solid)
• Webhook integrations (Slack, Discord, PagerDuty)

npm install @crashsense/core

Resources

• GitHub – ⭐️ Star it if it saves you debugging time
• Documentation – Full API reference, guides, examples
• npm – @crashsense/core, @crashsense/react, @crashsense/vue, @crashsense/ai

Free. MIT licensed. Zero vendor lock‑in.
Built by Hoai Nho – a tech lead who got tired of being the detective at 2 am.