面试题：Solid.js createEffect 的复杂错误处理策略

定位错误根源

控制台日志：
- 首先查看浏览器控制台，Solid.js 抛出错误时通常会在控制台输出错误信息和堆栈跟踪。堆栈跟踪能指出错误发生在哪个文件的哪一行，初步确定是哪个 createEffect 函数抛出的错误。例如，如果堆栈跟踪显示错误来自 src/components/MyComponent.js:23，那么可以重点查看该文件中第 23 行附近的 createEffect 代码。
添加调试语句：
- 在可疑的 createEffect 函数内部添加 console.log 语句，打印关键变量的值。比如，在可能出错的操作之前打印输入参数，在操作之后打印返回值。例如：

createEffect(() => {
    const data = getData();
    console.log('Data before processing:', data);
    const result = processData(data);
    console.log('Result after processing:', result);
    // 后续操作
});

条件断点：
- 如果错误是在特定条件下触发的，可以在编辑器中设置条件断点。比如，在 createEffect 内部某个 if 语句处设置条件断点，当条件满足时暂停执行，以便观察变量状态和执行流程。
隔离组件：
- 将包含可疑 createEffect 的组件从应用中隔离出来，在一个简单的测试环境中运行。可以使用测试框架（如 Jest + @solidjs/testing-library）单独测试该组件及其 createEffect，排除其他组件的干扰，更准确地定位错误。

错误处理策略

try - catch 捕获错误：
- 在 createEffect 函数内部使用 try - catch 块捕获错误。这样可以防止错误向上传播影响整个应用的数据更新流程。例如：

createEffect(() => {
    try {
        // 可能抛出错误的代码
        const data = fetchData();
        const processed = processData(data);
        // 更新状态等操作
    } catch (error) {
        // 错误处理逻辑
        handleError(error);
    }
});

错误状态管理：
- 创建一个全局或局部的错误状态，用于存储和管理捕获到的错误信息。例如，使用 Solid.js 的 createSignal 创建一个错误信号：

const [error, setError] = createSignal(null);
createEffect(() => {
    try {
        // 可能抛出错误的代码
    } catch (error) {
        setError(error);
    }
});

友好的用户提示：
- 根据捕获到的错误类型，向用户显示友好的提示信息。可以在应用的特定位置（如顶部或底部）渲染一个错误提示组件，显示错误信息。例如：

const ErrorMessage = () => {
    const error = error();
    if (error) {
        return <div className="error-message">{error.message}</div>;
    }
    return null;
};

部分功能恢复：
- 在捕获到错误后，尝试恢复部分功能。例如，如果错误是由于网络请求失败导致的，可以提供一个重试按钮。当用户点击重试按钮时，重新执行 createEffect 中的网络请求逻辑。

const [shouldRetry, setShouldRetry] = createSignal(false);
createEffect(() => {
    if (shouldRetry()) {
        try {
            // 重新执行网络请求等操作
            setShouldRetry(false);
        } catch (error) {
            setError(error);
        }
    }
});
const ErrorMessage = () => {
    const error = error();
    if (error) {
        return (
            <div className="error-message">
                {error.message}
                <button onClick={() => setShouldRetry(true)}>Retry</button>
            </div>
        );
    }
    return null;
};

错误上报：
- 将捕获到的错误上报到后端服务器，以便开发人员分析和修复。可以使用 fetch 或第三方错误跟踪服务（如 Sentry）将错误信息发送到服务器。例如：

const handleError = (error) => {
    fetch('/api/error', {
        method: 'POST',
        headers: {
            'Content - Type': 'application/json'
        },
        body: JSON.stringify({
            message: error.message,
            stack: error.stack
        })
    });
    // 同时设置本地错误状态
    setError(error);
};

星途面试题库

面试题：Solid.js createEffect 的复杂错误处理策略

知识考点

面试题答案

定位错误根源

错误处理策略