fix(devtools): handle PiP open failures by resetting persisted state (#9983)

fix: handle PiP open failures by resetting persisted state

Co-authored-by: Dominik Dorfmeister <[email protected]>

Author: akdlsz21

.changeset/warm-drinks-itch.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/query-devtools': patch
+---
+
+fix(devtools): handle PiP open failures by resetting persisted state

packages/query-devtools/src/contexts/PiPContext.tsx

@@ -26,6 +26,8 @@ type PiPContextType = {
   disabled: boolean
 }
 
+class PipOpenError extends Error {}
+
 const PiPContext = createContext<Accessor<PiPContextType> | undefined>(
   undefined,
 )
@@ -57,7 +59,7 @@ export const PiPProvider = (props: PiPProviderProps) => {
     )
 
     if (!pip) {
-      throw new Error(
+      throw new PipOpenError(
         'Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode.',
       )
     }
@@ -134,10 +136,20 @@ export const PiPProvider = (props: PiPProviderProps) => {
   createEffect(() => {
     const pip_open = (props.localStore.pip_open ?? 'false') as 'true' | 'false'
     if (pip_open === 'true' && !props.disabled) {
-      requestPipWindow(
-        Number(window.innerWidth),
-        Number(props.localStore.height || PIP_DEFAULT_HEIGHT),
-      )
+      try {
+        requestPipWindow(
+          Number(window.innerWidth),
+          Number(props.localStore.height || PIP_DEFAULT_HEIGHT),
+        )
+      } catch (error) {
+        if (error instanceof PipOpenError) {
+          console.error(error.message)
+          props.setLocalStore('pip_open', 'false')
+          props.setLocalStore('open', 'false')
+          return
+        }
+        throw error
+      }
     }
   })