reactjs - 如何处理 React-admin 中的服务器错误？

Question

我使用 GraphQL-Yoga 作为后端。
它返回的错误格式与文档不匹配。但我需要他们的翻译。 React -admin 中是否有一个地方可以让我从服务器捕获所有错误并按照通知组件的预期进行处理？

Error:{
    extraInfo: undefined
    graphQLErrors: {
        locations: [{ column: 3, line: 2 }]
        message: "User with such login does not exist."
        path: ["login"]
    }
    message: "GraphQL error: User with such login does not exist."
    networkError: null
    stack: "Error: GraphQL error: User with such login does not exist.↵    at new ApolloError (http://localhost:3000/static/js/1.chunk.js:39388:24)↵    at Object.next (http://localhost:3000/static/js/1.chunk.js:38008:21)↵    at notifySubscription (http://localhost:3000/static/js/1.chunk.js:270732:18)↵    at onNotify (http://localhost:3000/static/js/1.chunk.js:270776:3)↵    at SubscriptionObserver.next (http://localhost:3000/static/js/1.chunk.js:270828:7)↵    at Object.next (http://localhost:3000/static/js/1.chunk.js:47919:22)↵    at notifySubscription (http://localhost:3000/static/js/1.chunk.js:270732:18)↵    at onNotify (http://localhost:3000/static/js/1.chunk.js:270776:3)↵    at SubscriptionObserver.next (http://localhost:3000/static/js/1.chunk.js:270828:7)↵    at http://localhost:3000/static/js/1.chunk.js:48354:18"
}

Answer 1

我遇到了与环回相同的问题，因为它在错误对象内部而不是直接在响应的消息属性中发送错误。我所做的是:

创建您自己的 httpClient，如文档中用于设置您的身份验证 token 。

const httpClient = (url, options = {}) => {
    // ...
    return fetchUtils.fetchJson(url, options);
}
const dataProvider = jsonServerProvider('http://localhost:3000/api', httpClient);

在您的管理组件中:

<Admin dataProvider={dataProvider}>

然后您需要创建自己的 fetchJson 实现:

import { HttpError } from 'react-admin';

const fetchJson = async (url, options = {}) => {
    const requestHeaders = (options.headers ||
        new Headers({
            Accept: 'application/json',
        })
    );
    if (!requestHeaders.has('Content-Type') &&
        !(options && options.body && options.body instanceof FormData)) {
        requestHeaders.set('Content-Type', 'application/json');
    }
    if (options.user && options.user.authenticated && options.user.token) {
        requestHeaders.set('Authorization', options.user.token);
    }
    const response = await fetch(url, { ...options, headers: requestHeaders })
    const text = await response.text()
    const o = {
        status: response.status,
        statusText: response.statusText,
        headers: response.headers,
        body: text,
    };
    let status = o.status, statusText = o.statusText, headers = o.headers, body = o.body;
    let json;
    try {
        json = JSON.parse(body);
    } catch (e) {
        // not json, no big deal
    }
    if (status < 200 || status >= 300) {
        return Promise.reject(new HttpError((json && json.error && json.error.message) || statusText, status, json));
    }
    return Promise.resolve({ status: status, headers: headers, body: body, json: json });
};

这实际上只是 fetchUtils.fetchJson 的一个副本，但请注意:

return Promise.reject(new HttpError((json && json.error && json.error.message) || statusText, status, json));

您应该在此处设置来自 json 响应的错误消息。

最后，您只需将 fetchUtils.fetchJson 更改为您的 fetchJson 方法:

const httpClient = (url, options = {}) => {
    // ...
    return fetchJson(url, options); // <--- change this line
}