ExecutionError: Exceeded the prepaid gas -- when called from front end

Question

The transfer() function works perfectly fine when testing and through the CLI. However, when I try to call it from the front end, it returns

Uncaught (in promise) Error: {"index":0,"kind":{"ExecutionError":"Exceeded the prepaid gas."}}

It is not a complex call and only involves just 1. transferring tokens 2. updating a value in storage. Can anyone give me pointers as to why this might be happening?

document.querySelector('#transfer-to-owner').onclick = () => {
    console.log("Transfer about to begin")
    
    try {
         window.contract.transfer({})
     } catch (e) {
         'Something went wrong! ' +
         'Check your browser console for more info.'
     } 
}

contract from this repo

  const XCC_GAS: Gas = 20_000_000_000_000;

  transfer(): void {
    this.assert_owner()

    assert(this.contributions.received > u128.Zero, "No received (pending) funds to be transferred")

    const to_self = Context.contractName
    const to_owner = ContractPromiseBatch.create(this.owner)

    // transfer earnings to owner then confirm transfer complete
    const promise = to_owner.transfer(this.contributions.received)
    promise.then(to_self).function_call("on_transfer_complete", '{}', u128.Zero, XCC_GAS)
  }

  @mutateState()
  on_transfer_complete(): void {
    assert_self()
    assert_single_promise_success()

    logging.log("transfer complete")
    // reset contribution tracker
    this.contributions.record_transfer()
  }

Answer 1

near-api-js and near-shell use a different default value for gas.

near-api-js:

const DEFAULT_FUNC_CALL_GAS = new BN('30_000_000_000_000');

near-shell:

        .option('gas', {
            desc: 'Max amount of gas this call can use (in gas units)',
            type: 'string',
            default: '100_000_000_000_000'
        })

I added _s to make it clearer that near-shell uses more than 3 times the amount of gas by default.