Memory leak when recreate canvas

[antonkarytski]

Hey, found one curious case on iOS (im not sure, but probably this problem on Android as well, still investigate)
We have screen with GCanvas, after some attempts to open this screen, we got crashes.
Test shows, after closing screen, memory doesn't clean, and i think GCanvas still remain in memory after close. So ios terminate process due overusing memory

Screen.Recording.2022-05-12.at.13.30.06.mov

[flyskywhy]

The yellow page of "Just Canvas", is it:

a yellow image by ctx.drawImage()

or

ctx.fillStyle = 'yellow' then ctx.fillRect()

?

[antonkarytski]

@flyskywhy thats just a background of View

return (
                <View
                  style={{
                    flex: 1,
                    backgroundColor: "yellow",
                  }}
                >
                  <GCanvasView
                    onCanvasCreate={(r) => {
                      ref.current = r.getContext("2d");
                    }}
                    style={{
                      width: Dimensions.get("screen").width,
                      height: Dimensions.get("screen").height,
                    }}
                  />
                </View>
              );

[yoral-wang]

I am meeting the same problem

[flyskywhy]

fixed by @flyskywhy/[email protected]

[frenkie]

Still having the same problem in fixed version 2.3.22. Just 1 component with a button to switch to a render state with or without GCanvasView.
After 7 switches the app kills itself with a Memory warning (pressure level: TRIM_MEMORY_RUNNING_CRITICAL) received by JS VM, running a GC error.

My onCanvasCreate method:

  const initCanvas = can => {
    can.getContext('2d').fillStyle = 'white';
    can.getContext('2d').fillRect(0, 0, can.width, can.height);
  };

Not using any local variables to make sure memory doesn't leak there.

[flyskywhy]

2.3.22 just fixed the issue in iOS, because I test and found it's already OK on Android.
Please paste the code of your "switch to a render state with or without GCanvasView"

[Loovery]

