Cannot perform DataView.prototype.setBigUint64 on a detached ArrayBuffer

[tierracero]

hey hi

JavascriptKit 0.17.0

I'm using SwifWeb framework which is built on top of JavaScriptKit. Here is my view controller which contains a lot of DOM element objects created through JavaScriptKit. I'm not doing anything illegal. The weird things is that at some point app start crashing with Cannot perform DataView.prototype.setBigUint64 on a detached ArrayBuffer error. I think it is not related to some specific code. Before JavaScriptKit v0.17 I used v0.12 and these errors appeared very often. Now I thought this problem has been completely fixed, but it seems it still appears.

app.js:139 TypeError: Cannot perform DataView.prototype.setBigUint64 on a detached ArrayBuffer
    at DataView.setBigUint64 ()
    at clock_res_get (index.esm.js:114:167)
    at __wasi_clock_res_get (1ddb7b2a:0x3b79363)
    at clock_getres (1ddb7b2a:0x3b767a8)
    at __CFDateInitialize (1ddb7b2a:0x2ff76e7)
    at __CFInitialize (1ddb7b2a:0x2fb8851)
    at __wasm_call_ctors (1ddb7b2a:0x76f37)
    at _initialize (1ddb7b2a:0x76f56)
    at startWasiTask (app.js:133:26)

as a note as soon I removed sectionSelectFiled i was able to add many more elements

this is the source code

//
//  FiscalConceptDestinationView.swift
//
//
//  Created by Victor Cantu on 9/28/22.
//

import Foundation
import TCFoundation
import TCCodyFire
import Web

class FiscalConceptDestinationView: Div {

    override class var name: String { "div" }

    let pocid: UUID

    @State var units: Int64

    private var callback: ((
        _ selectedPlace: InventoryPlaceType,
        _ storeid: UUID?,
        _ storeName: String,
        _ custAccountId: UUID?,
        _ placeid: UUID?,
        _ placeName: String,
        _ bodid: UUID?,
        _ bodName: String,
        _ secid: UUID?,
        _ secName: String,
        _ units: Int64,
        _ series: [String]
    ) -> ())

    init(
        pocid: UUID,
        units: Int64,
        callback: @escaping ((
            _ selectedPlace: InventoryPlaceType,
            _ storeid: UUID?,
            _ storeName: String,
            _ custAccountId: UUID?,
            _ placeid: UUID?,
            _ placeName: String,
            _ bodid: UUID?,
            _ bodName: String,
            _ secid: UUID?,
            _ secName: String,
            _ units: Int64,
            _ series: [String]
        ) -> ())
    ) {
        self.pocid = pocid
        self.units = units
        self.callback = callback

        super.init()
    }

    required init() {
        fatalError("init() has not been implemented")
    }

    @State var unitsToDisperse: String = ""

    @State var unitsToDisperseSubTitle: String = ""

    @State var selectedPlace: InventoryPlaceType? = nil

    /// Incase its going to a store  witch store will it be
    @State var selectedStoreId: UUID? = nil

    @State var selectedStoreName: String = ""

    var selectedBodId: UUID? = nil

    var preSelectedSectId: UUID? = nil

    @State var selectedBodIdListener: String = ""

    @State var selectedSecIdListener: String = ""

    @State var searchFolioString: String = ""

    @State var sectionSelectText = ""

    var availableSection: [CustStoreSeccionesSinc] = []

    @State var displayedSection: [CustStoreSeccionesSinc] = []

    @State var sectionSelectResultIsHidden = true

    /// Selected place EG: Order ID,  Store ID...
    var placeid: UUID? =  nil

    lazy var selecctionBox = Div()
        .margin(all: 3.px)
        .padding(all: 3.px)

    lazy var availableStoreBox = Div()
        .class(.roundDarkBlue)
        .padding(all: 3.px)
        .margin(all: 3.px)
        .maxHeight(250.px)
        .overflow(.auto)

