From eac9e3a2a28adb023f437fdaff7f342aa51287c7 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Mon, 7 Oct 2019 12:21:02 +0530 Subject: [PATCH 1/5] add .idea to gitignore --- app/client/.gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/app/client/.gitignore b/app/client/.gitignore index 436ff4fe1b..0a4e9d9f84 100755 --- a/app/client/.gitignore +++ b/app/client/.gitignore @@ -26,3 +26,4 @@ yarn-error.log* /out /public/fonts/* /src/assets/icons/fonts/* +.idea From 122a4c543b76db1f3975fa1070a1dc25b6096b08 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Mon, 7 Oct 2019 17:59:38 +0530 Subject: [PATCH 2/5] Toast messages for caught errors --- .../src/constants/ReduxActionConstants.tsx | 31 +++++++++++++++++++ app/client/src/constants/errors.ts | 15 +++++++++ .../src/editorComponents/ToastComponent.tsx | 8 +++++ app/client/src/sagas/ErrorSagas.tsx | 17 ++++++++-- app/client/src/sagas/PageSagas.tsx | 1 + 5 files changed, 70 insertions(+), 2 deletions(-) create mode 100644 app/client/src/constants/errors.ts create mode 100644 app/client/src/editorComponents/ToastComponent.tsx diff --git a/app/client/src/constants/ReduxActionConstants.tsx b/app/client/src/constants/ReduxActionConstants.tsx index a40adcf4e7..1e72503a14 100644 --- a/app/client/src/constants/ReduxActionConstants.tsx +++ b/app/client/src/constants/ReduxActionConstants.tsx @@ -1,4 +1,6 @@ +import _ from "lodash"; import { WidgetProps, WidgetCardProps } from "../widgets/BaseWidget"; +import * as errorConstants from "./errors"; export const ReduxActionTypes: { [key: string]: string } = { REPORT_ERROR: "REPORT_ERROR", @@ -52,6 +54,35 @@ export const ReduxActionErrorTypes: { [key: string]: string } = { }; export type ReduxActionErrorType = (typeof ReduxActionErrorTypes)[keyof typeof ReduxActionErrorTypes]; +const apiErrorHandler = (error: object, fallbackMessage: string) => { + const apiError = _.get(error, "response.data.responseMeta.error"); + if (errorConstants.API_ERROR_CODES.indexOf(apiError.code) > -1) { + return apiError.message; + } + return fallbackMessage; +}; + +export const ActionErrorDisplayMap: { + [key: string]: (error: object) => string; +} = { + [ReduxActionErrorTypes.API_ERROR]: error => + apiErrorHandler(error, errorConstants.DEFAULT_ERROR_MESSAGE), + [ReduxActionErrorTypes.FETCH_PAGE_ERROR]: error => + apiErrorHandler( + error, + errorConstants.DEFAULT_ACTION_ERROR("fetching the page"), + ), + [ReduxActionErrorTypes.SAVE_PAGE_ERROR]: error => + apiErrorHandler( + error, + errorConstants.DEFAULT_ACTION_ERROR("saving the page"), + ), + [ReduxActionErrorTypes.FETCH_WIDGET_CARDS_ERROR]: () => + errorConstants.DEFAULT_ERROR_MESSAGE, + [ReduxActionErrorTypes.WIDGET_OPERATION_ERROR]: () => + errorConstants.DEFAULT_ERROR_MESSAGE, +}; + export interface ReduxAction { type: ReduxActionType | ReduxActionErrorType; payload: T; diff --git a/app/client/src/constants/errors.ts b/app/client/src/constants/errors.ts new file mode 100644 index 0000000000..eccd1a9a80 --- /dev/null +++ b/app/client/src/constants/errors.ts @@ -0,0 +1,15 @@ +export const DEFAULT_ERROR_MESSAGE = "There was an error"; +export const DEFAULT_ACTION_ERROR = (action: string) => + `Incurred an error when ${action}`; + +export const API_ERROR_CODES = [ + 1000, + 4000, + 4001, + 4002, + 4003, + 4004, + 4006, + 5000, + 5001, +]; diff --git a/app/client/src/editorComponents/ToastComponent.tsx b/app/client/src/editorComponents/ToastComponent.tsx new file mode 100644 index 0000000000..27f47d9d4e --- /dev/null +++ b/app/client/src/editorComponents/ToastComponent.tsx @@ -0,0 +1,8 @@ +import { Position, Toaster } from "@blueprintjs/core"; + +// To add a toast import this instance and call .show() +// https://blueprintjs.com/docs/#core/components/toast.example +export default Toaster.create({ + className: "toaster", + position: Position.BOTTOM_RIGHT, +}); diff --git a/app/client/src/sagas/ErrorSagas.tsx b/app/client/src/sagas/ErrorSagas.tsx index 754999101f..d868a64b69 100644 --- a/app/client/src/sagas/ErrorSagas.tsx +++ b/app/client/src/sagas/ErrorSagas.tsx @@ -2,8 +2,12 @@ import { ReduxActionTypes, ReduxActionErrorTypes, ReduxAction, + ActionErrorDisplayMap, } from "../constants/ReduxActionConstants"; +import AppToaster from "../editorComponents/ToastComponent"; +import { Intent } from "@blueprintjs/core"; + import { ApiResponse } from "../api/ApiResponses"; import { put, takeLatest } from "redux-saga/effects"; @@ -21,10 +25,19 @@ export function* validateResponse(response: ApiResponse) { } } -export function* errorSaga(errorAction: ReduxAction<{ error: any }>) { +export function* errorSaga( + errorAction: ReduxAction<{ error: { message: string } }>, +) { // Just a pass through for now. // Add procedures to customize errors here - console.log(errorAction.payload.error); + console.log({ error: errorAction }); + // Show a toast when the error occurs + const { + type, + payload: { error }, + } = errorAction; + const message = ActionErrorDisplayMap[type](error); + AppToaster.show({ message, intent: Intent.DANGER }); yield put({ type: ReduxActionTypes.REPORT_ERROR, payload: { diff --git a/app/client/src/sagas/PageSagas.tsx b/app/client/src/sagas/PageSagas.tsx index e63ef3918f..8e844e08d6 100644 --- a/app/client/src/sagas/PageSagas.tsx +++ b/app/client/src/sagas/PageSagas.tsx @@ -67,6 +67,7 @@ export function* fetchPageSaga( export function* savePageSaga(savePageAction: ReduxAction) { const savePageRequest = savePageAction.payload; + savePageRequest.pageId = "123443"; try { const savePageResponse: SavePageResponse = yield call( PageApi.savePage, From 866181b3409f1eef289ec57f5f8f1e6232f0c579 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Mon, 7 Oct 2019 18:02:32 +0530 Subject: [PATCH 3/5] remove error creator --- app/client/src/sagas/PageSagas.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/client/src/sagas/PageSagas.tsx b/app/client/src/sagas/PageSagas.tsx index 8e844e08d6..e63ef3918f 100644 --- a/app/client/src/sagas/PageSagas.tsx +++ b/app/client/src/sagas/PageSagas.tsx @@ -67,7 +67,6 @@ export function* fetchPageSaga( export function* savePageSaga(savePageAction: ReduxAction) { const savePageRequest = savePageAction.payload; - savePageRequest.pageId = "123443"; try { const savePageResponse: SavePageResponse = yield call( PageApi.savePage, From db97974ed0a9f757b57d9caea44ab8784cbd9e8d Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Mon, 7 Oct 2019 18:41:18 +0530 Subject: [PATCH 4/5] review changes --- .../src/constants/ReduxActionConstants.tsx | 31 ------------------- app/client/src/sagas/ErrorSagas.tsx | 29 ++++++++++++----- 2 files changed, 22 insertions(+), 38 deletions(-) diff --git a/app/client/src/constants/ReduxActionConstants.tsx b/app/client/src/constants/ReduxActionConstants.tsx index 1e72503a14..a40adcf4e7 100644 --- a/app/client/src/constants/ReduxActionConstants.tsx +++ b/app/client/src/constants/ReduxActionConstants.tsx @@ -1,6 +1,4 @@ -import _ from "lodash"; import { WidgetProps, WidgetCardProps } from "../widgets/BaseWidget"; -import * as errorConstants from "./errors"; export const ReduxActionTypes: { [key: string]: string } = { REPORT_ERROR: "REPORT_ERROR", @@ -54,35 +52,6 @@ export const ReduxActionErrorTypes: { [key: string]: string } = { }; export type ReduxActionErrorType = (typeof ReduxActionErrorTypes)[keyof typeof ReduxActionErrorTypes]; -const apiErrorHandler = (error: object, fallbackMessage: string) => { - const apiError = _.get(error, "response.data.responseMeta.error"); - if (errorConstants.API_ERROR_CODES.indexOf(apiError.code) > -1) { - return apiError.message; - } - return fallbackMessage; -}; - -export const ActionErrorDisplayMap: { - [key: string]: (error: object) => string; -} = { - [ReduxActionErrorTypes.API_ERROR]: error => - apiErrorHandler(error, errorConstants.DEFAULT_ERROR_MESSAGE), - [ReduxActionErrorTypes.FETCH_PAGE_ERROR]: error => - apiErrorHandler( - error, - errorConstants.DEFAULT_ACTION_ERROR("fetching the page"), - ), - [ReduxActionErrorTypes.SAVE_PAGE_ERROR]: error => - apiErrorHandler( - error, - errorConstants.DEFAULT_ACTION_ERROR("saving the page"), - ), - [ReduxActionErrorTypes.FETCH_WIDGET_CARDS_ERROR]: () => - errorConstants.DEFAULT_ERROR_MESSAGE, - [ReduxActionErrorTypes.WIDGET_OPERATION_ERROR]: () => - errorConstants.DEFAULT_ERROR_MESSAGE, -}; - export interface ReduxAction { type: ReduxActionType | ReduxActionErrorType; payload: T; diff --git a/app/client/src/sagas/ErrorSagas.tsx b/app/client/src/sagas/ErrorSagas.tsx index d868a64b69..832f7b0706 100644 --- a/app/client/src/sagas/ErrorSagas.tsx +++ b/app/client/src/sagas/ErrorSagas.tsx @@ -1,13 +1,15 @@ +import _ from "lodash"; +import { Intent } from "@blueprintjs/core"; import { ReduxActionTypes, ReduxActionErrorTypes, ReduxAction, - ActionErrorDisplayMap, } from "../constants/ReduxActionConstants"; - import AppToaster from "../editorComponents/ToastComponent"; -import { Intent } from "@blueprintjs/core"; - +import { + DEFAULT_ERROR_MESSAGE, + DEFAULT_ACTION_ERROR, +} from "../constants/errors"; import { ApiResponse } from "../api/ApiResponses"; import { put, takeLatest } from "redux-saga/effects"; @@ -25,9 +27,22 @@ export function* validateResponse(response: ApiResponse) { } } -export function* errorSaga( - errorAction: ReduxAction<{ error: { message: string } }>, -) { +type IError = object | { message: string }; + +const ActionErrorDisplayMap: { + [key: string]: (error: IError) => string; +} = { + [ReduxActionErrorTypes.API_ERROR]: error => + _.get(error, "message", DEFAULT_ERROR_MESSAGE), + [ReduxActionErrorTypes.FETCH_PAGE_ERROR]: () => + DEFAULT_ACTION_ERROR("fetching the page"), + [ReduxActionErrorTypes.SAVE_PAGE_ERROR]: () => + DEFAULT_ACTION_ERROR("saving the page"), + [ReduxActionErrorTypes.FETCH_WIDGET_CARDS_ERROR]: () => DEFAULT_ERROR_MESSAGE, + [ReduxActionErrorTypes.WIDGET_OPERATION_ERROR]: () => DEFAULT_ERROR_MESSAGE, +}; + +export function* errorSaga(errorAction: ReduxAction<{ error: IError }>) { // Just a pass through for now. // Add procedures to customize errors here console.log({ error: errorAction }); From 0179a6f3af04bfd0355973d509fedb997aa73b2a Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Mon, 7 Oct 2019 18:49:29 +0530 Subject: [PATCH 5/5] Few more changes --- app/client/src/constants/errors.ts | 12 ------------ app/client/src/editorComponents/ToastComponent.tsx | 1 - app/client/src/sagas/ErrorSagas.tsx | 8 +++++--- 3 files changed, 5 insertions(+), 16 deletions(-) diff --git a/app/client/src/constants/errors.ts b/app/client/src/constants/errors.ts index eccd1a9a80..e7b8e60938 100644 --- a/app/client/src/constants/errors.ts +++ b/app/client/src/constants/errors.ts @@ -1,15 +1,3 @@ export const DEFAULT_ERROR_MESSAGE = "There was an error"; export const DEFAULT_ACTION_ERROR = (action: string) => `Incurred an error when ${action}`; - -export const API_ERROR_CODES = [ - 1000, - 4000, - 4001, - 4002, - 4003, - 4004, - 4006, - 5000, - 5001, -]; diff --git a/app/client/src/editorComponents/ToastComponent.tsx b/app/client/src/editorComponents/ToastComponent.tsx index 27f47d9d4e..9376e93940 100644 --- a/app/client/src/editorComponents/ToastComponent.tsx +++ b/app/client/src/editorComponents/ToastComponent.tsx @@ -3,6 +3,5 @@ import { Position, Toaster } from "@blueprintjs/core"; // To add a toast import this instance and call .show() // https://blueprintjs.com/docs/#core/components/toast.example export default Toaster.create({ - className: "toaster", position: Position.BOTTOM_RIGHT, }); diff --git a/app/client/src/sagas/ErrorSagas.tsx b/app/client/src/sagas/ErrorSagas.tsx index 832f7b0706..4f66de37a6 100644 --- a/app/client/src/sagas/ErrorSagas.tsx +++ b/app/client/src/sagas/ErrorSagas.tsx @@ -27,10 +27,10 @@ export function* validateResponse(response: ApiResponse) { } } -type IError = object | { message: string }; +type ErrorPayloadType = object | { message: string }; const ActionErrorDisplayMap: { - [key: string]: (error: IError) => string; + [key: string]: (error: ErrorPayloadType) => string; } = { [ReduxActionErrorTypes.API_ERROR]: error => _.get(error, "message", DEFAULT_ERROR_MESSAGE), @@ -42,7 +42,9 @@ const ActionErrorDisplayMap: { [ReduxActionErrorTypes.WIDGET_OPERATION_ERROR]: () => DEFAULT_ERROR_MESSAGE, }; -export function* errorSaga(errorAction: ReduxAction<{ error: IError }>) { +export function* errorSaga( + errorAction: ReduxAction<{ error: ErrorPayloadType }>, +) { // Just a pass through for now. // Add procedures to customize errors here console.log({ error: errorAction });