Handling errors

How to handle errors thrown by the Apps SDK.

In the Apps SDK, all methods have the potential to throw an error if something goes wrong, such as a request timing out or the user being disconnected from the internet.

While developing an app, it's important to:

  • Be mindful of errors that may occur.
  • Handle errors as gracefully as possible.

Check out the Error design guidelines

Our design guidelines help you create a high-quality app that easily passes app review.

  1. Import CanvaError from the @canva/error package:

    import { CanvaError } from "@canva/error";
    ts
  2. When calling a method from the Apps SDK, wrap it in a try/catch block:

    import { addNativeElement } from "@canva/design";
    import { CanvaError } from "@canva/error";
    (async () => {
    try {
    await addNativeElement({
    type: "EMBED",
    url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
    });
    } catch (error) {
    console.log(error);
    }
    })();
    ts
  3. In the catch block, check if the error is an instance of a CanvaError:

    if (error instanceof CanvaError) {
    console.log("CanvaError:", error.code);
    }
    ts

    The CanvaError object contains two properties:

    • code - A string that identifies the reason for the error.
    • message - Additional information about the error.
  4. Use the code property to handle the possible error cases:

    if (error instanceof CanvaError) {
    switch (error.code) {
    case "PERMISSION_DENIED":
    console.log("You don't have the required permissions.");
    break;
    case "USER_OFFLINE":
    console.log("You're offline.");
    break;
    case "TIMEOUT":
    console.log("The request timed out.");
    break;
    }
    }
    ts

The try/catch syntax is the modern way to catch errors and it's the approach that's used throughout the documentation, but it's not a strict requirement. You can also use the Promise syntax:

import { addNativeElement } from "@canva/design";
import { CanvaError } from "@canva/error";
addNativeElement({
type: "EMBED",
url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
}).catch((error) => {
if (error instanceof CanvaError) {
console.log("CanvaError:", error.code);
}
console.log(error);
});
ts

Be mindful of the fact that other errors may occur throughout the lifecycle of an app, such as errors from native browser APIs or third-party libraries — that is, handling errors from the Apps SDK doesn't mean that all possible errors are handled.

When a method in the Apps SDK throws an error, there's a limited range of possible error codes. This section lists all of the possible error codes that may appear in a CanvaError object.

A response from an external service is invalid or malformed.

Example: When redirecting back to Canva at the end of an authentication flow, the URL is malformed.

The app has made a request that’s invalid or malformed.

Example: The app calls a function without a required parameter.

The app hasn’t met a precondition.

Example: The app calls addOrUpdateElement without first calling registerRenderAppElement.

There’s an error in the App SDK’s internal implementation.

Example: There's an underlying issue in Canva's backend.

The app is not allowed to perform the specified operation.

Example: The app tries to call the navigator.clipboard.write method, which has been disabled due to it not being cross-browser compatible.

The app can’t retrieve the specified resource.

Example: The app tries to operate on an asset reference that doesn't exist.

The app or user has exceeded their allocated quota for a resource or service.

Example The app can't upload a file because the user is out of storage space.

The app doesn’t have sufficient permissions.

Example: The app tries to create an element without having sufficient permissions.

The app has made too many requests within a certain time period. The reference page for each API method includes a description of any rate limits. For example, the rate limit for requestExport.

Example: The app tries to create too many elements in a short period of time.

The operation exceeded the maximum allowed time to complete.

The user is offline.

Example: The user tries to authenticate without being connected to the internet.