How to avoid NoErrorObjectAvailable Script Error in LWC

As an LWC developer I am sure you have faced this notorious error many times "NoErrorObjectAvailable Script Error". There are two major reasons for this.

• You have added event handler for custom event fired from child component, but the handler function itself does not exist. It is often called a ghost method as you are trying to call a method that does not exist.
• There is an unhandled exception in custom event handler in the parent component.

Let us explore both issues one by one.

Missing Handler Method

Consider you have two components ParentComp and ChildComp. The child component fires an event that should be handled by the parent component.

Child Component (ChildComp.js)

import { LightningElement } from 'lwc';

export default class ChildComp extends LightningElement {
    notifyParent() {
        this.dispatchEvent(new CustomEvent('childEvent'));
    }
}

Child Component (ChildComp.html)

<template>
    <button onclick={notifyParent}>Click Me</button>
</template>

Parent Component (ParentComp.js)

import { LightningElement } from 'lwc';

export default class ParentComp extends LightningElement {
    // 🚨 Error: The method does not exist!
}

Parent Component (ParentComp.html)

<template>
    <c-child-comp onchildevent={handleChildEvent}></c-child-comp>
</template>

Why does this cause an error?

The parent component is listening for the childevent, but the handleChildEvent method is missing. When the child component dispatches the event, LWC expects the handler function to exist. Since it does not, the NoErrorObjectAvailable Script Error is thrown.

Solution

Ensure that the handler function is defined in the parent component:

import { LightningElement } from 'lwc';

export default class ParentComp extends LightningElement {
    handleChildEvent() {
        console.log('Child event received!');
    }
}

Unhandled Exception in Event Handler

Even if the handler method exists, an unhandled exception within it can also cause this error.

Example

handleChildEvent() {
    // 🚨 This will cause an error
    throw new Error("Something went wrong!");
}

When the error occurs inside the event handler, LWC is unable to capture detailed error information, resulting in the NoErrorObjectAvailable Script Error. This issue occurs majorly in the custom event handlers in the parent components.

Solution

Wrap your event handler in a try-catch block to prevent unhandled exceptions:

handleChildEvent() {
    try {
        // Simulating an error-prone operation
        throw new Error("Something went wrong!");
    } catch (error) {
        console.error("Error in handleChildEvent: ", error);
    }
}

This ensures that errors are logged properly and do not break the execution flow.

Debugging Tips

To quickly identify and resolve this issue, follow these debugging steps:

1. Ensure the event handler method exists before using it in on<event> bindings.

2. Check the spelling of the event name in both dispatchEvent and on<event> listener.

3. Use try-catch inside event handlers to prevent unhandled exceptions.

4. Enable Lightning Debug Mode in Salesforce Setup to get more detailed error messages.

5. Use console.error() to log errors and inspect them in the browser console.

By following these best practices, you can avoid running into the NoErrorObjectAvailable Script Error and ensure smooth event handling in your LWC components. Happy coding!