Page at 120% cpu issue

franse · January 31, 2025, 8:47pm

Hello!
I can't delete the other post that I was talking about this issue, there, my theory was about server side condition, and the problem I have is another one, so in order to not create confusion I'll like to start again:

NodeJS
Wappler 7 Beta 16:

I have this SC with both custom query:

And in another SC: insert action:

image946×129 4.85 KB

The server connect has a session storage cache

<dmx-serverconnect id="serverconnect5_secciones" url="/api/proyectos/secciones" dmx-param:proyecto="1" dmx-param:my_incompleted_task="" dmx-param:incomplete="" cache="session1" ttl="3600"></dmx-serverconnect>

Whenever I call the server connect with a button in order to reload it, it does it without issues

<a class="dropdown-item" href="#" dmx-on:click="serverconnect5_secciones.load({},true)">Forzar recarga</a>

Now, I have this form:

<form id="form2" method="post" is="dmx-serverconnect-form" action="/api/proyectos/crear_tarea" dmx-on:success="serverconnect5_secciones.load({},true)">

And this is breaking all the page..

BUT
If I remove dmx-on:success="serverconnect5_secciones.load({},true)"
Then there's no issues on the page..

One observation I can make here is:
On the first case, (with the on:success) the form doesn't bring the data:

Without the on:success:

I tried to record a performance on chrome but it fails, can't finish the task..

Thanks in advance..

PS: No errors on console..

franse · January 31, 2025, 8:56pm

If anybody want to test it out, I can share link via DM

Alexander_Paladines · January 31, 2025, 9:24pm

Hi, maybe if you try it in another browser in incognito mode, avoiding any kind of previously stored cache, sometimes with the same browser without closing it for a long time it starts to hang and becomes slow.

franse · January 31, 2025, 9:42pm

@Alexander_Paladines Thanks for the reply..
Tried with incognito and firefox, same issue..
Also my Android phone..

Alexander_Paladines · January 31, 2025, 9:56pm

What happens if you disable the cache cache="session1" in serverconnect5_secciones?

franse · January 31, 2025, 9:59pm

Same result
Thanks for the idea, have tried so many things, can't find the issue here..

Alexander_Paladines · January 31, 2025, 10:10pm

Ok, now I'm curious, I can try your link if you want.

franse · January 31, 2025, 10:12pm

It would be really nice, let me configure ngrok..

I was able to replicate the issue on firefox and performance tab has recorded this:

There's an endless repeat here..

Alexander_Paladines · January 31, 2025, 10:20pm

Ok, try to add a Unique key to repeater, it must to came from your same serverconnect.

patrick · February 3, 2025, 9:56am

I don't think the Unique Key will help here, it looks like you have some circular dependencies. Check your expressions and see which components depend on each other. This normally happens after some component updates itself and then an other component updates due to that change and than components triggers another update in the first component causing an infinite loop.

franse · February 3, 2025, 10:51am

Thanks @patrick, here is the code:

    <table class="table table-striped table-bordered table-hover table-sm" dmx-show="!input2_group.input1.checked">
        <thead>
            <tr>
                <th>Id</th>
                <th>Feature</th>
                <th>Usuarios</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="serverconnect5_secciones.data.custom" id="tableRepeat2" class="style22">
            <tr dmx-on:click="collapse1.toggle()">
                <td dmx-text="id_feature"></td>
                <td dmx-text="name_seccion"></td>
                <td>
                    <button id="btn1" class="btn" dmx-repeat:repeat1="repeat1" dmx-class:redbutton="tareas==1" dmx-class:greenbutton="tareas==0">{{user}}</button>
                </td>
                <td><button id="btn5" class="btn btn-outline-primary" data-bs-target="#modal2" dmx-on:click="modal2.show();modal2.form2.text5.setValue(id_feature);modal2.form2.text6.setValue(name_seccion)"><i class="far fa-plus-square"></i>&nbsp;</button></td>

            </tr>
            <tr class="style23">
                <td colspan="4" class="style24">
                    <div class="collapse" id="collapse1" is="dmx-bs5-collapse">
                        <div class="container">
                            <div class="d-flex" dmx-repeat:repeat2="repeat2">
                                <p dmx-class:style19="shortname==serverconnect3_traer_logged.data.query.shortname"><i class="fas fa-chevron-right style30"></i>&nbsp;{{shortname}}</p>
                                <p dmx-class:style10="status_tarea==1" dmx-class:style11="status_tarea==2" dmx-class:style12="status_tarea==3" class="style29">{{name_tarea}}</p>
                            </div>

                            <div class="row style21 visually-hidden" is="dmx-repeat" id="repeat3" dmx-bind:repeat="repeat2">
                                <div class="col-12">
                                    <div class="row style25" dmx-on:click="browser1.goto('/proyectos/tarea/'+id_tarea)">
                                        <div class="style26 col-4">
                                            <p dmx-class:style19="shortname==serverconnect3_traer_logged.data.query.shortname" class="style28"><i class="fas fa-chevron-right" dmx-class:style19=""></i>&nbsp;{{shortname}}</p>
                                        </div>
                                        <div class="style27 col-8">
                                            <p dmx-class:style10="status_tarea==1" dmx-class:style11="status_tarea==2" dmx-class:style12="status_tarea==3">{{name_tarea}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

The problem here is:
My form (which is in a modal) has:
dmx-on:success="serverconnect5_secciones.load({},true)"
If I remove that line:

The page doesn't freeze
Now the form response appears on the network tab (not a relevant thing, but just sharing that)

But, using on:click load serverconnect5 as many time as I want, no issues

patrick · February 3, 2025, 11:46am

What does dmx-repeat:repeat2="repeat2" do? It looks like an incorrect expression this is referencing itself.

franse · February 3, 2025, 12:07pm

I have a sc, with a repeat inside a repeat, and I confirm one is called "repeat2", maybe the name is the cause of the issue?

I mean the app connect component repeater id="repeat2" will repeat from "repeat2" that is coming from the sc..
(All done by the editor and not changed on the code)

I will try to change the sc step name to repeatdata2 or something else and let you know if that help

franse · February 4, 2025, 3:12pm

Seems to be solved with that..
repeat2 was sended by the server connect (custom query, don't know why I've call it like that) but also the repeater on app connect was called repeat2, that's why the loop, thanks @patrick and also @Alexander_Paladines for the help