Cannot read properties of `null` (reading 'enable') - When hardware acceleration is disabled

[Mayank-Sh07]

[szilarddoro]

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).

[Kinbaum]

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.

[daveycodez]

Just discovered this issue, would be great if it was built into Cobe directly @shuding

Here is the React hook I will use in order to conditionally render the globe

import { useEffect, useState } from "react";

function detectWebGL() {
  try {
    const canvas = document.createElement("canvas");
    return !!(
      canvas.getContext("webgl") ||
      canvas.getContext("experimental-webgl")
    );
  } catch {
    return false;
  }
}

export function useIsWebGLAvailable() {
  const [available, setAvailable] = useState(false);

  useEffect(() => {
    setAvailable(detectWebGL());
  }, []);

  return available;
}