Handling errors

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.

How to handle errors

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

   import { CanvaError } from "@canva/error";

   ts

   Copy

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";
   
   try {
     await addNativeElement({
       type: "EMBED",
       url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
     });
   } catch (error) {
     console.log(error);
   }

   ts

   Copy

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

   Copy

   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

   Copy

Using the Promise syntax

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);
});

Handling other errors

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.

List of error codes

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.

BAD_EXTERNAL_SERVICE_RESPONSE

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.

BAD_REQUEST

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

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

FAILED_PRECONDITION

The app hasn’t met a precondition.

Example: The app calls addOrUpdateElement without first calling registerRenderAppElement.

INTERNAL_ERROR

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

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

NOT_ALLOWED

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.

NOT_FOUND

The app can’t retrieve the specified resource.

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

QUOTA_EXCEEDED

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.

PERMISSION_DENIED

The app doesn’t have sufficient permissions.

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

RATE_LIMITED

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.

TIMEOUT

The operation exceeded the maximum allowed time to complete.

USER_OFFLINE

The user is offline.

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