React Crash Guard

Detect potential runtime crashes in React/TypeScript/JavaScript code before they happen in production.

Philosophy

All crashes are critical. Every crash affects users. This extension doesn't prioritize by severity—it finds every potential crash so you can decide what to fix.

Features

Null/Undefined Detection

• Static Analysis - Analyzes your code without running it
• Framework Aware - Works with React class components, handles this keyword properly
• SSR/CSR Support - Configure rendering mode to detect window/document issues in SSR
• Smart Detection - Identifies dangerous patterns like unguarded .find(), optional chaining gaps, ref access

Exception Detection

• JSON.parse() - Flags unhandled calls that throw on invalid JSON
• new URL() - Detects URL constructor without try-catch
• new RegExp() - Catches dynamic regex that can throw on invalid patterns
• atob()/btoa() - Base64 functions that throw on invalid input
• decodeURI()/decodeURIComponent() - URI functions that throw on malformed input
• Async/Await - Optional detection of unhandled promise rejections

Quick Fixes

• Optional chaining (?.)
• Nullish coalescing (??)
• Type guards and null checks
• Try-catch wrappers for throwing functions

Installation

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "React Crash Guard"
4. Click Install

Usage

1. Open a TypeScript/JavaScript/React project
2. The extension analyzes files automatically on open/save
3. View issues in the Problems panel
4. Use Quick Fix (Ctrl+.) to apply suggested fixes

Commands

Configuration

General Settings

Rendering Mode

• CSR (Client-Side Rendering): window/document are safe
• SSR (Server-Side Rendering): window/document are flagged as unsafe
• Universal: window/document flagged unless guarded with typeof check

Exception Detection

Advanced

Detected Patterns

Null/Undefined Risks

• Property access on nullable values (obj.prop)
• Method calls on nullable values (obj.method())
• Array access without bounds checking (arr[i])
• Destructuring nullable objects (const { x } = obj)
• Spreading nullable values ([...arr], {...obj})
• Dangerous method results (.find(), .pop(), querySelector())
• Browser globals in SSR (window, document)
• React ref access (ref.current.something)

Exception Risks

• JSON.parse() with untrusted input
• new URL() with dynamic strings
• new RegExp() with user input
• atob()/btoa() with unvalidated data
• decodeURI()/decodeURIComponent() with external data

Suppression Comments

// @crash-guard-ignore - Ignore this line
// @crash-guard-ignore-next-line - Ignore next line
// @crash-guard-ignore-file - Ignore entire file (place at top)

// Legacy suppression (still supported):
// @null-safe-ignore
// @null-safe-ignore-next-line
// @null-safe-ignore-file

Example

// ❌ Flagged: .find() can return undefined
const user = users.find(u => u.id === id);
console.log(user.name); // Crash if not found!

// ✅ Safe: Check before access
const user = users.find(u => u.id === id);
if (user) {
  console.log(user.name);
}

// ❌ Flagged: JSON.parse throws on invalid JSON
const data = JSON.parse(userInput);

// ✅ Safe: Wrap in try-catch
try {
  const data = JSON.parse(userInput);
} catch (e) {
  // Handle invalid JSON
}

License

MIT

Author

Samuel Sunny Wilson

Links

• GitHub Repository
• Report Issues
• VS Code Marketplace