tessl/npm-reactotron-react-native
A development tool to explore, inspect, and diagnose your React Native apps.
—
Pending
error-tracking.mddocs/
Error Tracking
Captures global JavaScript errors and reports them with symbolicated stack traces, customizable filtering, and detailed error information for debugging React Native applications.
Capabilities
Global Error Tracking Plugin
Creates a plugin that intercepts global errors through React Native's LogBox system and provides detailed error reporting.
/**
* Create global error tracking plugin
* @param options - Configuration options for error tracking
* @returns Plugin creator function
*/
function trackGlobalErrors(options?: TrackGlobalErrorsOptions): PluginCreator;
/**
* Configuration options for global error tracking
*/
interface TrackGlobalErrorsOptions {
/** Function to filter stack frames (return false to exclude frame) */
veto?: (frame: ErrorStackFrame) => boolean;
}
/**
* Stack frame information
*/
interface ErrorStackFrame {
fileName: string;
functionName: string;
lineNumber: number;
columnNumber?: number | null;
}Usage Examples:
import Reactotron, { trackGlobalErrors } from "reactotron-react-native";
// Basic error tracking
const reactotron = Reactotron
.configure({ name: "MyApp" })
.use(trackGlobalErrors())
.connect();
// Filter out node_modules errors
const reactotron = Reactotron
.configure({ name: "MyApp" })
.use(trackGlobalErrors({
veto: (frame) => !frame.fileName.includes('node_modules')
}))
.connect();
// Via useReactNative
const reactotron = Reactotron
.configure({ name: "MyApp" })
.useReactNative({
errors: {
veto: (frame) => frame.fileName.includes('MyApp') // Only include app files
}
})
.connect();Plugin Features
The error tracking plugin provides manual error reporting capabilities.
/**
* Plugin features for error reporting
*/
interface ErrorTrackingFeatures {
/** Manually report an error to Reactotron */
reportError(error: ExtendedExceptionData): void;
}
/**
* Extended exception data structure from React Native LogBox
*/
interface ExtendedExceptionData {
message: string;
stack: string | Array<any>;
// Additional React Native specific error data
}Usage Examples:
// Manually report errors
try {
// Some operation that might fail
performRiskyOperation();
} catch (error) {
reactotron.reportError(error);
throw error; // Re-throw if needed
}Error Processing
Stack Trace Symbolication
The plugin automatically symbolicates stack traces using React Native's internal tools:
/**
* Symbolicated stack frame
*/
interface SymbolicatedStackFrame {
file: string;
methodName: string;
lineNumber: number;
columnNumber?: number;
}Error Message Format
Errors are sent to Reactotron with the following structure:
/**
* Error message sent to Reactotron
*/
interface ErrorMessage {
type: "error";
payload: {
message: string;
stack: ErrorStackFrame[];
};
}Implementation Details
LogBox Integration
The plugin integrates with React Native's LogBox system by proxying the addException method:
// Simplified implementation concept
LogBox.addException = new Proxy(LogBox.addException, {
apply(target, thisArg, argumentsList) {
const error = argumentsList[0];
reportError(error); // Send to Reactotron
return target.apply(thisArg, argumentsList); // Call original
}
});Error Stack Processing
The plugin processes error stacks through multiple stages:
- Parse Error Stack: Converts raw stack trace to structured format
- Symbolicate: Maps minified code locations to source locations
- Filter Frames: Applies veto function to exclude unwanted frames
- Format: Converts to Reactotron-compatible format
Cross-Platform Compatibility
The plugin handles React Native version differences in core development tools:
// Handles different React Native versions
try {
parseErrorStack = require("react-native/Libraries/Core/Devtools/parseErrorStack");
symbolicateStackTrace = require("react-native/Libraries/Core/Devtools/symbolicateStackTrace");
} catch (e) {
// Fallback handling for different RN versions
}Filtering Examples
Common Filtering Patterns
// Only include application code
const appOnlyFilter = (frame: ErrorStackFrame) => {
return frame.fileName.includes('/src/') ||
frame.fileName.includes('/app/');
};
// Exclude specific libraries
const excludeLibrariesFilter = (frame: ErrorStackFrame) => {
return !frame.fileName.includes('node_modules') &&
!frame.fileName.includes('react-native/Libraries');
};
// Include only specific file extensions
const sourceFilesOnlyFilter = (frame: ErrorStackFrame) => {
return /\.(js|jsx|ts|tsx)$/.test(frame.fileName);
};
// Complex filtering
const complexFilter = (frame: ErrorStackFrame) => {
// Include app code
if (frame.fileName.includes('/MyApp/')) return true;
// Include specific libraries
if (frame.fileName.includes('/important-library/')) return true;
// Exclude everything else
return false;
};Usage with Filters
const reactotron = Reactotron
.use(trackGlobalErrors({
veto: complexFilter
}))
.connect();Error Handling
The plugin includes comprehensive error handling for various failure scenarios:
- Symbolication Failure: Falls back to raw stack traces
- Parse Failure: Logs parsing errors to Reactotron debug
- Missing Dependencies: Handles missing React Native dev tools gracefully
Usage Best Practices:
// Development-only error tracking
const errorOptions = __DEV__ ? {
veto: (frame) => !frame.fileName.includes('node_modules')
} : false;
const reactotron = Reactotron
.useReactNative({
errors: errorOptions
})
.connect();
// Comprehensive filtering for better debugging
const reactotron = Reactotron
.use(trackGlobalErrors({
veto: (frame) => {
// Include source maps
if (frame.fileName.includes('.map')) return false;
// Include app files
if (frame.fileName.includes('/src/')) return true;
// Include React Native core for system errors
if (frame.fileName.includes('react-native/Libraries')) return true;
// Exclude node_modules
return !frame.fileName.includes('node_modules');
}
}))
.connect();Install with Tessl CLI
npx tessl i tessl/npm-reactotron-react-native