使用React作为前端时查看PHP脚本报错的最佳方案是什么？

解决方案 #

1. PHP侧增加全局错误捕获，统一返回JSON格式 #

在PHP项目的入口文件最顶部添加以下代码，所有运行时错误、致命错误都会被捕获，以合法JSON格式返回，前端不会再出现JSON解析失败的问题：

<?php
// 开发环境开启全量错误报告
error_reporting(E_ALL);
ini_set('display_errors', 0);

// 捕获普通运行错误
set_error_handler(function($errno, $errstr, $errfile, $errline) {
    $res = [
        'code' => 500,
        'msg' => '服务端错误',
        'error_info' => "文件：{$errfile} 第{$errline}行：{$errstr}"
    ];
    echo json_encode($res, JSON_UNESCAPED_UNICODE);
    exit;
});

// 捕获语法、致命级错误
register_shutdown_function(function() {
    $last_error = error_get_last();
    if ($last_error && in_array($last_error['type'], [E_ERROR, E_PARSE, E_CORE_ERROR, E_COMPILE_ERROR])) {
        $res = [
            'code' => 500,
            'msg' => '服务端致命错误',
            'error_info' => "文件：{$last_error['file']} 第{$last_error['line']}行：{$last_error['message']}"
        ];
        echo json_encode($res, JSON_UNESCAPED_UNICODE);
        exit;
    }
});

// 原有全局头配置放在此处
header('Access-Control-Allow-Origin: *');
header('Content-type: application/json');

2. 前端请求逻辑优化，开发环境直接透出错误 #

修改fetch请求的处理逻辑，优先读取原始响应内容，解析失败时直接展示原始返回，开发环境下可以直接弹框提示错误，无需打开控制台：

useEffect(() => {
    fetch("http://localhost:80/php_w_r/api/index.php?url=Users/index", {
        method: 'GET',
    }).then(async (res) => {
        // 先获取原始响应文本
        const rawResponse = await res.text();
        let result;
        try {
            result = JSON.parse(rawResponse);
        } catch (e) {
            // JSON解析失败直接抛出原始内容
            throw new Error(`服务端返回非JSON内容：\n${rawResponse}`);
        }
        // 开发环境检测到服务端错误直接弹框
        if (result.code === 500 && process.env.NODE_ENV === 'development') {
            alert(`服务端错误：\n${result.error_info}`);
        }
        console.log(result);
    }).catch(err => {
        console.error(err);
        if (process.env.NODE_ENV === 'development') {
            alert(`请求错误：\n${err.message}`);
        }
    })
}, [])

3. 配置PHP错误日志，实时查看服务端报错 #

修改XAMPP的php.ini配置文件，开启错误日志写入：

• 找到log_errors配置项，设置为On
• 找到error_log配置项，设置为本地日志路径，比如C:/xampp/php/logs/php_error.log
  开发时可以用终端执行tail -f 你的日志文件路径，所有PHP侧的错误会实时打印在终端中，完全不需要依赖前端返回。

4. 接口调试直接访问地址，复用原有调试习惯 #

需要调试某个接口时，直接把接口URL复制到浏览器地址栏访问，PHP的原生报错会直接展示在页面上，和你之前未使用React时的调试体验完全一致。

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