LWC Handle Errors in Lightning Data Service

Handle Errors in Lightning Data Service

Lightning Data Service returns an error when a resource, such as a record or an object, is inaccessible on the server.

For example, an error occurs if you pass in an invalid input to the wire adapter, such as an invalid record Id or missing required fields. An error is also returned if the record isn’t in the cache and the server is offline. Also, a resource can become inaccessible on the server when it’s deleted or has its sharing or visibility settings updated.

Error Values

The FetchResponse error object is modeled after the Fetch API’s Response object. It contains the body of the response and a status code and message.

• body (Object or Array)—The body of the response, which is defined by the underlying API.
• ok (Boolean)—Specifies whether the response was successful or not. For an error, ok is always false and contains a status in the range 400–599.
• status (Number)—Contains the status code of the response, for example, 404 if a resource is not found or 500 for an internal server error.
• statusText (String)—Contains the status message corresponding to the status code, for example, NOT_FOUND for a status code of 404.

Example Use the error object to handle errors returned by the getRecord wire adapter.

<template>
    <lightning-card title="Handle Error" icon-name="standard:contact">
        <template if:true={error}>
            <p>{error}</p>
        </template>
    </lightning-card>
</template>

The JavaScript code checks if the error body is an array or object and returns the error message.

import { LightningElement, api, wire, track } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

const fields = [
    // This invalid field causes @wire(getRecord) to return an error
    'Contact.invalidField' 
];

export default class WireGetRecordDynamicContact extends LightningElement {
    @api recordId;

    @track error;

    @wire(getRecord, { recordId: '$recordId', fields })
    wiredRecord({error, data}) {
        if (error) {
            this.error = 'Unknown error';
            if (Array.isArray(error.body)) {
                this.error = error.body.map(e => e.message).join(', ');
            } else if (typeof error.body.message === 'string') {
                this.error = error.body.message;
            }
            this.record = undefined;
        } else if (data) {
            // Process record data
        }
    }
}

Body Payload

The body of the error response depends on the API that returns it.

• UI API read operations, such as the getRecord wire adapter, return error.body as an array of objects.
• UI API write operations, such as the createRecord wire adapter, return error.body as an object, often with object-level and field-level errors.
• Apex read and write operations return error.body as an object.
• Network errors, such as an offline error, return error.body as an object.

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.data_error