这是我的错误处理程序:

export const onAuthQueryStartedErrorToast = async (
  _: any,
  { queryFulfilled }: any,
) => {
  try {
    await queryFulfilled;
  } catch (error) {
    const isError = error as AuthErrorType;

    if (isError.error.data) {
      toast.warn(defineMessage(isError.error.data.message));
    } else {
      toast.warn("some error occured");
    }
  }
};

这是我的终结点和我想要处理的查询

export const AuthService = baseApi.injectEndpoints({
  endpoints: (builder) => {
    return {
      authMe: builder.query<AuthMeResponseType, void>({
        query: () => ({
          url: "v1/auth/me",
          method: "GET",
        }),
        onQueryStarted: onAuthQueryStartedErrorToast,
        providesTags: ["Auth"],
      }), ... }

错误处理就像预期的那样工作,我得到了带有消息的祝wine 词,但是控制台错误401仍然存在,我不知道如何消除它.它似乎在处理程序之前将错误记录到控制台中(如果有意义的话).有什么好主意吗?

推荐答案

据我所知,这是默认的浏览器行为,网络错误将被记录到控制台,你不能从你的网页/应用程序做什么来改变或防止这一点.看到这些日志(log)并不一定意味着应用程序中没有正确处理某些内容.

然而,您可以做的是在控制台中更改您实际看到的内容.换句话说,您可以从控制台"过滤"错误.

在浏览器的devtools中,您可以更改日志(log)记录级别以从记录的输出中删除错误.

例如:

  • Chrome:取消 Select "Verbose"显示所有输出,取消 Select "Errors"不输出错误日志(log).

    enter image description here

  • Safari: Select 任何选项,但不 Select "All"或包含"Errors"的任何多选.

    enter image description here

其他浏览器应该有类似的设置.

Note:更改这些设置仅影响your浏览器.您的页面/应用程序的用户可以,也将仍然能够以他们喜欢的方式配置他们的浏览器,并查看浏览器生成的日志(log).

另请注意,这将隐藏由页面生成的100个错误,而不仅仅是网络错误,因此在开发过程中请注意这一点,您可能需要在以后重新启用错误记录才能查看重要信息.你可以自行决定是否使用.

Reactjs相关问答推荐

父组件更新后不重新呈现子组件

ReactJs;Reaction-Hook-Form:仅当 Select 了特定 Select 列表选项时才显示文本输入

如何从react 18-nextjs 14应用程序路由中的客户端组件呈现服务器组件?

是否为Reaction中未使用的组件生成Tailwincss样式?

为什么在页面重新加载时Location.State变得未定义?

取消 Select 较高组件中的所有行

我无法通过 useContext 显示值

使用jest如何覆盖对象的模拟?我正在使用`jest.mock()`来模拟对象,并希望 for each 测试用例覆盖模拟.

在添加了useplacesautocomplete后,在构建React/Next.js项目时,NPM抛出类型期望的错误

如何在Next.js应用程序中为路由[slug]生成.html文件?

React Router v6 路径中的符号

try 从 React JS 构建此教程游戏但无法继续前进

如何使用样式化函数为 TextField 的输入组件设置样式

我收到Uncaught TypeError: props.handleSelect is not a function

将 useState 设置为组件内部的值

如何通过单击多个选项中的特定项目在模态上呈现不同的标题?

React + i18next + Trans + Prettier:Prettier 最终会在重新格式化 JSX 时 destruct 翻译

如何在react 中更新子组件中的变量?

如何从一组对象映射 MUI 5 图标并更改其 colored颜色 ?

您无权使用阻止 webRequest 侦听器.请务必在 list 中声明 webRequestBlocking 权限