DotLottie React - Runtime Error: Memory access out of bounds

[mabernethy]

Overview

I have a Lottie file in JSON that my team has been using with an older Lottie player (LottieLight). We're looking to upgrade to better Lottie player with smaller animation files. As part of that work, I've integrated the DotLottieReact component into our codebase. In my initial tests, I converted one of our existing JSON files into a .lottie file using the website https://lottiefiles.com/tools/lottie-to-dotlottie .

In my first initial hacked together proof of concept, I got the animation working as I would expect. No errors or anything. I then built out a more robust proof of concept, and converted another JSON file into a .lottie file (Attached here as a Zip file). However, when I try to display this lottie file in the browser, I continually get "Uncaught Runtime Error: memory access out of bounds" errors."

Browser: Latest version of Chrome
OS: MacOS Sonoma 14.7
Machine: M3 Macbook Pro
RAM: 32 Gb

dotlottie-memory-issue.lottie.zip

...

Consuming repo

What repo were you working in when this issue occurred?
DotLottie React
...

Labels

Type: Bug

• Add the Type: Bug label to this issue.

[theashraf]

@mabernethy which version of DotLottieReact you're using ?

[aldibatyr]

@theashraf experiencing the same issue on 0.9.3 version.

interestingly, when you set a style to less than 150px the file loads.

[nasringh]

I have the same issue what is the solution for it??

[aldibatyr]

noticed that the 0.10.0 version was released today, but the issue is still there.
Both .lottie and .json files fail to run using dotlottie-react.

[theashraf]

@nasringh @aldibatyr can you share with me your .lottie or .json asset ?

[theashraf]

@mabernethy I'm not able to replicate the same issue on the latest version of dotlottie-react, maybe it was a different asset ?

You can try testing it again on the dotLottie Viewer -> https://lottiefiles.github.io/dotlottie-web/

[aldibatyr]

@theashraf the files that are exported with lottie plugin from figma create that error. Lotties exported from AE are okay.

[aldibatyr]

Just tested the files that are hosted in lottiefiles and they work remotely or when downloaded and stored locally.

[aldibatyr]

@nasringh @mabernethy could you also check various files exported via figma vs Adobe After Effects?

[theashraf]

@theashraf the files that are exported with lottie plugin from figma create that error. Lotties exported from AE are okay.

@aldibatyr if you can share with me one or few problematic assets, that would help me investigate the root cause

[aldibatyr]

Sure! @theashraf attaching the file
flow1.json

[theashraf]

@aldibatyr I'm not encountering the Memory access out of bounds issue, but I have noticed some inconsistent rendering. Is that the issue you're experiencing ?

[aldibatyr]

@theashraf the issue was indeed Memory access out of bounds the page would simpy freeze.

[aldibatyr]

let me try creating a reproducible demo. I'll come back 👍

[theashraf]

Thanks @aldibatyr i was able to reproduce it here, let me come back with a solution
https://codepen.io/lottiefiles/pen/ExqBprW?editors=0010

[aldibatyr]

@theashraf great! Thanks a lot!

[nasringh]

@theashraf sorry for delay of response. I can share my .lottie file with you too
Uploading Hub_Invite.lottie.zip…

[theashraf]

@nasringh I can't download the attached asset

@theashraf sorry for delay of response. I can share my .lottie file with you too Uploading Hub_Invite.lottie.zip…

[nasringh]

lottie.zip
@theashraf try it please
I have the issue in .lottie file but I can send the .json file too
Hub_Invite.json

[theashraf]

@nasringh I’m unable to replicate the issue on this CodePen using the attached asset Could you please let me know the canvas width and height properties when this issue occurs ?

https://codepen.io/lottiefiles/pen/ExqBprW

[nasringh]

My lottie should be 72px*72px
And I saw your codepen and it is rendering a lot if you see the console the number of logs is increasing very fast

[theashraf]

Thanks, @nasringh! I’m still unable to reproduce the issue. It would be great if you could fork my CodePen and update it to demonstrate the situation where the "Memory access out of bounds" error occurs.

Regarding the requestAnimationFrame taking too long, I believe it’s because we’re using the non-production version of React over a CDN for demo purposes. but, let me know if you’re encountering the same issue in your application.

[nasringh]

@theashraf Could you please use .lottie file of my assets? I tried to change the image but I couldn't

[theashraf]

@nasringh looks fine using the .lottie file as well, maybe you can provide me a codesandbox or a repo link with the reproducible example ? in case you can't reproduce on codepen

[nasringh]