    lazy var unitsToDisperseField = InputText(self.$unitsToDisperse)
        .class(.textFiledBlackDark)
        .placeholder("0")
        .textAlign(.right)
        .width(50.px)
        .height(28.px)
        .onKeyDown { tf, event in
            guard let _ = Float(event.key) else {
                if !ignoredKeys.contains(event.key) {
                    event.preventDefault()
                }
                return
            }
        }
        .onFocus { tf in
            tf.select()
        }

    lazy var bodegaSelect = Select(self.$selectedBodIdListener)
        .class(.textFiledBlackDark)

    lazy var sectionSelect = Select(self.$selectedSecIdListener)
        .class(.textFiledBlackDark)

    lazy var sectionSelectFiled = InputText(self.$sectionSelectText)
        .class(.textFiledBlackDark)
        .placeholder("Seleccione Seccion")
        .width(90.percent)
        .fontSize(23.px)
        .height(28.px)
        .onFocus {
            self.sectionSelectResultIsHidden = false
        }
        .onBlur{
            Dispatch.asyncAfter(1.3) {
                self.sectionSelectResultIsHidden = true
            }
        }

    lazy var searchFolioField = InputText(self.$searchFolioString)

    lazy var sectionSelectResult = Div{

    }
        .hidden(self.$sectionSelectResultIsHidden)
        .backgroundColor(.grayBlackDark)
        .borderRadius(all: 24.px)
        .minHeight(100.px)
        .maxHeight(400.px)
        .overflow(.auto)

