Log to sentry from dashboard on disconnected WS (#34592)

We've gotten some reports of folks being unable to connect to their deployments, but we generally can't investigate much until we have an instance name.

This should log a message to Sentry whenever the WS is disconnected in the dashboard including the instance name.

If the developer is completely offline (e.g. bad wifi), logging to sentry won't work either, so hopefully this'll catch issues specific to connecting to Convex. If this doesn't have too many false positives, we can later change this to display UI to the developer indicating we're having trouble connecting + any actionable instructions (e.g. filing a bug report, running a network test)

GitOrigin-RevId: c114735ee9c400409f3380b4b2173d73e62f7519

Author: sshader

npm-packages/dashboard-common/src/lib/deploymentContext.tsx

@@ -345,7 +345,7 @@ function DeploymentWithConnectionState({
   deployment: ConnectedDeployment;
   children: ReactNode;
 }) {
-  const { isSelfHosted } = useContext(DeploymentInfoContext);
+  const { isSelfHosted, captureMessage } = useContext(DeploymentInfoContext);
   const { client, deploymentUrl, deploymentName } = deployment;
   const [connectionState, setConnectionState] = useState<
     "Connected" | "Disconnected" | "LocalDeploymentMismatch" | null
@@ -395,6 +395,12 @@ function DeploymentWithConnectionState({
     }, 5000);
     return () => clearInterval(checkConnection);
   });
+  useEffect(() => {
+    if (isDisconnected && !deploymentName.startsWith("local-")) {
+      // Log to sentry including the instance name when we seem to be unable to connect to a cloud deployment
+      captureMessage(`Cloud deployment is disconnected: ${deploymentName}`);
+    }
+  }, [isDisconnected, deploymentName, captureMessage]);
   const value = useMemo(
     () => ({
       deployment,