@theashraf I tried to implement it in codesandbox but it doesn't work :( https://codesandbox.io/p/sandbox/delicate-snow-t44q57

[theashraf]

@theashraf I tried to implement it in codesandbox but it doesn't work :( https://codesandbox.io/p/sandbox/delicate-snow-t44q57

@nasringh The src property is expected to be either a valid absolute or relative URL, not a file path as in the provided example.

To resolve this issue, move the asset (Hub_Invite.json) to the public folder of your project. This will allow it to be accessed via a relative URL.

updated example: https://codesandbox.io/p/sandbox/peaceful-leaf-rql4f7

[nasringh]

@theashraf I used your advice and it worked but as you said I could not see the error in the test case but exactly this time I saw the error in my own codes

and this is almost close to my own code in the project https://codesandbox.io/p/sandbox/delicate-snow-t44q57?file=%2Fsrc%2FApp.js%3A2%2C31

[theashraf]

@nasringh could you please provide me the campaign.lottie animation you've tested here ?

@theashraf I used your advice and it worked but as you said I could not see the error in the test case but exactly this time I saw the error in my own codes

and this is almost close to my own code in the project https://codesandbox.io/p/sandbox/delicate-snow-t44q57?file=%2Fsrc%2FApp.js%3A2%2C31

[nasringh]

@theashraf It's exactly the lottie file that I sent to you only their name are different

[theashraf]

@nasringh can you confirm that you're using @lottiefiles/[email protected] in your project ?

[nasringh]

@theashraf Yes exactly

[nasringh]

@theashraf I tried a lot of things to find the issue in my codes for example I changed the place of DotLottieReact component and change the size, and it is weird but I found that when I give the exact width and height to component the error does not occur but when I give only width and no height the error occures !!! I don't know why it can be the issue but I think it is because of canvas special behaviors

[EfstathiadisD]

We have the same issue.. 10.1 and 11.0 have the same issue.. 9.0 and 10.0 worked fine. Not sure if it helps but here is the Sentry sourcemaps that is relevant to this..

[mabernethy]

Sorry for the delayed response, I've been traveling. I've been playing with my setup today in an effort to provide more details. Unfortunately, the only thing I think I found was that it's really inconsistent when the Runtime error appears (Memory error). I had written up a nice explanation about how the failures are random. I added 2 Lottie animations to a single panel. Both were generated using the Lottie-to-DotLottie converter based off JSON files created in After Effects.

In my initial testing, only one of the animations would animate and the other one would throw the memory error we've all been seeing. The one that threw the error wasn't consistent, it was random. I wrote that up and then tried testing it with different properties for the height and width of the wrapper panel I've added around the <DotLottieReact> component. However, as I started doing that, the animations would consistently load and animate, both of them. Made me shake my head that they would suddenly start woking perfectly.

So, I don't have much to add to the discussion other than "it's random and seemingly unexplainable".

Tested on:
DotLottieReact v0.9.1
DotLottieReact v0.11.0

And just as I was about to press "Comment", one of the animations failed when I changed my package.json to "^0.11.0".

My gut feeling is that it's related to the height and width properties, as @nasringh pointed out. When I started adjusting the height/width of my wrapper DIV, that's when it started working correctly. It seems to consistently work when I provide a specific pixel value to both the height and width, e.g. height={'240px'}. I ran into issues when I removed height/width entirely, or when I was using height={'auto'} or height={'100%'}.

[EfstathiadisD]

This isn't the Height and Width. Being there prob stops some infinite loop or something but it's prob something to do with state being set over and over leading to OOM in the worker running it. That's my assumption. Haven't looked in the code base yet!

[nasringh]

@theashraf Hi again,
I used the .lottie format and it does not show in the right way and there is an extra shadow out of it. But when I replace it with .json it shows correctly.

Uploading lottie.zip…

[theashraf]

@mabernethy @nasringh @EfstathiadisD

I’ve made a new release with a fix for this issue in @lottiefiles/[email protected].

It turns out the problem originated in the dotLottie-rs renderer -> thorvg, and it has been reported here. The issue was resolved in thorvg v0.15.6.

@EfstathiadisD it’s challenging to pinpoint the exact cause of an error coming from the .wasm binary since we strip all the symbols from it to reduce the binary size. but i’m planning to include two versions of the .wasm binary in our codebase: one with all the debug symbols and another for release. We could allow users to load the debug .wasm file by setting a debug flag or something similar in the DotLottie instance or React component. This would help us quickly identify issues when they arise.

Thank you all for reporting these issues and sharing your insights, really help improve the project!

Let me know if the issue still persists