Skip to main content

​
Error Handling

This page only applies to the new runtime - not the legacy runtime.
Wrap Rive operations in try/catch blocks to handle errors. For example, when loading a file: 
try {
  const riveFile = await RiveFileFactory.fromURL(
    "https://cdn.rive.app/animations/vehicles.riv"
  );
  // Use the riveFile...
} catch (error) {
  // Handle errors that occur during Rive file loading
  console.error("Error loading Rive file:", error);
}

​
View-Based Errors

Use the onError callback prop to handle errors during view configuration or runtime operations: 
<RiveView
  file={riveFile}
  onError={(error) => {
    // error.type contains the error type enum value
    // error.message contains a descriptive error message
    console.error(`Rive Error [${error.type}]: ${error.message}`);
  }}
/>

​
Error Types

The following error types may occur during view operations:
Error TypeValueDescription
RiveErrorType.Unknown0An unknown error occurred
RiveErrorType.FileNotFound1The specified Rive file could not be found
RiveErrorType.MalformedFile2The Rive file is malformed or corrupted
RiveErrorType.IncorrectArtboardName3The specified artboard name does not exist
RiveErrorType.IncorrectStateMachineName4The specified state machine name does not exist
RiveErrorType.ViewModelInstanceNotFound6The specified view model instance was not found
RiveErrorType.IncorrectStateMachineInputName8The specified state machine input name does not exist
Use these error types to provide specific error handling: 
import { RiveView, RiveErrorType } from "@rive-app/react-native";

<RiveView
  file={riveFile}
  artboardName="MainArtboard"
  onError={(error) => {
    switch (error.type) {
      case RiveErrorType.IncorrectArtboardName:
        console.error("Artboard not found:", error.message);
        // Handle missing artboard (e.g., use default artboard)
        break;
      case RiveErrorType.IncorrectStateMachineName:
        console.error("State machine not found:", error.message);
        // Handle missing state machine
        break;
      case RiveErrorType.MalformedFile:
        console.error("Corrupted file:", error.message);
        // Handle corrupted file (e.g., show error UI)
        break;
      default:
        console.error("Rive error:", error.message);
    }
  }}
  style={{ width: "100%", height: 400 }}
/>;
If no onError handler is provided, errors will be logged to the console by default.