Error Handling

This documentation outlines error patterns, provides debugging tips, and lists all possible errors for quick troubleshooting, to aid developers in building resilient applications. This guide aims to streamline issue identification and resolution, ensuring applications gracefully handle errors and maintain a seamless user experience.

Error patterns

The Designer API employs a structured format for exceptions, ensuring you have clear and actionable information at your disposal. Here’s what you can expect in the event of an error:

Cause Tag: ResourceRemovalFailed
Message: "Failed to remove style. Ensure there are no usages of this style."

**Message **(err.message): A descriptive sentence designed to provide immediate insight into what went wrong. The wording of this message may change over time to enhance clarity or reflect updated functionalities within the Designer API. The primary goal of the message field is to guide developers in identifying the source or nature of the failure.

Cause Tag (err.cause.tag): Accompanying each error message is a consistent, unchanging Cause Tag. These tags are your key to handling errors programmatically. They are crafted to enable developers to programmatically distinguish between different error scenarios and respond accordingly.

List of errors

This section provides a detailed list of error cause tags you might encounter while interacting with the Designer API. For each error, you’ll receive a specific message tailored to the scenario, designed to give you clarity on the nature of the problem. This list is intended to help you quickly understand the cause of any issues you face.

How to handle errors

Apps need to gracefully manage errors to maintain a seamless user experience, even amid unexpected issues. Please ensure your approach to error handling is comprehensive, capable of detecting and managing exceptions, and offers users a clear pathway to resolution.

Using try/catch for error handling

The try/catch block is seamlessly integrated with async/await syntax, offering a straightforward way to catch exceptions as demonstrated:

1
  try {
2
    const element = await webflow.getSelectedElement();
3
    await element.remove();
4
    // Attempting further operations on the removed element will throw an error
5
    const styles = await element.getStyles();
6
  } catch (err) {
7
    console.error(`Cause:${err.cause.tag}`)
8
  console.error(`Cause:${err.message}`)
9
  }
10
}

Notifying users of an error

By utilizing the webflow.notify method, you can send a notification directly to the user within the Designer that acknowledges the error and also, when feasible, provides guidance on resolving it. This proactive approach helps maintain trust and ensures users aren’t left in the dark, improving their overall experience and satisfaction with your application.

1
function handleErrors(err) {
2
  switch (err.cause.tag) {
3
    case 'ResourceMissing':
4
      webflow.notify({ type: 'Error', message: 'The element no longer exists.' });
5
      break;
6
    case 'InvalidElementPlacement':
7
      // Handle specific error
8
      break;
9
    // Additional error cases
10
  }