From 665d09380b4dd830f8c7fde41ab2be470f5be351 Mon Sep 17 00:00:00 2001 From: FringeY <465964690@qq.com> Date: Wed, 1 Jul 2020 19:32:35 +0800 Subject: [PATCH 1/2] feat: errorCenter upgrade --- packages/xconsole-error-center/package.json | 5 +- .../xconsole-error-center/src/alert-error.js | 103 ---------------- .../xconsole-error-center/src/const/index.js | 2 + packages/xconsole-error-center/src/consume.js | 33 ++++++ packages/xconsole-error-center/src/index.js | 30 ++--- packages/xconsole-error-center/src/index.less | 2 - .../src/internal/index.js | 1 + .../src/internal/prompt.js | 110 ++++++++++++++++++ .../stories/index.stories.jsx | 18 ++- 9 files changed, 180 insertions(+), 124 deletions(-) delete mode 100644 packages/xconsole-error-center/src/alert-error.js create mode 100644 packages/xconsole-error-center/src/const/index.js create mode 100644 packages/xconsole-error-center/src/consume.js delete mode 100644 packages/xconsole-error-center/src/index.less create mode 100644 packages/xconsole-error-center/src/internal/index.js create mode 100644 packages/xconsole-error-center/src/internal/prompt.js diff --git a/packages/xconsole-error-center/package.json b/packages/xconsole-error-center/package.json index 2b7c35d1..f98c52b1 100644 --- a/packages/xconsole-error-center/package.json +++ b/packages/xconsole-error-center/package.json @@ -46,6 +46,7 @@ "prop-types": "^15.7.2", "react": "^16.8.6", "react-dom": "^16.8.6", + "@alicloud/xconsole": "^1.0.0-beta.1", "@alicloud/xconsole-rc-error-prompt": "^1.0.0-beta.1", "@alicloud/xconsole-rc-dialog": "^1.0.0-beta.1" }, @@ -56,7 +57,9 @@ "@alicloud/console-components": "^1.0.20", "lodash.get": "^4.4.2", "lodash.reduce": "^4.6.0", - "moment": "^2.24.0" + "moment": "^2.24.0", + "tslib": "^2.0.0", + "typescript": "^3.9.5" }, "gitHead": "555e8f459f0201bb1529801d95942f924649a83a" } diff --git a/packages/xconsole-error-center/src/alert-error.js b/packages/xconsole-error-center/src/alert-error.js deleted file mode 100644 index f01d276a..00000000 --- a/packages/xconsole-error-center/src/alert-error.js +++ /dev/null @@ -1,103 +0,0 @@ -import errorPrompt from '@alicloud/xconsole-rc-error-prompt'; -import _get from 'lodash.get' - -const LOCALE = _get(window, 'ALIYUN_CONSOLE_CONFIG.LOCALE') || 'zh-CN' -const FoundRiskAndDoubleConfirm = 'FoundRiskAndDoubleConfirm' -const ConsoleNeedLogin = 'ConsoleNeedLogin' - -export default ({ - errorConfig = {}, -}) => errorPrompt({ - locale: LOCALE, - messages: {}, - ignoredParamKeys: [], - ignoreBodyKeys: [], - shouldIgnore(err) { - const code = _get(err, 'response.data.code') || err.code; - return code === FoundRiskAndDoubleConfirm; - }, - getTitle(err) { - const code = _get(err, 'response.data.code') || err.code; - if (errorConfig[code]) { - return errorConfig[code].title - } - return 'Error Notice' - }, - getMessage(err) { - const code = _get(err, 'response.data.code') || err.code; - if (errorConfig[code]) { - return errorConfig[code].message - } - return _get(err, 'response.data.message') || err.message || 'No Message Returned.' - }, - getConfirm(err) { - const code = _get(err, 'response.data.code') || err.code; - if (errorConfig[code]) { - return errorConfig[code].confirmLabel - } - return '' - }, - getCancel(err) { - const code = _get(err, 'response.data.code') || err.code; - if (errorConfig[code]) { - return errorConfig[code].cancelLabel - } - return '' - }, - getRequestId(err) { - return _get(err, 'response.data.requestId') || _get(err, 'requestId'); - }, - getRequestUrl(err) { - return _get(err, 'response.config.url') || _get(err, 'data.url'); - }, - getRequestMethod(err) { - return (_get(err, 'response.config.method') || _get(err, 'data.method') || '').toUpperCase(); - }, - getRequestParams(err) { - return _get(err, 'response.config.params') || _get(err, 'data.params'); - }, - getRequestBody(err) { - const ret = {}; - const keys = ['region', 'product', 'action', 'params']; - - keys.forEach(name => { - const val = _get(err, `response.config.originData.${name}`, null); - if (val !== null) { - ret[name] = val; - } - }) - return ret - }, - getRequestExtra(err) { - return { - RESPONSE: _get(err, 'response.data', ''), - }; - }, - onConfirm(err) { - // 如果错误码指定了重定向地址，则页面重定向到指定地址上 - const code = _get(err, 'response.data.code') || err.code; - if (errorConfig[code] && errorConfig[code].confirmHref) { - const redirectUrl = errorConfig[code].confirmHref - window.location.href = redirectUrl - return false - } - // TODO 支持其他行为 - - // 同意对 NeedLogin 默认处理，直接刷新页面，让 OneConsole 层去进行登录 redirect - if (code === ConsoleNeedLogin) { - window.location.reload(); - return false; - } - }, - onCancel(err) { - // 重定向 - const code = _get(err, 'response.data.code') || err.code; - if (errorConfig[code] && errorConfig[code].cancelHref) { - const redirectUrl = errorConfig[code].cancelHref - window.location.href = redirectUrl - return false - } - // TODO 支持其他行为 - }, -}); - diff --git a/packages/xconsole-error-center/src/const/index.js b/packages/xconsole-error-center/src/const/index.js new file mode 100644 index 00000000..bc37ec05 --- /dev/null +++ b/packages/xconsole-error-center/src/const/index.js @@ -0,0 +1,2 @@ +export const FoundRiskAndDoubleConfirm = 'FoundRiskAndDoubleConfirm'; +export const ConsoleNeedLogin = 'ConsoleNeedLogin'; \ No newline at end of file diff --git a/packages/xconsole-error-center/src/consume.js b/packages/xconsole-error-center/src/consume.js new file mode 100644 index 00000000..8fe00661 --- /dev/null +++ b/packages/xconsole-error-center/src/consume.js @@ -0,0 +1,33 @@ +import * as ErrorConsumers from './internal'; +import _get from 'lodash.get'; + +const consume = (error, errorCodes, include, exclude) => { + const code = _get(error, 'response.data.code') || error.code; + const errorConfig = errorCodes[code]; + + if (typeof errorConfig === 'function') return errorConfig(error); + + const { type = 'prompt', enable = true } = (errorConfig || {}); + + if (!enable) return; + + if (include && include instanceof Array) { + if (!include.find((rule) => { + if (typeof rule === 'string') return rule === code; + if (rule instanceof RegExp) return rule.test(code); + })) return; + } else if (exclude && include instanceof Array) { + if (exclude.find((rule) => { + if (typeof rule === 'string') return rule === code; + if (rule instanceof RegExp) return rule.test(code); + })) return; + } + + if (ErrorConsumers[type]) { + ErrorConsumers[type]({ error, code, errorConfig }); + } else { + ErrorConsumers.prompt({ error, code, errorConfig }); + } +} + +export default consume; \ No newline at end of file diff --git a/packages/xconsole-error-center/src/index.js b/packages/xconsole-error-center/src/index.js index e63aff65..6bf797b0 100644 --- a/packages/xconsole-error-center/src/index.js +++ b/packages/xconsole-error-center/src/index.js @@ -1,17 +1,27 @@ -import alertError from './alert-error' -// import './index.less'; +import consume from './consume' +import { ConsoleNeedLogin } from './const' + +const defaultErrorCodes = { + [ConsoleNeedLogin]: { + enable: false + } +} export default ({ errorCenter: { enable = false, errorCode, errorCodes, + include, + exclude } = {}, }) => { if (process.env.NODE_ENV === 'development' && errorCode) { console.error('[XConsole error-center]', '使用 errorCodes 来替代 errorCode(已废弃) '); // eslint-disable-line no-console } + const lastErrorCodes = Object.assign({}, defaultErrorCodes, errorCodes || errorCode || {}); + return { onError(err) { if (!enable) return false @@ -20,21 +30,13 @@ export default ({ console.error('[XConsole error-center]', err, err.response); // eslint-disable-line no-console } - // 自定义 errorPrompt - // if (errorPrompt) { - // return errorPrompt(err) - // } - - return ErrorPrompt(err, { - errorConfig: errorCodes || errorCode || {}, - }) + consume(err, lastErrorCodes, include, exclude); }, } }; +export const ErrorConsume = consume; + export const ErrorPrompt = (err, { errorConfig = {} }) => { - const _alertError = alertError({ - errorConfig, - }) - return _alertError(err); + consume(err, errorConfig); }; diff --git a/packages/xconsole-error-center/src/index.less b/packages/xconsole-error-center/src/index.less deleted file mode 100644 index b067a0ae..00000000 --- a/packages/xconsole-error-center/src/index.less +++ /dev/null @@ -1,2 +0,0 @@ -// @import (inline) '~@alicloud/xconsole-rc-dialog/dist/index.css'; -// @import (inline) '~@alicloud/xconsole-rc-error-prompt/dist/index.css'; diff --git a/packages/xconsole-error-center/src/internal/index.js b/packages/xconsole-error-center/src/internal/index.js new file mode 100644 index 00000000..f5e6b861 --- /dev/null +++ b/packages/xconsole-error-center/src/internal/index.js @@ -0,0 +1 @@ +export { default as prompt } from './prompt'; \ No newline at end of file diff --git a/packages/xconsole-error-center/src/internal/prompt.js b/packages/xconsole-error-center/src/internal/prompt.js new file mode 100644 index 00000000..32b89679 --- /dev/null +++ b/packages/xconsole-error-center/src/internal/prompt.js @@ -0,0 +1,110 @@ +import errorPrompt from '@alicloud/xconsole-rc-error-prompt'; +import { intl } from '@alicloud/xconsole'; +import _get from 'lodash.get'; +import { FoundRiskAndDoubleConfirm, ConsoleNeedLogin } from '../const'; + +const LOCALE = _get(window, 'ALIYUN_CONSOLE_CONFIG.LOCALE') || 'zh-CN' + +const intl2 = (message, fallback = '') => message ? intl(message) : fallback; + +export default ({ + error, + code, + errorConfig, +}) => { + const { + i18nMessages = {} + } = errorConfig; + + errorPrompt({ + locale: LOCALE, + messages: i18nMessages, + ignoredParamKeys: [], + ignoreBodyKeys: [], + shouldIgnore(err) { + return code === FoundRiskAndDoubleConfirm; + }, + getTitle(err) { + if (errorConfig) { + return intl2(errorConfig.title) + } + return intl2(code, 'Error Notice') + }, + getMessage(err) { + const responseMessage = _get(err, 'response.data.message') || err.message || 'No Message Returned.'; + if (errorConfig) { + if (typeof errorConfig.message === 'function') { + const result = message(responseMessage); + return (typeof result === 'string' || typeof result === 'number') ? result : responseMessage + } + return intl2(errorConfig.message, responseMessage) + } + return responseMessage + }, + getConfirm(err) { + if (errorConfig) { + return intl2(errorConfig.confirmLabel) + } + return '' + }, + getCancel(err) { + if (errorConfig) { + return intl2(errorConfig.cancelLabel) + } + return '' + }, + getRequestId(err) { + return _get(err, 'response.data.requestId') || _get(err, 'requestId'); + }, + getRequestUrl(err) { + return _get(err, 'response.config.url') || _get(err, 'data.url'); + }, + getRequestMethod(err) { + return (_get(err, 'response.config.method') || _get(err, 'data.method') || '').toUpperCase(); + }, + getRequestParams(err) { + return _get(err, 'response.config.params') || _get(err, 'data.params'); + }, + getRequestBody(err) { + const ret = {}; + const keys = ['region', 'product', 'action', 'params']; + + keys.forEach(name => { + const val = _get(err, `response.config.originData.${name}`, null); + if (val !== null) { + ret[name] = val; + } + }) + return ret + }, + getRequestExtra(err) { + return { + RESPONSE: _get(err, 'response.data', ''), + }; + }, + onConfirm(err) { + // 如果错误码指定了重定向地址，则页面重定向到指定地址上 + if (errorConfig && errorConfig.confirmHref) { + const redirectUrl = errorConfig.confirmHref + window.location.href = redirectUrl + return false + } + // TODO 支持其他行为 + + // 同意对 NeedLogin 默认处理，直接刷新页面，让 OneConsole 层去进行登录 redirect + if (code === ConsoleNeedLogin) { + window.location.reload(); + return false; + } + }, + onCancel(err) { + // 重定向 + if (errorConfig && errorConfig.cancelHref) { + const redirectUrl = errorConfig.cancelHref + window.location.href = redirectUrl + return false + } + // TODO 支持其他行为 + }, + })(error); +}; diff --git a/packages/xconsole-error-center/stories/index.stories.jsx b/packages/xconsole-error-center/stories/index.stories.jsx index b71151d2..07d1cd15 100644 --- a/packages/xconsole-error-center/stories/index.stories.jsx +++ b/packages/xconsole-error-center/stories/index.stories.jsx @@ -1,12 +1,22 @@ -import * as React from 'react'; +import React, { useEffect } from 'react'; import { storiesOf } from '@storybook/react'; -import XconsoleErrorCenter from '../src/index' +import { ErrorConsume } from '../src/index' storiesOf('XconsoleErrorCenter', module) .add('XconsoleErrorCenter', () => { - return (
+ + useEffect(() => { + ErrorConsume({ + code: 'demo' + }, { + demo: { + title: 'test' + } + }) + }, []); + + return (
-
); }) From ebddff3466a4fc2e2872d906fdae8be16bc17193 Mon Sep 17 00:00:00 2001 From: FringeY <465964690@qq.com> Date: Mon, 6 Jul 2020 16:39:57 +0800 Subject: [PATCH 2/2] feat: support global errorCode config --- packages/xconsole-error-center/README.md | 57 ++++++++++++++++++- packages/xconsole-error-center/src/consume.js | 31 ++++++---- packages/xconsole-error-center/src/index.js | 7 ++- 3 files changed, 79 insertions(+), 16 deletions(-) diff --git a/packages/xconsole-error-center/README.md b/packages/xconsole-error-center/README.md index e28f4cfd..fb24871a 100644 --- a/packages/xconsole-error-center/README.md +++ b/packages/xconsole-error-center/README.md @@ -5,7 +5,62 @@ ## Usage +* use in `appConfig.js` + ```js -import XconsoleErrorCenter from '@alicloud/xconsole-error-center'; +config.errorCenter = { + enable: true, // 全局配置，配置为 false 的话，所有异常都不会被 ErrorCenter 处理 + errorCodes: { + ConsoleNeedLogin: { + enable: false, // 默认 true + type: "prompt", // 错误展示类型，默认 prompt + // 以下都是传递给 prompt 的配置信息 + title: 'Error Title', // 弹窗标题，默认获取 intl(errorCode)，例如 intl(ConsoleNeedLogin) + message: '登录失效，请重新登录', // 弹窗信息，默认值为 error.message + // message: (error) => 'you want string', + confirmLabel: '重新登录', // 确定按钮文案 + confirmHref: 'https://aliyun.com', // 点击确定跳转的链接 + cancelLabel: '留在页面', // 取消按钮文案 + cancelHref: 'https://aliyun.com', // 点击取消跳转的链接 + i18nMessages: {} + }, + PostonlyOrTokenError: (err) => { + // 也可以使用为错误码配置 callback，errorCenter 会优先使用传递的 callback 处理异常 + window.loaction.reload(); + } + }, + include: ['ConsoleNeedLogin', 'PostonlyOrTokenError'], // include 只有配置才生效 + exclude: [], // include 存在时 exclude 无效 + globalErrorCode: { // 未命中 errorCodes 中的配置时默认使用的全局处理配置或方法 + enable: false, // 默认 true + type: "prompt", // 错误展示类型，默认 prompt + // 以下都是传递给 prompt 的配置信息 + title: 'Error Title', // 弹窗标题，默认获取 intl(errorCode)，例如 intl(ConsoleNeedLogin) + message: '登录失效，请重新登录', // 弹窗信息，默认值为 error.message + // message: (error) => 'you want string', + confirmLabel: '重新登录', // 确定按钮文案 + confirmHref: 'https://aliyun.com', // 点击确定跳转的链接 + cancelLabel: '留在页面', // 取消按钮文案 + cancelHref: 'https://aliyun.com', // 点击取消跳转的链接 + i18nMessages: {} + } + // globalErrorCode: (error, code) => {} +}; ``` +* use `ErrorPrompt` +```js +import { ErrorPrompt } from '@alicloud/xconsole-error-center'; + +ErrorPompt(error, { + // 以下都是传递给 prompt 的配置信息 + title: 'Error Title', // 弹窗标题，默认获取 intl(errorCode)，例如 intl(ConsoleNeedLogin) + message: '登录失效，请重新登录', // 弹窗信息，默认值为 error.message + // message: (error) => 'you want string', + confirmLabel: '重新登录', // 确定按钮文案 + confirmHref: 'https://aliyun.com', // 点击确定跳转的链接 + cancelLabel: '留在页面', // 取消按钮文案 + cancelHref: 'https://aliyun.com', // 点击取消跳转的链接 + i18nMessages: {} +}) +``` \ No newline at end of file diff --git a/packages/xconsole-error-center/src/consume.js b/packages/xconsole-error-center/src/consume.js index 8fe00661..054b5c47 100644 --- a/packages/xconsole-error-center/src/consume.js +++ b/packages/xconsole-error-center/src/consume.js @@ -1,15 +1,22 @@ import * as ErrorConsumers from './internal'; import _get from 'lodash.get'; -const consume = (error, errorCodes, include, exclude) => { - const code = _get(error, 'response.data.code') || error.code; - const errorConfig = errorCodes[code]; - - if (typeof errorConfig === 'function') return errorConfig(error); - - const { type = 'prompt', enable = true } = (errorConfig || {}); +const process = ({ + error, + code, + errorConfig +}) => { + if (!errorConfig) return; + if (typeof errorConfig === 'function') return errorConfig(error, code); + const { enable, type = '' } = errorConfig; if (!enable) return; + if (ErrorConsumers[type]) ErrorConsumers[type]({ error, code, errorConfig }); +}; + +const consume = (error, errorCodes, include, exclude, globalErrorCode) => { + const code = _get(error, 'response.data.code') || error.code; + const errorConfig = errorCodes[code] || globalErrorCode; if (include && include instanceof Array) { if (!include.find((rule) => { @@ -23,11 +30,11 @@ const consume = (error, errorCodes, include, exclude) => { })) return; } - if (ErrorConsumers[type]) { - ErrorConsumers[type]({ error, code, errorConfig }); - } else { - ErrorConsumers.prompt({ error, code, errorConfig }); - } + process({ + error, + code, + errorConfig + }); } export default consume; \ No newline at end of file diff --git a/packages/xconsole-error-center/src/index.js b/packages/xconsole-error-center/src/index.js index 6bf797b0..40d13894 100644 --- a/packages/xconsole-error-center/src/index.js +++ b/packages/xconsole-error-center/src/index.js @@ -13,7 +13,8 @@ export default ({ errorCode, errorCodes, include, - exclude + exclude, + globalErrorCode, } = {}, }) => { if (process.env.NODE_ENV === 'development' && errorCode) { @@ -30,7 +31,7 @@ export default ({ console.error('[XConsole error-center]', err, err.response); // eslint-disable-line no-console } - consume(err, lastErrorCodes, include, exclude); + consume(err, lastErrorCodes, include, exclude, globalErrorCode); }, } }; @@ -38,5 +39,5 @@ export default ({ export const ErrorConsume = consume; export const ErrorPrompt = (err, { errorConfig = {} }) => { - consume(err, errorConfig); + consume(err, { ...errorConfig, type: 'prompt', enable: true }); };