Proper handling of "WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost" and how to restore

[Pr3s4ri0]

Hello, I need your help in order to figure out this issue.
For some reason my app after some time is loosing web gl context. My app works as kind of paginated galery of images/ textured mashes. There is 100+ pages. On each page change It is loading multiple textures and rendering few planes with those textures with custom shader material and attaching onClick / onPointerOver / onPointerOut handlers.
After some time of page changes (randomly after 150+ times) In Chrome console i get:

WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost  
Followed by three is "THREE.WebGLRenderer: Context Lost"

1. What is the best way to debug to why it happening .. obviously something is leaking?
2. What is proper way of handling webglcontextlost event in RTF in order to restore/recover context?

What i was trying so far

const Scene = () => {
  const { gl } = useThree();
  ...
useEffect(()=>{
    gl.context.canvas.addEventListener(“webglcontextlost”, function(event) {
      event.preventDefault();
      setTimeout(() => gl.forceContextRestore(), 1);
  }, false);
  gl.context.canvas.addEventListener(“webglcontextrestored”, function(event) {
     console.log (“handle webglcontextrestored”);
  }, false);
  },[]);

This works fine if I' triggering webglcontextlost event manually via setTimeout(() => gl.forceContextLoss(), 1000);
But in real situation gl.forceContextRestore() fails to restore with message:
THREE.WebGLRenderer: WEBGL_lose_context extension not supported.

What would be the proper way to restore context ?

[Pr3s4ri0]

Just FYI ... I think I solved it on my own .. I found issue in my code causing a leak, after removing it don't get
WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost any more.

Also default handling of webglcontextlost and webglcontextrestored events is done in THREE.WebGLRenderer so nothing is needed in the app.

[drcmda]

it would be nice if maybe this could be caught in errorboundaries.

[manhcuongincusar1]

@Pr3s4ri0 I faced the same problem like your. How did you find the leaking point ?

[manhcuongincusar1]

@Pr3s4ri0 I faced the same problem like your. How did you find the leaking point ?

[drcmda]

You can find leaks with dev tools, make heap snapshots and compare them against one another, it will show you the differences

[1j01]

If you ever find that it works in production but you get context loss in development, note that React's "Strict Mode" purposefully calls useEffect callbacks extra times. This is meant to uncover memory leaks (and behavior leaks), so don't assume that disabling it will fix everything; however, I'm not convinced that the churn that it introduces, even if everything is cleaned up properly, can't cause the context to be lost.
Disabling it involves removing a <React.StrictMode> wrapper component, or in Next.js, setting reactStrictMode: false in the config.
If this helps, just remember you should still follow up and try to make sure anything anything allocated in useEffect is disposed in the clean up function (that is, the function returned by the function passed to useEffect).