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