[REACT] crudManager.load() sometimes freeze tab

[mcarner5]

Hello, I could use some help troubleshooting a strange issue. It seems that sometimes when crudManager.load() is called, it will lock up the tab from anywhere from 2-30seconds. This is a problem, because the app uses that method to periodically pull in updates as well as when changing date views. I am seeing this issue when I am developing locally. It also seems to get worse when I deploy to the production environment (frontend hosted in vercel as a vite react app, backend hosted on a local windows server as a spring boot server + mysql )

When I first load the page, this does not happen. Sometimes when I tab away and then come back after a couple minutes it will start doing it. However it seems to happen most times after creating or editing an event.

I've ran the performance profiler in chrome, and it seems like it's getting stuck while performing a "safeJsonStringify" function (attached). Is this something that fires when using the load() function?

performance profile 1.png (172.82 KiB) Viewed 365 times

I've inspected the json response, but nothing crazy is going on. Sometimes it shows that the GET request is taking a long time, other times it shows the request taking the normal time (_120ms) but it still locks up. Inspecting the performance profiler always shows it comes down to safeJsonStringify.

network call 1.png (55.36 KiB) Viewed 365 times

[mcarner5]

I updated my Vite buildConfig so that it has the sourcemap in production. It is coming from the react bundle and not any bryntum packages. I can reliably trigger this if i quickly create/edit an event and then trigger another load. I tried to code it in a way that multiple loads/syncs cannot occur at the same time, but I'm wondering if that is the problem here. I'm going to play around with it and see.

[mcarner5]

So that does not seem to be the issue. I've tried adding explicit checks EVERYWHERE for crudManager.isCrudManagerLoading and crudManager.isCrudManagerSyncing along with some console.log()'s to see when it's detecting that load/sync state. This scenario still triggers the event:

• Create an event
• Immediately press the "Next Day" button, which changes scheduler start/end datetime to the following day as well as triggering crudManager.load()
• Nothing unusual happens, scheduler switches to the following day
• I don't do anything for a few seconds
• I press the "Previous Day" button, which does the same as "Next Day", but instead goes back a day
• Tab immediately freezes up, fans on my computer spin to max. Tab never becomes functional again.
• Checking the profiler I see that giant stacktrace that ends with jsonSafeStringify

I still think this has something to do with how I'm handling the scheduler view and switching between timeframes. Here's a quick rundown of how I have things set up:

I have the view locked on a single day view. It starts at 6am and goes until around 8pm. The user switches between days by clicking some buttons, or selecting a date from a datepicker:

prev and next button.png (35.04 KiB) Viewed 332 times

These are defined in the scheduler config I'm passing to the scheduler component:

            {
                type: 'button',
                ref: 'previousDay',
                cls: '',
                icon: '',
                text: 'Previous Day',
                onClick: () => {
                    handlePreviousDay()
                }
            },
            {
                type: 'button',
                ref: 'nextDay',
                cls: '',
                icon: '',
                text: 'Next Day',
                onClick: () => {
                    handleNextDay()
                }
            },
            {
                type: 'datefield',
                ref: 'datepicker',
                label: 'Selected Date',
                value: selectedDate, // Set default date value
                onChange: event => {
                    handleDatePickerChange(event.value)
                },
            },

Each one calls a function that updates the scheduler start/end datetimes, as well as triggers a load of the new data:

handleNextDay = () => {
        if (selectedDate) {
            if (!schedulerRef?.current?.instance.crudManager.isCrudManagerLoading &&
                !schedulerRef?.current?.instance.crudManager.isCrudManagerSyncing){
            const newDate = new Date(selectedDate);
            newDate.setDate(selectedDate.getDate() + 1);
            setSelectedDate(newDate);
            updateSchedulerTimeSpan(newDate);
            } 
        }
    }

    const updateSchedulerTimeSpan = async (date: Date) => {
        const scheduler = schedulerRef?.current?.instance

    let startDate = new Date(date.setHours(6, 0, 0, 0))
    let endDate = new Date(date.setHours(19, 0, 0, 0))
    if (scheduler &&
        !scheduler.crudManager.isCrudManagerLoading &&
        !scheduler.crudManager.isCrudManagerSyncing) {

        //UpdateTimespan
        if (!scheduler.crudManager.isCrudManagerLoading &&
            !scheduler.crudManager.isCrudManagerSyncing) {
            await scheduler.setTimeSpan(startDate, endDate);
        } 

        //Update load params
        if (!scheduler.crudManager.isCrudManagerLoading &&
            !scheduler.crudManager.isCrudManagerSyncing) {
            scheduler.crudManager.on('beforeLoad', (event) => {
                // console.log(event)
                event.pack.startDate = startDate.toISOString()
                event.pack.endDate = endDate.toISOString()
                return event;
            });
        } 

        try {
            // await scheduler.crudManager.load();
            //Trigger crudManager load
            if (!scheduler.crudManager.isCrudManagerLoading &&
                !scheduler.crudManager.isCrudManagerSyncing) {
                scheduler.crudManager.load()
            } 
        } catch (e) {
            console.log("ERROR scheduler.crudManager.load:", e)
        }


    } 
};

[mats]

Would it be possible for you to share a small test case with us so we could run this and debug locally?

[mcarner5]

Yes sir. I have created a stripped down repo however I think it would be a good idea to tie it to a staging environment. I have set this up on our local server and I need to send you a .env file and some auth0 credentials so you can connect and log in. Is there a way to send you a file securely?

Once I get this to you, you can set everything up:

• Extract everything to the same folder

• Drop the .env into same folder as package.json

• yarn run dev

• access frontend via http://localhost:5173

• Redirected to auth0 login portal, input credentials

• should then take you to the frontend

There seem to be two ways to recreate the issue, the first one is:

• Try to create an event. Type in a title so it'll let you save

• BEFORE YOU SAVE IT, place your mouse over the "Next Day" button.

• Press ENTER key to save the event and immediately try to click "Next Day" a couple times

• Sometimes if this doesn't trigger the issue, you can wait a second or two and press "Previous Day" and it will freeze the tab

• If all else fails, just keep trying to create/edit event and afterwards clicking one of the buttons to change. It seems to freeze up frequently even several seconds after creating or updating an event.

Second one is:

• Keep repeatedly pressing the "Previous Day" and "Next Day" buttons. It seems to cause it faster if there are more events. Eventually it'll start taking 1-5 seconds to resolve each click

[ghulam.ghous]

Hi Mcarner5,

You can send it to our email: support@bryntum.com. It is being used when the customers have privacy issues as it is only accessible to the bryntum team.

Regards,
Ghous

[mcarner5]

Thank you. Just sent an email with the repo and other info.

[tasnim]

Hi,

How can I run your application? I'm getting error while doing npm install
What node version do you use?

[mcarner5]

tasnim,

I am using yarn as my package manager. Can you use that and run "yarn install" ? That works for me.

I do that same error if I use npm. I was able to get it working with "npm install --legacy-peer-deps".

[tasnim]

Hi,

After running the application I'm getting a blank page. I think it's missing the .env file or something (maybe you forgot to send it)