Error after running animation for a longer period of time

[Filip Jakov Bulić]

The code:

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import riveWasmUrl from '@rive-app/canvas/rive.wasm';
import {
	Alignment,
	Fit,
	Layout,
	useRive,
	useStateMachineInput,
	RuntimeLoader,
} from '@rive-app/react-canvas';
import { FC, useEffect } from 'react';

// For <link /> preload in the root of the app
RuntimeLoader.setWasmUrl(riveWasmUrl);

const riveGameStates = new Map<GameData['gameState'], number>([
	['state1', 1],
	['state2', 2],
	['state3', 3],
	['state4', 4],
]);

export const WhenMoonBroAnimation: FC = (props) => {
	const toast = useToast();

	const { rive, RiveComponent } = useRive({
		src: '/file.riv',
		stateMachines: 'State Machine',
		autoplay: true,
		artboard: 'Main Artboard',
		layout: new Layout({
			fit: Fit.Cover,
			alignment: Alignment.Center,
		}),
	});

	const { data: gameState } = useCrashGameData({
		select: (data) => data.gameState,
	});

	const sceneInput = useStateMachineInput(rive, 'State Machine', 'Scene');

	useEffect(() => {
		if (gameState && sceneInput) {
			sceneInput.value = riveGameStates.get(gameState) ?? 1;
		}
	}, [gameState, sceneInput]);

	return <RiveComponent width="100%" height="100%" {...props} />;
};

After running the animation for a longer period of time (approx 1h), I get the following error RuntimeError: Aborted(). Build with -sASSERTIONS for more info..

Anybody has any idea what I can do? The animation should be running non-stop

[Zachary Plata]

Does this still happen on the latest version? v3.0.33

[M]

Same issue here, and Im using v3.0.33

[M]

I tried downgrade some previous versions and confirmed the issue is existed since v3.0.25 and works in v3.0.24

[msubrosa]

I've been experiencing this problem as well, but it still seems to happen for me even if I install earlier versions of rive-react (I tried back as far as v3.0.10) . I have a single file that contains a scene with multiple artboards. Like the original post, it runs continuously upon the page loading and eventually will result in the runtime error.

It seems that as the scene complexity has grown, it takes less time for the runtime error to occur. Testing on both Firefox Developer Edition and Chrome results in the same time-to-error at just over 25 minutes for me.

Packages Used

• rive-react@3.0.33
• @rive-app/react-canvas@3.0.33
• next@12.2.2
• react@18.2.0

Errors/Call Stacks

1:

Unhandled Runtime Error

RuntimeError: Aborted(). Build with -sASSERTIONS for more info.
Call Stack
ua
node_modules\@rive-app\canvas\rive.js (60:72)
v
node_modules\@rive-app\canvas\rive.js (115:26)
<unknown>
https://unpkg.com/@rive-app/canvas@1.0.95/rive.wasm:wasm-function[39]:0x1697
<unknown>
https://unpkg.com/@rive-app/canvas@1.0.95/rive.wasm:wasm-function[329]:0x6c9d
<unknown>
https://unpkg.com/@rive-app/canvas@1.0.95/rive.wasm:wasm-function[1284]:0x1c773
Ub/<
node_modules\@rive-app\canvas\rive.js (81:47)
mouseCallback
node_modules\@rive-app\canvas\rive.js (179:0)

2:

Unhandled Runtime Error

RuntimeError: Aborted(). Build with -sASSERTIONS for more info.
Call Stack
ua
node_modules\@rive-app\canvas\rive.js (60:72)
v
node_modules\@rive-app\canvas\rive.js (115:26)
<unknown>
https://unpkg.com/@rive-app/canvas@1.0.95/rive.wasm:wasm-function[39]:0x1697
<unknown>
https://unpkg.com/@rive-app/canvas@1.0.95/rive.wasm:wasm-function[1325]:0x1e3b1
get
node_modules\@rive-app\canvas\rive.js (105:167)
mouseCallback
node_modules\@rive-app\canvas\rive.js (188:0)

[msubrosa]

I recently updated to @rive-app/react-canvas@3.0.38 and I haven't seen the issue occurring since. (It's been a little over a week) I will keep and eye out, but I don't believe this is a problem any longer for me.