    @DOM override var body: DOM.Content {

        /// Main Seccion
        Div{

            /// Header
            Div {

                Img()
                    .closeButton(.uiView3)
                    .onClick{
                        self.remove()
                    }

                H2(self.$units.map{ ($0 == 1) ? "Ubicacion de 1 producto" : "Ubicacion de \($0.toString) productos" })
                    .maxWidth(90.percent)
                    .class(.oneLineText)
                    .marginLeft(7.px)
                    .color(.cornflowerBlue)

            }
            .paddingBottom(3.px)

            Div().class(.clear)

            Div {
                Span("Colocar")
                    .marginRight(7.px)

                self.unitsToDisperseField
                    .marginRight(7.px)

                Span(self.$unitsToDisperse.map{

                    guard let int = Int($0) else {
                        return "unidades"
                    }

                    if int == 1 {
                        return "unidad"
                    }
                    else{
                        return "unidades"
                    }

                })

            }
            .fontSize(23.px)
            .paddingBottom(3.px)

            Div().class(.clear)

            self.selecctionBox

        }
        .top(25.percent)
        .backgroundColor(.grayBlack)
        .borderRadius(all: 24.px)
        .position(.absolute)
        .padding(all: 12.px)
        .width(40.percent)
        .left(30.percent)
        .color(.white)
        .hidden(self.$selectedPlace.map { $0 != nil })

        /// Store
        Div{
            /// Header
            Div {

                Img()
                    .closeButton(.uiView3)
                    .onClick{
                        self.remove()
                    }

                H2(self.$unitsToDisperseSubTitle)
                    .color(.cornflowerBlue)
                    .maxWidth(90.percent)
                    .class(.oneLineText)
                    .marginLeft(7.px)

            }
            .paddingBottom(3.px)
            .align(.left)

            Div().class(.clear)

            self.availableStoreBox
                .hidden(self.$selectedStoreId.map { $0 != nil })

            Div {
                H2( self.$selectedStoreName )
                    .color(.white)

                Div().class(.clear).height(7.px)

                Div {
                    Label("Bodega")
                        .fontSize(18.px)
                        .color(.gray)

                    Div{
                        self.bodegaSelect
                            .width(90.percent)
                            .fontSize(23.px)
                            .height(28.px)

                    }
                }
                .class(.section)

                Div().class(.clear).height(7.px)

                Div {
                    Label("Seccion")
                        .fontSize(18.px)
                        .color(.gray)

                    Div{
//                        self.sectionSelect
//                            .width(90.percent)
//                            .fontSize(23.px)
//                            .height(28.px)
                        self.sectionSelectFiled
                    }

                }
                .class(.section)

                Div{
                    self.sectionSelectResult
                }
                .position(.absolute)
                .class(.section)
                .width(95.percent)

                Div().class(.clear).height(7.px)

                Div {
                    Div("Agregar")
                        .onClick {

                            guard let _store = self.selectedStoreId else{
                                showAlert(.alerta, "Seleccione Tienda")
                                return
                            }

                            guard let _bod = UUID(uuidString: self.selectedBodIdListener) else {
                                showAlert(.alerta, "Seleccione Bodega")
                                return
                            }

                            guard let _sec = UUID(uuidString: self.selectedSecIdListener) else {
                                showAlert(.alerta, "Seleccione Bodega")
                                return
                            }

                            self.callback(
                                .store, // selectedPlace
                                _store, // storeid
                                self.selectedStoreName, // storeName
                                nil, // custAccountId
                                nil, // placeid
                                "", // placeName
                                _bod, // bodid
                                (bodegas[_bod]?.name ?? "N/A"), // bodName
                                _sec, // secid
                                (seccions[_sec]?.name ?? "N/A"), // secName
                                self.units, // units
                                [] // series
                            )

                            self.remove()
                        }
                    .class(.uibtnLargeOrange)
                }
                .align(.right)

            }
            .hidden(self.$selectedStoreId.map { $0 == nil })

        }
        .top(25.percent)
        .backgroundColor(.grayBlack)
        .borderRadius(all: 24.px)
        .position(.absolute)
        .padding(all: 12.px)
        .width(40.percent)
        .left(30.percent)
        .color(.white)
        .hidden(self.$selectedPlace.map { $0 != .store })

        /// Order
        Div{

            /// Header
            Div {

                Img()
                    .closeButton(.uiView3)
                    .onClick{
                        self.remove()
                    }

                H2(self.$unitsToDisperseSubTitle)
                    .maxWidth(90.percent)
                    .class(.oneLineText)
                    .marginLeft(7.px)
                    .color(.cornflowerBlue)

            }
            .paddingBottom(3.px)

            Div().class(.clear).height(12.px)

            Div{
                Label("Ingrese Folio")
                    .color(.lightGray)
                    .fontSize(23.px)

                Div{
                    self.searchFolioField
                        .class(.textFiledBlackDarkLarge)
                        .placeholder("Ingrese Folio")
                        .width(90.percent)
                        .fontSize(23.px)
                        .height(27.px)
                        .onEnter { tf in
                            self.searchFolio()
                        }
                }
            }
            .class(.section)

            Div().class(.clear).height(12.px)

            Div{
                Div("Buscar Folio")
                    .onClick {
                        self.searchFolio()
                    }
                .class(.uibtnLargeOrange)
            }
            .align(.right)

        }
        .top(25.percent)
        .backgroundColor(.grayBlack)
        .borderRadius(all: 24.px)
        .position(.absolute)
        .padding(all: 12.px)
        .width(40.percent)
        .left(30.percent)
        .color(.white)
        .hidden(self.$selectedPlace.map { $0 != .order })

        /*
        /// Sold
        Div{

            /// Header
            Div {

                Img()
                    .closeButton(.uiView3)
                    .onClick{
                        self.remove()
                    }

                H2(self.$unitsToDisperseSubTitle)
                    .maxWidth(90.percent)
                    .class(.oneLineText)
                    .marginLeft(7.px)
                    .color(.cornflowerBlue)

            }
            .paddingBottom(3.px)

            Div().class(.clear)
        }
        .top(25.percent)
        .backgroundColor(.grayBlack)
        .borderRadius(all: 24.px)
        .position(.absolute)
        .padding(all: 12.px)
        .width(40.percent)
        .left(30.percent)
        .color(.white)
        .hidden(self.$selectedPlace.map { $0 != .sold })

        /// Merm
        Div{

            /// Header
            Div {

                Img()
                    .closeButton(.uiView3)
                    .onClick{
                        self.remove()
                    }

                H2(self.$unitsToDisperseSubTitle)
                    .maxWidth(90.percent)
                    .class(.oneLineText)
                    .marginLeft(7.px)
                    .color(.cornflowerBlue)

            }
            .paddingBottom(3.px)

            Div().class(.clear)
        }
        .top(25.percent)
        .backgroundColor(.grayBlack)
        .borderRadius(all: 24.px)
        .position(.absolute)
        .padding(all: 12.px)
        .width(40.percent)
        .left(30.percent)
        .color(.white)
        .hidden(self.$selectedPlace.map { $0 != .merm })

        /// Return to vendor
        Div{

            /// Header
            Div {

                Img()
                    .closeButton(.uiView3)
                    .onClick{
                        self.remove()
                    }

                H2(self.$unitsToDisperseSubTitle)
                    .maxWidth(90.percent)
                    .class(.oneLineText)
                    .marginLeft(7.px)
                    .color(.cornflowerBlue)

            }
            .paddingBottom(3.px)

            Div().class(.clear)
        }
        .top(25.percent)
        .backgroundColor(.grayBlack)
        .borderRadius(all: 24.px)
        .position(.absolute)
        .padding(all: 12.px)
        .width(40.percent)
        .left(30.percent)
        .color(.white)
        .hidden(self.$selectedPlace.map { $0 != .returnToVendor })
         */
    }

