fix(devtools): avoid polluting user console (#5936)

.changeset/shiny-cougars-visit.md

@@ -0,0 +1,7 @@
+---
+"@refinedev/devtools-shared": patch
+---
+
+chore: prevent websocket closing errors in console
+
+When `<DevtoolsProvider />` component is mounted in apps with React's strict mode, it will try to initialize the websocket connection twice and first one will be closed immediately before the connection is established. This PR will delay closing the websocket connection until it's established properly to prevent these errors from appearing in the console.

.changeset/wise-dots-agree.md

@@ -0,0 +1,8 @@
+---
+"@refinedev/devtools-server": patch
+"@refinedev/devtools-ui": patch
+---
+
+fix: remove annoying auth error at initial project loads
+
+When users create a new project or their devtools token expires, their console is polluted with network errors due to missing authentication. This PR removes these errors by handling auth requests in a user-friendly way.

packages/devtools-server/src/serve-proxy.ts

@@ -170,7 +170,16 @@ export const serveProxy = async (app: Express) => {
           saveAuth(token, jwt);
         })(proxyRes, req, res);
       }
-      res.writeHead(proxyRes.statusCode || 500, proxyRes.headers);
+
+      if (proxyRes.statusCode === 401) {
+        res.writeHead(200, {
+          ...proxyRes.headers,
+          "Access-Control-Expose-Headers": `Refine-Is-Authenticated, ${proxyRes.headers["Access-Control-Expose-Headers"]}`,
+        });
+      } else {
+        res.writeHead(proxyRes.statusCode || 500, proxyRes.headers);
+      }
+
       proxyRes.pipe(res, { end: true });
     },
   });

packages/devtools-shared/src/context.tsx

@@ -69,7 +69,16 @@ export const DevToolsContextProvider: React.FC<Props> = ({
     return () => {
       unsubscribe();
 
-      wsInstance.close(1000, window.location.origin);
+      // In strict mode, the WebSocket instance might not be connected yet
+      // so we need to wait for it to connect before closing it
+      // otherwise it will log an unnecessary error in the console
+      if (wsInstance.readyState === WebSocket.CONNECTING) {
+        wsInstance.addEventListener("open", () => {
+          wsInstance.close(1000, window.location.origin);
+        });
+      } else {
+        wsInstance.close(1000, window.location.origin);
+      }
     };
   }, []);
 

packages/devtools-ui/src/utils/auth.ts

@@ -2,8 +2,9 @@ import { ory } from "./ory";
 
 export const isAuthenticated = async () => {
   try {
-    await ory.toSession();
-    return true;
+    const response = await ory.toSession();
+    const headerAuth = Boolean(response.headers["Refine-Is-Authenticated"]);
+    return headerAuth;
   } catch (error: any) {
     return false;
   }