Error handling

Learn how to gracefully handle errors.

Extensions with custom frontends, such as editing extensions, should handle errors as gracefully as possible.

To allow for this, Canva's JavaScript client provides methods for:

  • Showing error notifications.

  • Reporting errors to Canva.

  • Exiting the extension.

This tutorial explains when and how to use these methods.

Showing error notifications

When an error occurs, an extension should show an error notification that explains to the user what went wrong and what they can do to fix it (if anything).

To learn how to show notifications, refer to Notifications.

Reporting errors to Canva

You can report errors to Canva with the reportError method:

const canva = window.canva.init();
canva.onReady(async (opts) => {
canva.reportError('GENERAL_ERROR');
});

The following strings are valid error codes:

  • "GENERAL_ERROR"

  • "INVALID_INPUT_MEDIA"

  • "OPERATION_NOT_ALLOWED""

  • "OUT_OF_MEMORY"

  • "UNSUPPORTED_BROWSER"

  • "UNSUPPORTED_DEVICE"

Canva uses the data from reported errors to identify the most frequent types of errors, which ultimately improves the user experience for developers and Canva's end-users.

Exiting the extension

If a significant error occurs and it's not possible for the extension to return to a non-error state, call the exit method:

const canva = window.canva.init();
canva.onReady(async (opts) => {
canva.exit();
});

This immediately exits the user from the extension. To avoid confusing the user, the extension should always show an error notification before calling the exit method.