    override func buildUI() {
        super.buildUI()

        self.class(.transparantBlackBackGround)
        position(.absolute)
        height(100.percent)
        width(100.percent)
        top(0.px)
        left(0.px)

        $unitsToDisperse.listen {

            guard let int = Int64($0) else{
                self.unitsToDisperseSubTitle = "Ubicacion de \($0) productos"
                return
            }

            if int == 1 {
                self.unitsToDisperseSubTitle = "Ubicacion de \($0) productos"
            }
            else{
                self.unitsToDisperseSubTitle = "Ubicacion de \($0) productos"
            }

            self.units = int

        }
        /*
        $selectedBodIdListener.listen {

            self.sectionSelect.innerHTML = ""

            self.selectedSecIdListener = ""

            self.sectionSelect.appendChild(
                Option("Seleccione Seccion")
                    .value("")
            )

            let _bodid = UUID(uuidString: $0)

            if self.selectedBodId == _bodid {
                return
            }

            guard let _bodid = _bodid else {
                return
            }
//
//            var sectionRefrence: [String:CustStoreSeccionesSinc] = [:]
//
//            seccions.forEach { item, sect in
//                if sect.custStoreBodegas == _bodid {
//                    sectionRefrence[sect.name] = sect
//                }
//            }
//
//            let sorted = sectionRefrence.sorted { $0.0 > $1.0 }
//
//            self.availableSection = sorted.map{$1}

            /*
            _sect.forEach { sect in

                let opt = Option(sect.name)
                    .value(sect.id.uuidString)

                if sect.id == self.preSelectedSectId {
                    self.selectedSecIdListener = sect.id.uuidString
                    opt.selected(true)
                }

                self.sectionSelect.appendChild(opt)

            }
            */
        }

        $sectionSelectText.listen {

            let term = $0.uppercased()

            if term.isEmpty {
                self.displayedSection = self.availableSection
                return
            }

            var sections: [CustStoreSeccionesSinc] = []

            var included: [String] = []

            // Starts with
            self.availableSection.forEach { section in
                if section.name.uppercased().hasPrefix(term) {
                    sections.append(section)
                    included.append(section.name)
                }
            }

            // Contains
            self.availableSection.forEach { section in
                if section.name.uppercased().hasPrefix(term) && !included.contains(section.name){
                    sections.append(section)
                }
            }
        }

