How to show apex messages or toast in VF page using lightning out

Question

I am working on project to convert VF components into LWC. I have inserted the LWC in VF page using lightning out. The toast is showing up only in lightning experience and not in VF page. ApexPages.addMessage() is giving error: "ApexPages.addMessage can only be called from a Visualforce page". Due to this, I am not able to display warnings or errors in the VF page either as a toast or as a apex message.

I tried checking the theme using String theme = UserInfo.getUiThemeDisplayed(); before display toast or apex message but that isn't working too. Please guide. Thanks!

Screenshot of error

Apex snippet

        String theme = UserInfo.getUiThemeDisplayed();
        if(checkMemberOfRecord.size()!=0 && contactRole.contains('Member of Record')){
            if(theme!='Theme4d'){
                ApexPages.addMessage( new ApexPages.Message(ApexPages.Severity.ERROR, 'Account cannot have multiple Member of Records.'));
            }
            return 'fail';
        }

Answer 1

it's correct you cannot use ApexPage.addMessage in LWC. But there are a few good replacements.

If you want only to display only error messages you can just throw AuraHandledException(message); for your error messages.

// ApexClass.class
public class Controller {
    @AuraEnabled
    public static void someMethod() {
        Boolean isError = true;
        if (isError) {
            throw new AuraHandledException('Error message');
        }
    }
}

<!-- component.html -->
<template>
   <c-toast></c-toast>
   <!-- Some other markup -->
</template>

// component.js
// ...
import someMethod from '@salesforce/apex/Controller.someMethod';
// ...
export default class Component extends LightningElement {
    @wire(someMethod)
    callSomeMethod({error, data}) {
        if (data) {
            // process results
        } else if (error) {
// this.template.query() seems not valid for LWC use this.template.querySelector as below            
//this.template.query('c-toast').show(error.message || error.body.message, 'error');
this.template.querySelector('c-toast').show(error.message || error.body.message, 'error');

        }
    }
}

For displaying messages you can use Custom Toast if you want. Can provide code if needed.

UPDATE

<!-- toast.html -->
<template>
    <div class="toast toast_hide" style="height:4rem" data-id="toast">
        <div class="slds-notify_container slds-is-relative">
            <div class={notifyClasses} role="status">
                <span class="slds-assistive-text">error</span>
                <lightning-icon icon-name={iconName} alternative-text={type}></lightning-icon>
                <div class="slds-notify__content">
                    <h2>{title}</h2>
                    <p>{message}</p>
                </div>
                <div class="slds-notify__close">
                    <lightning-button-icon icon-name="utility:close" alternative-text="Close"></lightning-button-icon>
                </div>
            </div>
        </div>
    </div>
</template>

//toast.js
import {LightningElement, api, track} from 'lwc';

export default class UmToast extends LightningElement {

    @track
    message;
    @track
    title;
    @track
    type;

    @api
    show(message, type) {
        this.title = 'error';
        this.message = message;
        this.type = type || 'error';

        const toast = this.template.querySelector('.toast');
        toast.classList.toggle('toast_show');
        toast.classList.toggle('toast_hide');

        this.timer = setTimeout(() => {{
            toast.classList.toggle('toast_show');
            toast.classList.toggle('toast_hide');
        }}, 3000);
    }

    get notifyClasses() {
        return `slds-notify slds-notify_toast slds-theme_${this.type}`;
    }
    get iconName() {
        return `utility:${this.type}`;
    }
}

/* toast.css */
.toast {
  -webkit-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.toast_hide {
  opacity: 0;
}

.toast_show {
  opacity: 1;
}

Answer 2

A modal for showing error will be the easiest way.

HTML

<template if:true={showErrorModal}>
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
                aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <!-- modal header start -->
                    <header class="slds-modal__header">
                        <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
                            title="Close" onclick={closeErrorModal}>
                            <lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse"
                                size="small">
                            </lightning-icon>
                        </button>
                        <h2 id="modal-heading-02" class="slds-text-heading_medium slds-hyphenate">{errorMessage}</h2>
                        </br>
                        <div style="text-align:center;">
                            <lightning-button class="slds-m-top_small" variant="brand" label="Close"
                                onclick={closeErrorModal}></lightning-button>
                        </div>
                    </header>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </template>

JAVASCRIPT

@track errorMessage;
@track showErrorModal=false;
handleSubmit(event) {
        // closing modal and showing loading spinner
        this.bShowModal = false;
        this.showLoadingSpinner = true;

        // calling apex class method to save new relationship to database and passing required parameters to the function
        saveAccount()
            .then(result => {

            })
            .catch(error => {
                this.errorMessage = error.body.message;
                this.showErrorModal = true;
            });
    }

APEX

       if(contactRole==null){
            throw new AuraHandledException('Please select atlease one Contact Role');
        }