Error & Crash Reporter

Admin → Gold
💰 $2000

Automatically capture frontend or backend errors with stack trace summaries.

Technology iconTechnology iconTechnology icon

Error & Crash Reporter Module Overview

Purpose

The Error & Crash Reporter module is designed to streamline the detection, reporting, and analysis of errors and crashes in both frontend and backend systems. Its primary goal is to provide developers with comprehensive insights into issues that occur within the application, enabling faster identification and resolution of bugs.

Benefits

Usage Scenarios

The Error & Crash Reporter is particularly useful in the following scenarios:

  1. Real-time Development: Detecting and addressing bugs during active development cycles.
  2. Production Environments: Monitoring live applications to ensure smooth operation and quick recovery from crashes.
  3. Post-release Analysis: Reviewing historical data to identify recurring issues or patterns.
  4. Compliance & Auditing: Ensuring that all errors are logged and available for review, meeting compliance requirements.

By leveraging this module, developers can significantly enhance their ability to maintain robust, error-free software systems.

Features of Error & Crash Reporter Module

Automatic Error Detection

The module automatically identifies errors and crashes in both frontend and backend environments without requiring manual intervention. This ensures that issues are detected promptly, reducing downtime and improving system reliability.

Stack Trace Capture

When an error occurs, the module captures detailed stack traces. These traces provide a clear view of where the error originated, including function calls and line numbers, aiding developers in quickly locating and resolving the issue.

Custom Error Categories

Errors can be categorized into predefined or custom types (e.g., critical, warning, info). This categorization helps prioritize issues based on severity, making it easier for developers to manage and address them efficiently.

Error Rate Tracking

The module tracks how frequently each error occurs. By monitoring error rates over time, developers can identify recurring issues that may require long-term fixes or optimizations.

Data Privacy Compliance

Sensitive user data is excluded from error reports to ensure compliance with privacy regulations. This prevents exposure of personal information or API keys in error logs.

Integration with Issue Tracker

The module integrates with issue tracking systems (e.g., Jira, GitHub Issues) to automatically create tickets for new errors. This integration streamlines the bug reporting process and helps manage issues within existing workflows.

Backend & Frontend Support

The module works seamlessly across both backend (server-side) and frontend (client-side) environments. It captures errors from server logs as well as client-side JavaScript exceptions, providing comprehensive coverage of all potential issues.

Customizable Notifications

Notifications can be configured to send alerts based on error type, severity, or frequency. Developers can set thresholds for notifications, ensuring that they only receive relevant and critical information without being overwhelmed by less severe issues.

Silent Fail Mode

In the event of a failure while attempting to report an error (e.g., network issues), the module operates in silent fail mode. This prevents the application from crashing due to reporting errors, maintaining system stability.

Diagnostics Collection

The module collects additional diagnostic information, such as environment variables, request headers, and session data, when capturing errors. This extra context helps developers understand the circumstances surrounding an error, facilitating faster resolution.

Cross-Platform Support

The module is compatible with multiple operating systems and architectures, ensuring that it can be used across diverse deployment environments without modification.

Performance Optimization

The module is designed with minimal overhead to ensure it does not impact application performance. This allows for robust error reporting while maintaining smooth operation of the software.

These features collectively make the Error & Crash Reporter a powerful tool for developers to monitor, detect, and resolve issues efficiently, enhancing overall software reliability and user experience.

Error & Crash Reporter Module Documentation

Overview

The Error & Crash Reporter module provides automatic error capture for both frontend and backend environments. It collects detailed error information along with stack traces to aid in debugging and monitoring system health.

Components

1. Backend API (FastAPI)

This FastAPI endpoint handles incoming error reports from the frontend or other services.

from fastapi import APIRouter, HTTPException
from pydantic import BaseModel
import logging

router = APIRouter()
logger = logging.getLogger(__name__)

class RequestErrorModel(BaseModel):
    error_id: str
    timestamp: int
    level: str  # e.g., "error", "warning", "critical"
    message: str
    context: dict
    stack_trace: Optional[str] = None
    metadata: Optional[dict] = None

@router.post("/api/v1/error-reporter/report")
async def report_error(error_data: RequestErrorModel):
    try:
        logger.error(
            f"Reported error: {error_data.message}",
            extra={
                "context": error_data.context,
                "stack_trace": error_data.stack_trace if error_data.stack_trace else None,
                "metadata": error_data.metadata
            }
        )
        return {"status": "success", "message": "Error reported successfully"}
    except Exception as e:
        logger.error(f"Failed to process error report: {str(e)}")
        raise HTTPException(status_code=500, detail="Internal server error while processing the error report.")

2. Frontend UI (React)

This React component provides a simple form for manual error reporting.

import React, { useState } from 'react';

