Open Mayank-Sh07 opened 1 year ago
I encountered the same issue when I disabled WebGL. You can wrap your component in an ErrorBoundary
and provide a fallback (e.g., a static globe image).
I have a strange behavior that I've noticed with this library and I'm wondering if either of you or if @shuding can help resolve this. When hardware acceleration is disabled, I run into this error as well. In order to fix that, I introduced a little logic to check if webgl is supported:
useEffect(() => {
try {
const canvas = document.createElement('canvas');
const context = canvas.getContext('webgl') || canvas.getContext('experimental-webgl') as WebGLRenderingContext;
context.getSupportedExtensions();
}
catch (err) {
setIsWebGlSupported(false);
console.log('WebGL not supported, hiding globe animation...');
}
}, []);
I then conditionally render the globe based on isWebGlSupported
I'm using an M2 mac with macOS 13.5 and I tested this in Chrome and Edge and the logic check I have behaves as I would expect.
Now I've have seen an issue with this on a colleague's machine where they've disabled hardware acceleration, but instead of context.getSupportedExtensions()
throwing an error, it returns a value.
The globe itself then renders completely black.
I was able to replicate the behavior in saucelabs. Heres's a screenshot from https://upstash.com which also uses this lib.