        $displayedSection.listen {

            self.sectionSelectResult.innerHTML = ""

            $0.forEach { section in
                self.sectionSelectResult.appendChild(
                    Div(section.name)
                        .class(.uibtn)
                        .color(.white)
                )
            }

        }

        $selectedSecIdListener.listen {

        }

        stores.forEach { id, store in
            if id == custCatchStore {
                availableStoreBox.appendChild(
                    Div(store.name)
                        .class(.uibtnLargeOrange)
                        .width(97.percent)
                        .onClick {
                            self.selectStore(storeid: id, storeName: store.name)
                        }
                )
            }
        }

        stores.forEach { id, store in
            if id != custCatchStore {
                availableStoreBox.appendChild(
                    Div(store.name)
                        .class(.uibtnLarge)
                        .width(97.percent)
                        .onClick {
                            self.selectStore(storeid: id, storeName: store.name)
                        }
                )
            }
        }

        InventoryPlaceType.allCases.forEach { type in
            selecctionBox.appendChild(
                Div(type.description)
                    .class(.uibtnLarge)
                    .width(97.percent)
                    .onClick {
                        self.proccessUnits(type: type)
                    }
            )
        }

        unitsToDisperse = units.toString
        */
    }

    override func didAddToDOM() {
        super.didAddToDOM()

        self.unitsToDisperseField.select()

    }

    func proccessUnits(type: InventoryPlaceType) {

        guard let _units = Int64(unitsToDisperse) else{
            showAlert(.alerta, "Ingrese una cantidad valida")
            self.unitsToDisperseField.select()
            return
        }

        if _units > units {
            showAlert(.alerta, "Ingrese menos unidades, no tiene \(_units.toString) unidades")
            self.unitsToDisperseField.select()
            return
        }

        if _units < units {
            showAlert(.alerta, "Ingrese mas de una unidad")
            self.unitsToDisperseField.select()
            return
        }

        guard self.units > 0 else {
            showAlert(.alerta, "Ingrese una cantidad valida")
            self.unitsToDisperseField.select()
            return
        }

        switch type {
        case .store:

            print("select .store")

            print("No of strores \(stores.count)")

            if stores.count == 1 {

                guard let store = stores.first?.value else {
                    return
                }

                self.selectStore(storeid: store.id, storeName: store.name)
            }

            self.selectedPlace = type

        case .order:
            self.selectedPlace = type
            self.searchFolioField.select()
        case .sold:

            addToDom(ConfirmView(
                type: .yesNo,
                title: "Confirme Accion",
                message: "Confirme que va marcar como vendido.",
                callback: { isConfirmed in
                    if isConfirmed {

                        self.callback(
                            .sold, // selectedPlace
                            custCatchStore, // storeid
                            "", // storeName
                            nil, // custAccountId
                            nil, // placeid
                            "", // placeName
                            nil, // bodid
                            "", // bodName
                            nil, // secid
                            "", // secName
                            self.units, // units
                            [] // series
                        )

                        self.remove()
                    }
                }
            ))

        case .merm:

            addToDom(ConfirmView(
                type: .yesNo,
                title: "Confirme Accion",
                message: "Confirme que va marcar como mermado.",
                callback: { isConfirmed in
                    if isConfirmed {

                        self.callback(
                            .merm, // selectedPlace
                            custCatchStore, // storeid
                            "", // storeName
                            nil, // custAccountId
                            nil, // placeid
                            "", // placeName
                            nil, // bodid
                            "", // bodName
                            nil, // secid
                            "", // secName
                            self.units, // units
                            [] // series
                        )

                        self.remove()
                    }
                }
            ))

        case .returnToVendor:

            addToDom(ConfirmView(
                type: .yesNo,
                title: "Confirme Accion",
                message: "Confirme que va regrear vendedor.",
                callback: { isConfirmed in
                    if isConfirmed {

                        self.callback(
                            .returnToVendor, // selectedPlace
                            custCatchStore, // storeid
                            "", // storeName
                            nil, // custAccountId
                            nil, // placeid
                            "", // placeName
                            nil, // bodid
                            "", // bodName
                            nil, // secid
                            "", // secName
                            self.units, // units
                            [] // series
                        )

                        self.remove()
                    }
                }
            ))
        }

    }

    func selectStore( storeid: UUID, storeName: String) {

        /// The store is not same so i will only add to oder since reciving store must decide where it fisicly goes
        if storeid != custCatchStore {

            self.callback(
                .store, // selectedPlace
                storeid, // storeid
                storeName, // storeName
                nil, // custAccountId
                nil, // placeid
                "", // placeName
                nil, // bodid
                "Por Eligir", // bodName
                nil, // secid
                "Por Eligir", // secName
                self.units, // units
                [] // series
            )

            self.remove()
        }
        /// will load place since  it goes in the order
        else{

            loadingView(show: true)

            API.custPOCV1.getPOCBodSec(pocid: pocid, storeid: custCatchStore) { resp in

                loadingView(show: false)

                guard let resp = resp else {
                    showError(.errorDeCommunicacion, .serverConextionError)
                    return
                }

                guard resp.status == .ok else {
                    showError(.errorGeneral, resp.msg)
                    return
                }

                guard let data = resp.data else {
                    showError(.errorGeneral, "No se obtuvo data de la respuesta")
                    return
                }

                self.preSelectedSectId = data.section

                var bods: [CustStoreBodegasSinc] = []

                bodegas.forEach { bodid, bodData in
                    if bodData.custStore == custCatchStore {
                        bods.append(bodData)
                    }
                }

                var _selectedBodegaId: UUID? = nil

                if bods.count == 1 {
                    _selectedBodegaId = bods.first?.id
                }
                else if data.bodega != nil {
                    _selectedBodegaId = data.bodega
                }

                bods.forEach { bod in

                    let opt = Option(bod.name)
                        .value(bod.id.uuidString)

                    if let _sel = _selectedBodegaId {
                        if _sel ==  bod.id {

                            self.selectedBodIdListener = _sel.uuidString

                            opt.selected(true)

                        }
                    }

                    self.bodegaSelect.appendChild(opt)

                }

                self.selectedStoreId = custCatchStore

                self.selectedStoreName = storeName

            }
        }
    }

    func searchFolio() {

        var term = searchFolioString
            .purgeSpaces
            .pseudo

        if searchFolioString.isEmpty {
            showAlert( .alerta, "Ingrese Folio")
            return
        }

        if !term.contains("-") {
            term = "-\(term)"
        }

        loadingView(show: true)

        API.custOrderV1.searchFolio(
            term: term,
            accountid: nil,
            tag1: "",
            tag2: "",
            tag3: "",
            tag4: "",
            description: nil,
            timeEnd: nil,
            timeInit: nil
        ) { resp in

            loadingView(show: false)

            guard let resp = resp else {
                showError(.errorDeCommunicacion, .serverConextionError)
                return
            }

            guard resp.status == .ok else {
                showError(.errorGeneral, resp.msg)
                return
            }

            guard let order = resp.data.orders.first else {
                showError( .errorGeneral, "No se localizo folio, revice de nuevo.")
                return
            }

            self.callback(
                .order, // selectedPlace
                custCatchStore, // storeid
                "Pendiente elegir tienda", // storeName
                order.custAcct, // custAccountId
                order.id, // placeid
                order.folio, // placeName
                nil, // bodid
                "", // bodName
                nil, // secid
                "", // secName
                self.units, // units
                [] // series
            )

            self.remove()

        }
    }
}

[kateinoigakukun]

I'm not sure how the SwiftWeb framework works, but it looks like it doesn't apply a patch for wasmer's wasi implementation like https://github.com/swiftwasm/carton/blob/74b8ca6e1d5ebef70ff6ecebf445b5a9674f83a1/entrypoint/common.js#L135-L152

[tierracero]

Thanks for forwarding issue to the SwifWeb team, they made a fix that you suggested. I have been doing various stress tests and everything seems to be working fine now.