@alicloud/xconsole-rc-error-prompt v1.0.0-beta.6

@alicloud/xconsole-rc-error-prompt

see in action

安装

tnpm install @ali/builder-abc -g;
tnpm i --save prop-types react react-dom @alife/next @alicloud/xconsole-rc-dialog @alicloud/xconsole-rc-error-prompt

@alicloud/xconsole-rc-error-prompt 之前的是它的依赖，需要使用者安装（包括 JS 和 CSS）。

你自己的 alert-error

@alicloud/xconsole-rc-error-prompt 是一个工厂方法，它不知道错误的 code、message，请求相关的 method、url、params、body、requestId 等的任何信息，需要你告诉它。

比如你在项目的 src/util/ 下建如下一个目录：

src/
 └─ util/
     └─ alert-error
        ├─ index.js
        └─ index.less

index.less

@import (inline) '~@alicloud/xconsole-rc-dialog/dist/index.css'; // 如果你已经安装了且在别处引了它的样式，这行可以不要
@import (inline) '~@alicloud/xconsole-rc-error-prompt/dist/index.css';

index.js

import _get from 'lodash/get';

import errorPrompt from '@alicloud/xconsole-rc-error-prompt';

// 注意以下几行 import 是假的，你需要用你自己的本地代码替换之
import intl from ':intl'; // 绝对不要用硬编码的字符串
import confGet from ':conf/get'; // 用于获取当前应用的 locale 等
import { // 你可能需要一个地方维护你关心的错误码或错误名常量
  ERROR_NAME,
  ERROR_CODE
} from ':const/error';

import './index.less';

export default errorPrompt({
  locale: confGet('LOCALE'),
  messages: {},
  ignoredParamKeys: [],
  ignoreBodyKeys: [],
  shouldIgnore(err) {
    return err.code === ERROR_CODE.CAN_BE_IGNORED;
  },
  getTitle(err) {
    if (err.name === ERROR_NAME.SIGN_IN || err.code === ERROR_CODE.SIGN_IN) {
      return intl('sign_in.title');
    }
  },
  getMessage(err) {
    if (err.code === ERROR_CODE.CHANGE_MESSAGE) {
      return intl('error_message.code_xx');
    }
  },
  getConfirm(err) {
    if (err.name === ERROR_NAME.SIGN_IN || err.code === ERROR_CODE.SIGN_IN) {
      return intl('sign_in.confirm');
    }
  },
  // 为了能够展示请求错误，下面这些方法你需要设定，不设定将不会有「详情」可以看
  getRequestId(err) {
    return _get(err, '_fetch.requestId');
  },
  getRequestUrl(err) {
    return _get(err, '_fetch.url');
  },
  getRequestMethod(err) {
    return _get(err, '_fetch.method');
  },
  getRequestParams(err) {
    return _get(err, '_fetch.params');
  },
  getRequestBody(err) {
    return _get(err, '_fetch.body');
  },
  getRequestExtra(err) {
    return {
      EXTRA1: _get(err, '_fetch.extra1'),
      EXTRA2: _get(err, '_fetch.extra2')
    };
  },
  onConfirm(err) {
    if (err.name === ERROR_NAME.SIGN_IN || err.code === ERROR_CODE.SIGN_IN) {
      window.location.reload();

      return false;
    }
  }
});

直接使用

import alertError from ':util/alert-error';

// 在有必要的时候
someAction().catch(alertError);

作为 dva-plugin

因为实在是太少的代码，所以没有抽成组件的一部分，而是需要调用者自己简单封装一下。

src/plugin/error.js

import alertError from ':util/alert-error';

export default {
  onError(err) {
    if (process.env.NODE_ENV === 'development') {
      console.warn('[error plugin]', err); // eslint-disable-line no-console
    }

    return alertError(err);
  }
};

src/app.js

import pluginError from ':plugin/error';

app.use(pluginError);

参数说明

注意：

• 所有的参数均为可选
• 所有的 getXx 方法在无返回或 return 空的情况下都会回退到兜底默认值

getRequestXx

getRequestId、getRequestMethod、getRequestUrl、getRequestParams、getRequestBody、getRequestExtra 这些方法得到的结果将组成如下对象：

{
  request_id: string;
  method: string;
  url: string;
  params: object;
  body: object;
}

这个对象将回传给 getTitle、getConfirm、getCancel、getCode、getMessage 作为它们的第二个参数，以便需要的时候可以从里边拿需要的数据（注意 details 需要判空）。

FAQ

没有样式？

是不是忘记引入 CSS？你需要在适当的位置引入依赖的 CSS。

注意，如果你没有安装 @alicloud/xconsole-rc-dialog，你需要安装它，并在你适当的位置引它的样式。

你需要引入至少以下两个样式文件：

@import (inline) '~@alicloud/xconsole-rc-dialog/dist/index.css';
@import (inline) '~@alicloud/xconsole-rc-error-prompt/dist/index.css';

强烈推荐用 @alicloud/xconsole-rc-dialog 来替换 fusion 的 dialog 以及 SlidePanel。

没有详情？

你需要实现以下方法：

• getRequestId(err)
• getRequestUrl(err)
• getRequestMethod(err)
• getRequestParams(err)
• getRequestBody(err)
• getRequestExtra(err)

自定义标题、按钮、展示信息

实现以下方法

• getTitle(err, details)
• getConfirm(err, details)
• getCancel(err, details)
• getMessage(err, details)

任何问题直接找 @驳是。