The memory leak is still here. :(
This happens when I unmount component with GCanvasView

[avanlaningham]

Hi flyskywhy, I am working with Loovery (Grigory) here and we are not experts in objective c/ios code and these memory leaks. If there is anyway I could inspire you to help us find the problem please let me know. We love what you have done here. We are a startup but still we have a commercial product that is making us some money, so I would pay you to help us.

[flyskywhy]

@Loovery @avanlaningham , OK, I can try 😄

1. Does the memory leak happen on Android or iOS?
2. How many Bytes leak every time unmount component(It's better to also offer a screen video record here)?
3. How many times unmount component will leak big enough to let the app kills itself?

[Loovery]

@flyskywhy

1. Only iOS.
2. ~15mb on empty project.
3. It all depends on the device and the amount of free memory.

code

memory-leak.mov

[avanlaningham]

But Grigory normally it was about 6 times or something that it would crash after. Giving rough number might help him better understand.

[flyskywhy]

@Loovery , fixed by @flyskywhy/[email protected]

@avanlaningham , Donate link is in README.md as https://github.com/flyskywhy/react-native-gcanvas#donate , or if you want bank account transfer, please email me [email protected]

[Loovery]

@flyskywhy New problem

`void GCanvasContext::UseDefaultRenderPipeline()
{
GShader *newShader = FindShader("DEFAULT");

if (newShader != nullptr && mCurrentState->mShader != newShader)
{
    SendVertexBufferToGPU();
    mCurrentState->mShader = newShader;
    mCurrentState->mShader->Bind();
}
SetTexture(InvalidateTextureId);

}`

File: GCanvas2dContext
Error: mShader > Thread 1: EXC_BAD_ACCESS (code=1, address=0xd8)

[flyskywhy]

@flyskywhy New problem

`void GCanvasContext::UseDefaultRenderPipeline() { GShader *newShader = FindShader("DEFAULT");

if (newShader != nullptr && mCurrentState->mShader != newShader)
{
    SendVertexBufferToGPU();
    mCurrentState->mShader = newShader;
    mCurrentState->mShader->Bind();
}
SetTexture(InvalidateTextureId);

}`

File: GCanvas2dContext Error: mShader > Thread 1: EXC_BAD_ACCESS (code=1, address=0xd8)

Have never meet such EXC_BAD_ACCESS in the past years, how to reproduce it?

[avanlaningham]

@flyskywhy Once we have this fixed, I will see if I can figure out how to send crypto. I have played with it a bunch but I am more of a beginner. I have crypto in different places but I don't even know how to transfer it to you :) I have not looked at it in a few years so I would have to figure out how to even access it. But yes if we can't figure that out, I could do bank transfer. Thanks for trying to help.

[flyskywhy]

@flyskywhy New problem

`void GCanvasContext::UseDefaultRenderPipeline() { GShader *newShader = FindShader("DEFAULT");

if (newShader != nullptr && mCurrentState->mShader != newShader)
{
    SendVertexBufferToGPU();
    mCurrentState->mShader = newShader;
    mCurrentState->mShader->Bind();
}
SetTexture(InvalidateTextureId);

}`

File: GCanvas2dContext Error: mShader > Thread 1: EXC_BAD_ACCESS (code=1, address=0xd8)

@Loovery , If this only reproduced when you rotate the phone (e.g. from portrait to landscape or viceversa), so why don't you use onCanvasResize in GCanvasView ? I considered that Dimensions.addEventListener('change', onChange) in your code is only used to show me the memory leak by mount and unmount easily by just rotate the phone. Actually in real React APP product, no one will use so many mount and unmount when rotating phone, please use onCanvasResize as described in example in my README.md.

[avanlaningham]

@flyskywhy I live in Europe but am American and so I have no way to open a crtypto account. I used to have some but they blocked me because I am American. Crazy. I have some WAVES crypto in META MASK I could send you. I could do bank transfer also. Thanks for your help

[avanlaningham]

@flyskywhy Wait. Oh I found some ETH I had and sent it :)

[Loovery]

@Loovery , If this only reproduced when you rotate the phone (e.g. from portrait to landscape or viceversa), so why don't you use onCanvasResize in GCanvasView ? I considered that Dimensions.addEventListener('change', onChange) in your code is only used to show me the memory leak by mount and unmount easily by just rotate the phone. Actually in real React APP product, no one will use so many mount and unmount when rotating phone, please use onCanvasResize as described in example in my README.md.

@flyskywhy This is suitable for a simple use case scenario. But we have too many appearance changes when the orientation changes. So a complete rebuild is used

[flyskywhy]

@Loovery

I just test the new commit Rotate Remount to test Memory Leak: just copy from https://github.com/Loovery/gcanvas-memory-leak/commit/b69fce2 of my GCanvasRNExamples, and rotate iPhone quickly and no Error: mShader > Thread 1: EXC_BAD_ACCESS (code=1, address=0xd8) happens.

Maybe there is something else affect the error, e.g. my GCanvasRNExamples use [email protected] , your gcanvas-memory-leak use [email protected], please try them e.g. use [email protected] and tell me the result.

[Loovery]

@flyskywhy

EXC_BAD_ACCESS: context > reInitContext > resetGlViewport: >
KERN_INVALID_ADDRESS at 0xe4.

Sometimes I catch this error

[Loovery]

@Loovery

I just test the new commit Rotate Remount to test Memory Leak: just copy from https://github.com/Loovery/gcanvas-memory-leak/commit/b69fce2 of my GCanvasRNExamples, and rotate iPhone quickly and no Error: mShader > Thread 1: EXC_BAD_ACCESS (code=1, address=0xd8) happens.

Maybe there is something else affect the error, e.g. my GCanvasRNExamples use [email protected] , your gcanvas-memory-leak use [email protected], please try them e.g. use [email protected] and tell me the result.

I use RN 0.71.13 in main project

[flyskywhy]

@Loovery , I just released @flyskywhy/[email protected] , maybe you can have it a try.