客户端Ajax Post向服务器端上报运行时错误的实现咨询

Got it, let's build out this silent error logging system step by step. You've got a solid start with your initial variable declarations and error handler skeleton—here's how to flesh it out fully, with production-ready safeguards:

1. Full Error Capture Setup #

First, we'll complete your ErrorSetting function and bind it to global error events (to catch both traditional uncaught errors and modern Promise rejections, which basic handlers often miss).

var isDebugging = false;
var logJsErrors = true;
// Add a debounce flag to avoid spamming the server with duplicate errors
var isReporting = false;

// Complete your error handler function
function ErrorSetting(msg, file_loc, line_no, col_no, errorObj) {
    // Skip logging if disabled
    if (!logJsErrors) return;

    // Debug mode: show alerts/console logs (skip in production)
    if (isDebugging) {
        alert(`Error caught:\nFile: ${file_loc}\nLine: ${line_no}\nMsg: ${msg}`);
        console.error("Debug error details:", { msg, file_loc, line_no, col_no, errorObj });
    }

    // Collect extra context to make debugging easier
    var errorData = {
        message: msg,
        file: file_loc,
        line: line_no,
        column: col_no || "N/A",
        stack: errorObj ? errorObj.stack : "No stack trace available",
        pageUrl: window.location.href,
        userAgent: navigator.userAgent,
        timestamp: new Date().toISOString()
    };

    // Trigger silent AJAX post to server
    sendErrorToServer(errorData);
}

// Bind to global uncaught JS errors
window.onerror = ErrorSetting;

// Handle unhandled Promise rejections (critical for modern JS)
window.addEventListener('unhandledrejection', function(event) {
    ErrorSetting(
        `Promise rejection: ${event.reason}`,
        "Promise context",
        "N/A",
        "N/A",
        event.reason
    );
});

2. Silent AJAX POST Function #

We'll use modern fetch with fallback support for older browsers, and prioritize silent failure—if the server doesn't respond, we never interrupt the user experience.

function sendErrorToServer(errorData) {
    // Block duplicate reports if multiple errors fire at once
    if (isReporting) return;
    isReporting = true;

    // Modern fetch implementation
    fetch('/api/log-js-error', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            // Add auth headers if your server requires it (e.g., API key)
            // 'X-API-Key': 'your-server-secret'
        },
        body: JSON.stringify(errorData),
        mode: 'cors', // Adjust to 'same-origin' if your server is on the same domain
        credentials: 'same-origin'
    })
    .catch(function(error) {
        // Silent failure: only log to console in debug mode
        if (isDebugging) {
            console.warn("Failed to send error report:", error);
        }
    })
    .finally(function() {
        // Reset reporting flag after 1 second to allow future reports
        setTimeout(() => { isReporting = false; }, 1000);
    });

    // Optional fallback for older browsers (IE11 and below)
    // if (!window.fetch) {
    //     var xhr = new XMLHttpRequest();
    //     xhr.open('POST', '/api/log-js-error', true);
    //     xhr.setRequestHeader('Content-Type', 'application/json');
    //     xhr.onload = function() { 
    //         if (isDebugging && xhr.status !== 200) console.warn("Error report failed"); 
    //     };
    //     xhr.onerror = function() { 
    //         if (isDebugging) console.warn("Network error sending report"); 
    //     };
    //     xhr.send(JSON.stringify(errorData));
    //     setTimeout(() => { isReporting = false; }, 1000);
    // }
}

3. Server-Side Handling (Example) #

You'll need a simple endpoint to receive and store the error data. Here's a quick Node.js/Express example (adapt to your backend stack like PHP, Python, etc.):

// Express server example
const express = require('express');
const app = express();
const fs = require('fs');

// Parse incoming JSON requests
app.use(express.json());

// Error logging endpoint
app.post('/api/log-js-error', function(req, res) {
    // Log to a file (or store in a database/monitoring tool like Sentry)
    const logEntry = `${new Date().toISOString()} - ${JSON.stringify(req.body)}\n`;
    fs.appendFile('js-errors.log', logEntry, function(err) {
        if (err) console.error("Failed to write error log:", err);
    });

    // Always send a 200 OK to avoid exposing server errors to the client
    res.status(200).send({ success: true });
});

app.listen(3000);

4. Key Optimizations #

• Debouncing: The isReporting flag prevents spamming your server with identical errors (e.g., a loop throwing repeated errors).
• Context Collection: Adding page URL, user agent, and stack traces turns raw error messages into actionable debugging data.
• Silent Failure: We never alert the user if the report fails—this keeps the user experience smooth and unobtrusive.
• Promise Coverage: Catches modern JS errors that traditional window.onerror doesn't handle.

内容的提问来源于stack exchange，提问作者Hemanth Mannam