Custom JS but getting RangeError: Maximum call stack size exceeded error

Support
1

Neil Manchester:
I have integrated fullcalender.io into my app. Mostly working but when I try to drag an event to a different time or different clinician resource column I get a RangeError: Maximum call stack size exceeded error in the console and the page freezes. Process is as follows

  1. Calendar renders when the page loads and includes the following function
eventDrop: function(info) {
        debugger
        var eventInfo = info.event;
        var eventID = info.event._def.publicId;
        var start = info.event.start;
        if (info.newResource !== null) {
            var resourceID = info.newResource.id;
            BF.namedAction('eventDrag', {
                eventID: eventID,
                eventInfo: eventInfo,
                resourceID: resourceID,
                start: start

            });
        } else {
            BF.namedAction('eventDrag', {
                eventID: eventID,
                eventInfo: eventInfo,
                start: start
            });
        }
    },
  1. Once the user drags and drops the appointment this fires and runs the eventDrag NA
"eventDrag": [{
            "action": "function",
            "function": "debugger\n//Event ID of dragged event\nmodel.movedAppointment.id = action.options.eventID;\n\n//Duration of the event\nvar duration = action.options.eventInfo.extendedProps.duration;\n\n//New start time of event\nmodel.movedAppointment.start = action.options.start;\n\n//End time calculated using moment\nvar end = moment(model.movedAppointment.start).add(duration, 'minutes');\nmodel.movedAppointment.end = end;\n\n\n//New resource ID if the event was dragged to a different resource\nif (action.options.resourceID) {\n    model.movedAppointment.idClinician = action.options.resourceID;\n}\n",
            "options": {}
        }, {
            "action": "runUtilityHook",
            "options": {
                "modelFilterKeys": ["movedAppointment"],
                "type": "dragAppointment"
            }
        }, {
            "action": "namedAction",
            "name": "getCalendarEvents"
        }, {
            "action": "namedAction",
            "name": "renderCalendar"
        }],

This updates the event details in FileMaker, gets the array of events for the visible dates and then re-renders the calendar.

The dragAppointment and getCalendarEvents both show as firing in Helper.

Any ideas what might be causing the error?

Delfs:
This is typically caused when you are passing a deep JS object through BF’s actions and heres why:

When you pass something via

// somewhere in some js
 ...  namedAction('someActionScript' , {event : event } )

event is probably a large and deep JS object that has circular dependancies deep inside.

BF may try to serialize ( convert to a string) this data as it passes the parameters into the actions and thus causes the circular error.

There are a few things you can do to solve this:
1 - just pass the stuff you really need eg:

 ...  namedAction('someActionScript' , { 
   id : event.id,
   date: event.date 
   } 
)

2 - preventClone key - as noted here:
https://docs.fmbetterforms.com/reference/actions-processor/actions_overview#the-action-object

Neil Manchester:
Ok thanks. Must be the eventInfo then. I’ll take a look at that and just grab the stuff I need from that.

Neil Manchester:
Thanks, that fixed it. Juste replace the var eventInfo = info.event; with var duration = info.event.extendedProps.duration; as this was the only info I needed from it.