Premium support for our pure JavaScript UI components


Post by afgrundsvisioner »

Hi, we are using CRUD manager as a network communication tool.

Upon creating first project on a board (if the board is empty), a CRUD manager produces 400 error with the text "The Type field is required.".

There is no mention which type and where needs to be added to resolve an error.

I've added a video with voice explanation of the error along with the another video that shows that there is not that error if at least one event is already present on a board.

Also, I add couple of key code samples that are responsible for an action of event creating.

Function that triggers eventStore.add, to consequently trigger CRUD manager SYNC.

    const checkErrorsOnSubmit = (nextEventData: any) => {
        if (!nextEventData.type) nextEventData.type = types.ProjectTypeEnum.PLACEHOLDER;

    if (Object.keys(errors).length === 0) {
        if (uuid.validate(props.data.id)) {
            eventStore.getById(props.data.id).set({ ...nextEventData });
        } else {
            eventStore.getById(nextEventData.id).remove();
            delete nextEventData.id;
            eventStore.add(nextEventData);
        }

        dispatch(projectModalSlice.actions.setOnClose(() => {}));
        dispatch(projectModalSlice.actions.setIsSync(true));
    }
};

Crud manager initialization

export const initCrudManager = () => {
    resetBryntumStores();

const crudManager = new CrudManager({
    eventStore,
    resourceStore,
    stores:   [ unassignedEventStore ],
    autoLoad: true,
    autoSync: true,
    onLoad() {
        console.info('CRUD manager: data loaded.');
    },
    onSync() {
        console.info('CRUD manager: data synced.');
    },
    validateResponse: !!__DEV__,
    transport:        {
        load: { url: `${API_URL}/api/projectsoverview/load/${NEXT_PROJECTS_OVERVIEW_ID}` },
        sync: { url: `${API_URL}/api/projectsoverview/sync` },
    },
    listeners: {
        beforeSend: ({ requestConfig }: any) => {
            AjaxHelper.fetch = async (url: string, options?: FetchOptions | undefined) => {
                return fetchWithRetry(url, 0, options);
            };

            const session = reduxStore.getState().session;
            const token = session?.user?.access_token;
            requestConfig.headers = {
                Authorization:  `Bearer ${token}`,
                'Content-Type': `${API_DEFAULT_CONTENT_TYPE}`,
            };
        },
        beforeSync: () => {
            const isViewer = checkUserRole('viewer');
            if (isViewer) {
                return false;
            }
            return true;
        },
        loadFail: processCRUDManagerError,
        syncFail: processCRUDManagerError,
    },
});

reduxStore.dispatch(crudManagerSlice.actions.init(crudManager));

return crudManager;
};

/* Helpers */
export function processCRUDManagerError(event: any) {
    // ? Handle CRUD Manager failed responses here
    const { response } = event;

console.log('xxx', event);

console.error('CRUD manager error', response?.errors ?? 'Unknown error occurred');
}

export async function fetchWithRetry(
    url: string,
    retries: number,
    options?: FetchOptions | undefined,
) {
    const response = await originalBryntumFetch(url, options);
    if (response.status === 401) {
        if (retries < API_RETRY_COUNT) {
            retries++;
            await new Promise((resolve) => {
                setTimeout(resolve, API_RETRY_TIMEOUT_IN_MS);
            });
            await fetchWithRetry(url, retries, options);
        } else {
            signOut({ redirect: true }); // TODO: change to false once the bryntum reset is fixed
        }
    } else {
        return response;
    }
}

I wasn't able to find any other forum posts related to this error, the documents miss this specific error explanation as well.
How to resolve this error?

Attachments
Error is not present example.mp4
(9.32 MiB) Downloaded 15 times
Error is present example.mp4
(20.78 MiB) Downloaded 16 times

Post by alex.l »

Hi, this doesn't look like frontend CrudManager error. This is server error, CrudManager cannot return failed responses.
Please make sure if you server side is handled this correct.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/400

All the best,
Alex


Post by afgrundsvisioner »

sounds like an idea! I will check backend side.


Post Reply