feat: show error logs when useFlow is used outside the context of the provider

Author: christianmat

.changeset/rude-bugs-boil.md

@@ -0,0 +1,5 @@
+---
+"@frigade/react": patch
+---
+
+Show error logs when hooks are used outside the context of the `Frigade.Provider`

apps/smithy/.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { FrigadeJS, Provider } from "@frigade/react";
+import { FrigadeJS, Provider, useFlow } from "@frigade/react";
 
 import "./global.css";
 

packages/react/src/hooks/useFlow.ts

@@ -2,6 +2,7 @@ import { type Flow } from '@frigade/js'
 import { useCallback, useContext, useEffect, useState, useSyncExternalStore } from 'react'
 
 import { FrigadeContext } from '@/components/Provider'
+import { logOnce } from '../shared/log'
 
 export interface FlowConfig {
   variables?: Record<string, unknown>
@@ -14,7 +15,11 @@ export function useFlow(
   flow: Flow | undefined
   isLoading: boolean
 } {
-  const { frigade, variables } = useContext(FrigadeContext)
+  const context = useContext(FrigadeContext)
+  if (!context || !context.frigade) {
+    logOnce(`useFlow('${flowId}') must be used in a child of the Frigade Provider`, 'error')
+  }
+  const { frigade, variables } = context ?? {}
   const [, setForceRender] = useState<boolean>(false)
 
   const subscribe = useCallback(

packages/react/src/hooks/useFrigade.ts

@@ -1,9 +1,15 @@
 import { useContext } from 'react'
 
 import { FrigadeContext } from '@/components/Provider'
+import { logOnce } from '../shared/log'
 
 export function useFrigade() {
-  const { frigade } = useContext(FrigadeContext)
+  const context = useContext(FrigadeContext)
+  if (!context || !context.frigade) {
+    logOnce('useFrigade() must be used in a child of the Frigade Provider', 'error')
+  }
+
+  const { frigade } = context
 
   return { frigade, isLoading: !frigade?.isReady() }
 }

packages/react/src/hooks/useGroup.ts

@@ -1,9 +1,14 @@
 import { useContext } from 'react'
 
 import { FrigadeContext } from '@/components/Provider'
+import { logOnce } from '../shared/log'
 
 export function useGroup() {
-  const { frigade } = useContext(FrigadeContext)
+  const context = useContext(FrigadeContext)
+  if (!context || !context.frigade) {
+    logOnce('useGroup() must be used in a child of the Frigade Provider', 'error')
+  }
+  const { frigade } = context ?? {}
 
   /**
    * Sets properties for the current group

packages/react/src/hooks/useUser.ts

@@ -1,9 +1,14 @@
 import { useContext } from 'react'
 
 import { FrigadeContext } from '@/components/Provider'
+import { logOnce } from '../shared/log'
 
 export function useUser() {
-  const { userId, frigade } = useContext(FrigadeContext)
+  const context = useContext(FrigadeContext)
+  if (!context || !context.frigade) {
+    logOnce('useUser() must be used in a child of the Frigade Provider', 'error')
+  }
+  const { userId, frigade } = context ?? {}
 
   /**
    * Adds properties for the current user

packages/react/src/shared/log.ts

@@ -0,0 +1,13 @@
+const logOnce = (message: string, type: 'log' | 'warn' | 'error' = 'log') => {
+  const key = `__frigade_logged_${message}`
+
+  if (globalThis[key as keyof typeof globalThis]) {
+    return
+  }
+
+  // @ts-expect-error: globalThis is not typed
+  globalThis[key as keyof typeof globalThis] = true
+  console[type](message)
+}
+
+export { logOnce }