Using lightning data table with inline editing for multiple records. Getting getting Uncaught (in promise) from validation rule in then method in LWC

Question

I've a Lightning Data table and I'm using Promise.all(promises) as mentioned in the documentation from updating multiple record changes in the inline editing. https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.data_table_inline_edit

I've a validation rule that throws error when I try to update the record with negative value in one of the field which is used in Inline Editing as a column. The problem is that I've getting the uncaught(in promise) and I can se the validation rule error message as well on the developer console but that contains the message thrown from validation rule.

Error - {status: 400, body: {…}, headers: {…}} body: enhancedErrorType: "RecordError" message: "An error occurred while trying to update the record. Please try again." output: {errors: Array(1), fieldErrors: {…}} statusCode: 400 [[Prototype]]: Object headers: {} status: 400 ok: (...) statusText: (...) [[Prototype]]: Object.

Code-

handleSave(event) {
        //save last saved copy
        this.lastSavedData = JSON.parse(JSON.stringify(this.tableData));
        //this.tableData = this.lastSavedData;
        console.log('this.tableData', JSON.stringify(this.tableData));
        const recordInputs =  this.draftValues.slice().map(draft => {
            const fields = Object.assign({}, draft);
            return { fields };
        });
        console.log('recordInputs:', recordInputs);
        const promises = recordInputs.map(recordInput => {
            updateRecord(recordInput);
        });
        Promise.all(promises).then((rec) => {
            console.log('::inside then'+ rec);
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Records updated',
                    variant: 'success'
                })
            );
            //Clear all draft values
            this.draftValues = [];
            refreshApex(this.data);

            console.log('Refreshed Data', JSON.stringify(refreshApex(this.data)));
            //location.reload();
            //return refreshApex(this.data);
            return refreshApex(this.data);
            // Display fresh data in the datatable
            
        }).catch(error => {
            console.log('error',JSON.stringify(error));
            this.dispatchEvent(
                new ShowToastEvent({
                  title: "Error on update",
                  message: error.body.output.errors[0].errorCode + '- '+ error.body.output.errors[0].message,
                  variant: "error"
                })
              );
        });
    }

Expectation is to display message using the error object in the catch block but the execution does not covers the catch block even after the uncaught exception.

Any suggestions might be helpful.

Answer 1

I apologize in advance if my answer doesn't cover your question. Also, it is difficult because I don't have the rest of the files of your component.

I've created a component that is pretty similar to the one that you have created (I've reused most of your code). I'm using some hardcoded Contacts. I've created a Validation Rule in the System that prevents the Contacts from being saved when the Age__c is <= 0.

With the following code I've achieved what I've understood that you need:

HTML:

<template>
  <lightning-card title="Datatable Example" icon-name="custom:custom63">
    <div class="slds-m-around_medium">
      <template if:true={records}>
        <lightning-datatable
          key-field="Id"
          data={records}
          columns={columns}
          onsave={handleSave}
        >
        </lightning-datatable>
      </template>
    </div>
  </lightning-card>
</template>

JS:

import { LightningElement } from "lwc";
import { updateRecord } from "lightning/uiRecordApi";
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import { refreshApex } from "@salesforce/apex";

export default class TableEdit extends LightningElement {
  columns = [
    { label: "Id", fieldName: "Id" },
    { label: "Age", fieldName: "Age__c", editable: true }
  ];
  records = [
    { Id: "0033O00000gEXlNQAW", Age__c: 10 },
    { Id: "0033O00000gEXlIQAW", Age__c: 15 }
  ];

  handleSave(event) {
    //save last saved copy
    const recordInputs = event.detail.draftValues.slice().map((draft) => {
      const fields = Object.assign({}, draft);
      return { fields };
    });
    console.log("recordInputs:", recordInputs);
    const promises = recordInputs.map((recordInput) => {
      return updateRecord(recordInput);
    });
    Promise.all(promises)
      .then((rec) => {
        console.log("::inside then" + rec);
        this.dispatchEvent(
          new ShowToastEvent({
            title: "Success",
            message: "Records updated",
            variant: "success"
          })
        );
        //Clear all draft values
        this.draftValues = [];
        refreshApex(this.data);

        console.log("Refreshed Data", JSON.stringify(refreshApex(this.data)));
        //location.reload();
        //return refreshApex(this.data);
        return refreshApex(this.data);
        // Display fresh data in the datatable
      })
      .catch((error) => {
        console.log("error", JSON.stringify(error));
        this.dispatchEvent(
          new ShowToastEvent({
            title: "Error on update",
            message:
              error.body.output.errors[0].errorCode +
              "- " +
              error.body.output.errors[0].message,
            variant: "error"
          })
        );
      });
  }
}

One important thing that I've noticed in the code you've shared is the following part:

const promises = recordInputs.map(recordInput => {
    updateRecord(recordInput);
});

Because of how Arrow Functions notation works, if you include the curly brackets you need to add the return keyword in front of the updateRecord() call. This is because the return keyword is only considered implicitly when you use "one-line functions" without the curly brackets. Not sure if that is the problem.