const ErrorReporter = () => {
    const [errorId, setErrorId] = useState('');
    const [timestamp, setTimestamp] = useState(Date.now().toString());
    const [level, setLevel] = useState('error');
    const [message, setMessage] = useState('');
    const [context, setContext] = useState('{}');
    const [stackTrace, setStackTrace] = useState('');
    const [metadata, setMetadata] = useState('{}');

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const errorData = {
                error_id: errorId,
                timestamp: parseInt(timestamp),
                level: level,
                message: message,
                context: JSON.parse(context),
                stack_trace: stackTrace,
                metadata: JSON.parse(metadata)
            };
            
            await fetch('/api/v1/error-reporter/report', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(errorData)
            });
        } catch (err) {
            console.error('Error submitting error report:', err);
        }
    };

    return (
        <div className="error-reporter">
            <h2>Report Error</h2>
            <form onSubmit={handleSubmit}>
                <div className="form-group">
                    <label>Error ID:</label>
                    <input type="text" value={errorId} onChange={(e) => setErrorId(e.target.value)} />
                </div>
                <div className="form-group">
                    <label>Timestamp:</label>
                    <input 
                        type="number"
                        value={timestamp}
                        onChange={(e) => setTimestamp(e.target.value)}
                    />
                </div>
                <div className="form-group">
                    <label>Level:</label>
                    <select value={level} onChange={(e) => setLevel(e.target.value)}>
                        <option value="error">Error</option>
                        <option value="warning">Warning</option>
                        <option value="critical">Critical</option>
                    </select>
                </div>
                <div className="form-group">
                    <label>Message:</label>
                    <textarea 
                        value={message}
                        onChange={(e) => setMessage(e.target.value)}
                        rows={3}
                    />
                </div>
                <div className="form-group">
                    <label>Context:</label>
                    <textarea 
                        value={context}
                        onChange={(e) => setContext(e.target.value)}
                        rows={2}
                    />
                </div>
                <div className="form-group">
                    <label>Stack Trace:</label>
                    <textarea 
                        value={stackTrace}
                        onChange={(e) => setStackTrace(e.target.value)}
                        rows={4}
                    />
                </div>
                <div className="form-group">
                    <label>Metadata:</label>
                    <textarea 
                        value={metadata}
                        onChange={(e) => setMetadata(e.target.value)}
                        rows={2}
                    />
                </div>
                <button type="submit">Submit Error Report</button>
            </form>
        </div>
    );
};

export default ErrorReporter;

3. Data Schema (Pydantic)

The Pydantic model defines the structure of an error report.

from pydantic import BaseModel
from typing import Optional, Dict

class ErrorReport(BaseModel):
    error_id: str
    timestamp: int
    level: str
    message: str
    context: Dict[str, any]
    stack_trace: Optional[str] = None
    metadata: Optional[Dict[str, any]] = None

    class Config:
        json_schema_extra = {
            "example": {
                "error_id": "12345",
                "timestamp": 1678901234,
                "level": "error",
                "message": "Critical error occurred during API call",
                "context": {"request_id": "abc123", "user_id": 123},
                "stack_trace": "Traceback (most recent call last):\n  File ...",
                "metadata": {"environment": "production", "version": "1.0.0"}
            }
        }

Usage Examples

Example 1: Reporting a Backend Error

A backend service can automatically capture errors and send them to the reporter:

try:
    # your code that might throw an error
    some_function_that_might_fail()
except Exception as e:
    logger.error(
        f"Backend error occurred: {str(e)}",
        extra={
            "context": {"request_id": request.id},
            "stack_trace": traceback.format_exc(),
            "metadata": {"service": "backend"}
        }
    )

Example 2: Frontend Error Submission

A frontend developer can manually test the error reporter:

const mockError = {
    error_id: Date.now().toString(),
    timestamp: Date.now(),
    level: 'error',
    message: 'Failed to fetch data from API',
    context: { component: 'DataFetcher', method: 'fetchData' },
    stack_trace: 'Error: network error\n    at fetchData (/components/DataFetcher.js:123)',
    metadata: { environment: 'development', version: '1.0.0' }
};

await fetch('/api/v1/error-reporter/report', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(mockError)
});

Notes

Error & Crash Reporter Module Documentation

Overview

The Error & Crash Reporter module is designed to automatically capture and report errors or crashes from both frontend and backend systems. It provides detailed stack trace summaries and error context to help developers quickly identify and resolve issues.



Use Cases

  1. Real-Time Error Monitoring
    Capture and display errors in real-time to identify issues as they occur.

  2. Error Reporting and Logging
    Automatically log errors with stack traces, timestamps, and contextual data for post-mortem analysis.

  3. Crash Analytics
    Generate reports on application crashes, including frequency, trends, and affected versions.

  4. Integration with DevTools
    Provide developers with actionable insights directly in their IDE or debugging tools.

  5. Custom Error Handling
    Define custom error categories and priorities based on business logic.


Integration Tips


Configuration Options

Below are the key configuration options for the Error & Crash Reporter module:

ParameterData TypeDefault ValueDescription
enableCaptureFrontendErrorsbooleantrueEnable or disable error capturing from frontend components.
logLevelstring”error”Set the logging level (e.g., “debug”, “info”, “warning”, “error”).
maxStackTraceDepthinteger10Maximum depth for stack trace capturing to optimize performance.
reportIntervalinteger60Interval in seconds for error reporting to the backend.
notificationEnabledbooleanfalseEnable or disable notifications for critical errors.
errorBufferSizeinteger100Maximum number of recent errors to store in memory before flushing to disk.

Conclusion

The Error & Crash Reporter module is a vital tool for developers to monitor and resolve issues efficiently. By integrating it with related modules and configuring it according to the needs of your application, you can ensure robust error handling and improved system reliability.