Pass Error Exception Message from Flow to LWC

When a lightning flow is launched from LWC and throws some exception, it should be handled. Handling the exception in screen flows can be done within the screen flow or you can pass the error message to LWC from screen flow. We are going to learn how we can pass the error message from Flow to LWC when error occurs.

Requirement – Pass Error Message to LWC

We will create a LWC which invokes the lightning flow. The flow will try to insert account record and if there is any exception, It should get pass to LWC. Later, We can do whatever we want to do with error message in LWC based on requirement.

Create the LWC with name flowFromLwc in your code editor. Let’s see the code for LWC.

flowFromLwc.html

Initially, UI will show the screen flow. We are showing the JSON recieved from flow on UI when the flows gets finished.

<template>
    <template lwc:if={messageFromFlow}>
        <div class="scroller slds-card">
            <pre>{messageFromFlow}</pre>
        </div>
    </template>
    <template lwc:else>
        <lightning-flow flow-api-name='New_Account' flow-input-variables={inputVariables}
            onstatuschange={handleStatusChange} flow-finish-behavior="NONE">
        </lightning-flow>
    </template>
</template>

flowFromLwc.css

.scroller {
    height: 350px;
    overflow: auto;
    padding: var(--lwc-varSpacingXSmall, 8px);
    border: solid var(--lwc-borderWidthThin, 1px) #eee;
}

flowFromLwc.js

handleStatusChange is the handler for flow status change. We also have a getter for showing the message details on UI.

import { LightningElement } from 'lwc';

export default class FlowFromLwc extends LightningElement {
    get inputVariables() {
        return [];
    }

    message;

    handleStatusChange(event) {
        console.log('Message from Flow', event.detail);
        if (event.detail.status === 'FINISHED' && event.detail.outputVariables) {
            this.message = event.detail;
        }
    }

    get messageFromFlow() {
        return this.message
            ? JSON.stringify(this.message, null, 2)
            : '';
    }
}

flowFromLwc.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Flow – New_Account

Create a screen flow with below configuration. The flow will look like this:-

Configuration for Account Form Screen

Configuration for Insert Record action element

Add a fault path to Insert Record action

Create a variable with name errorMessage, Make sure to mark available for output

Configuration for Assign Error (Basically assigning the error message) element

Save and activate the flow. It is now time to place your lwc component on lightning page and test it.

Demo – Pass Error Message from Flow to LWC

Are you looking for LWC scenarios to practice, checkout this: – https://salesforcediaries.com/category/lwc-practice-scenarios/

Also, Do not forget to checkout the other informative blog article related to flow and LWC on Salesforce Diaries here:- https://salesforcediaries.com/category/lightning-web-component/

If you need any help, Book 1:1 meeting with here:- https://topmate.io/sanket_kumar