From 3d2e92c5a29b83a7adb749316ddcb5cb979854d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ali=20Emir=20=C5=9Een?= Date: Wed, 8 May 2024 23:46:52 +0300 Subject: [PATCH 1/4] chore(devtools-shared): add changeset --- .changeset/shiny-cougars-visit.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/shiny-cougars-visit.md diff --git a/.changeset/shiny-cougars-visit.md b/.changeset/shiny-cougars-visit.md new file mode 100644 index 000000000000..9ea9c65e68dc --- /dev/null +++ b/.changeset/shiny-cougars-visit.md @@ -0,0 +1,7 @@ +--- +"@refinedev/devtools-shared": patch +--- + +chore: prevent websocket closing errors in console + +When `` 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. From 97f245f55a80d4e38ca1dbe8fd9aac3a471c85d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ali=20Emir=20=C5=9Een?= Date: Wed, 8 May 2024 23:47:10 +0300 Subject: [PATCH 2/4] chore(devtools-server): add changeset --- .changeset/wise-dots-agree.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .changeset/wise-dots-agree.md diff --git a/.changeset/wise-dots-agree.md b/.changeset/wise-dots-agree.md new file mode 100644 index 000000000000..59c4f5b65b8a --- /dev/null +++ b/.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. From 9d9f3754e7edb6ede492a722ee55435732bb9f70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ali=20Emir=20=C5=9Een?= Date: Wed, 8 May 2024 23:47:56 +0300 Subject: [PATCH 3/4] fix(devtools-shared): delay unestablished ws connections from closing --- packages/devtools-shared/src/context.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/devtools-shared/src/context.tsx b/packages/devtools-shared/src/context.tsx index 8e3b14c01467..e98649f6dfdf 100644 --- a/packages/devtools-shared/src/context.tsx +++ b/packages/devtools-shared/src/context.tsx @@ -69,7 +69,16 @@ export const DevToolsContextProvider: React.FC = ({ 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); + } }; }, []); From 86f279746c836ed35b29016bbd485a244f4feb87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ali=20Emir=20=C5=9Een?= Date: Wed, 8 May 2024 23:48:24 +0300 Subject: [PATCH 4/4] fix(devtools): prevent 401 errors from polluting user console --- packages/devtools-server/src/serve-proxy.ts | 11 ++++++++++- packages/devtools-ui/src/utils/auth.ts | 5 +++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/devtools-server/src/serve-proxy.ts b/packages/devtools-server/src/serve-proxy.ts index d70bbdc2d0ca..7a992478f820 100644 --- a/packages/devtools-server/src/serve-proxy.ts +++ b/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 }); }, }); diff --git a/packages/devtools-ui/src/utils/auth.ts b/packages/devtools-ui/src/utils/auth.ts index 295b8e4f7289..30a8c8de7d43 100644 --- a/packages/devtools-ui/src/utils/auth.ts +++ b/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; }