refactor: remove logging in prod mode (#3103)

to not log to the console per default; to access process.ENV, we need to enable node typings, which screws with setTimeout / setInterval, as typings are different for node and the browser; I tried to keep the changes to type-level only

Author: TkDodo

docs/src/pages/guides/migrating-to-react-query-4.md

@@ -247,6 +247,11 @@ The methods `cancelMutatations` and `executeMutation` were undocumented and unus
 
 Types now require using TypeScript v4.1 or greater
 
+### Logging
+
+Starting with v4, react-query will no longer log errors (e.g. failed fetches) to the console in production mode, as this was confusing to many.
+Errors will still show up in development mode.
+
 ## New Features 🚀
 
 ### Proper offline support

src/core/mutation.ts

@@ -235,8 +235,9 @@ export class Mutation<
           this as Mutation<unknown, unknown, unknown, unknown>
         )
 
-        // Log error
-        getLogger().error(error)
+        if (process.env.NODE_ENV !== 'production') {
+          getLogger().error(error)
+        }
 
         return Promise.resolve()
           .then(() =>

src/core/query.ts

@@ -367,6 +367,16 @@ export class Query<
       }
     }
 
+    if (
+      process.env.NODE_ENV !== 'production' &&
+      !Array.isArray(this.options.queryKey)
+    ) {
+      getLogger().error(
+        'As of v4, queryKey needs to be an Array, but the queryKey used was:',
+        JSON.stringify(this.options.queryKey)
+      )
+    }
+
     const abortController = getAbortController()
 
     // Create query function context
@@ -459,8 +469,9 @@ export class Query<
           // Notify cache callback
           this.cache.config.onError?.(error, this as Query<any, any, any, any>)
 
-          // Log error
-          getLogger().error(error)
+          if (process.env.NODE_ENV !== 'production') {
+            getLogger().error(error)
+          }
         }
 
         if (!this.isFetchingOptimistic) {

src/core/queryObserver.ts

@@ -70,8 +70,8 @@ export class QueryObserver<
   private previousQueryResult?: QueryObserverResult<TData, TError>
   private previousSelectError: TError | null
   private previousSelectFn?: (data: TQueryData) => TData
-  private staleTimeoutId?: number
-  private refetchIntervalId?: number
+  private staleTimeoutId?: ReturnType<typeof setTimeout>
+  private refetchIntervalId?: ReturnType<typeof setInterval>
   private currentRefetchInterval?: number | false
   private trackedProps!: Set<keyof QueryObserverResult>
 
@@ -398,12 +398,12 @@ export class QueryObserver<
   }
 
   private clearStaleTimeout(): void {
-    clearTimeout(this.staleTimeoutId)
+    clearTimeout(this.staleTimeoutId!)
     this.staleTimeoutId = undefined
   }
 
   private clearRefetchInterval(): void {
-    clearInterval(this.refetchIntervalId)
+    clearInterval(this.refetchIntervalId!)
     this.refetchIntervalId = undefined
   }
 
@@ -486,7 +486,9 @@ export class QueryObserver<
           }
           this.previousSelectError = null
         } catch (selectError) {
-          getLogger().error(selectError)
+          if (process.env.NODE_ENV !== 'production') {
+            getLogger().error(selectError)
+          }
           error = selectError as TError
           this.previousSelectError = selectError as TError
           errorUpdatedAt = Date.now()
@@ -529,7 +531,9 @@ export class QueryObserver<
             }
             this.previousSelectError = null
           } catch (selectError) {
-            getLogger().error(selectError)
+            if (process.env.NODE_ENV !== 'production') {
+              getLogger().error(selectError)
+            }
             error = selectError as TError
             this.previousSelectError = selectError as TError
             errorUpdatedAt = Date.now()

src/core/removable.ts

@@ -2,7 +2,7 @@ import { isValidTimeout } from './utils'
 
 export abstract class Removable {
   cacheTime!: number
-  private gcTimeout?: number
+  private gcTimeout?: ReturnType<typeof setTimeout>
 
   destroy(): void {
     this.clearGcTimeout()
@@ -27,7 +27,7 @@ export abstract class Removable {
   }
 
   protected clearGcTimeout() {
-    clearTimeout(this.gcTimeout)
+    clearTimeout(this.gcTimeout!)
     this.gcTimeout = undefined
   }
 

src/core/tests/queriesObserver.test.tsx

@@ -5,6 +5,8 @@ import {
   QueriesObserver,
   QueryObserverResult,
   QueryObserver,
+  Logger,
+  setLogger,
 } from '../..'
 import { QueryKey } from '..'
 
@@ -39,6 +41,14 @@ describe('queriesObserver', () => {
   })
 
   test('should still return value for undefined query key', async () => {
+    const logger: Logger = {
+      error: jest.fn(),
+      log: jest.fn(),
+      warn: jest.fn(),
+    }
+
+    setLogger(logger)
+
     const key1 = queryKey()
     const queryFn1 = jest.fn().mockReturnValue(1)
     const queryFn2 = jest.fn().mockReturnValue(2)
@@ -53,6 +63,9 @@ describe('queriesObserver', () => {
     await sleep(1)
     unsubscribe()
     expect(observerResult).toMatchObject([{ data: 1 }, { data: 2 }])
+
+    expect(logger.error).toHaveBeenCalledTimes(1)
+    setLogger(console)
   })
 
   test('should update when a query updates', async () => {

src/core/tests/utils.test.tsx

@@ -379,7 +379,7 @@ describe('core/utils', () => {
             // Do no throw an uncaught exception that cannot be tested with
             // this jest version
           }
-          return 0
+          return 0 as any
         })
       scheduleMicrotask(callback)
       jest.runAllTimers()

src/createAsyncStoragePersister/index.ts

@@ -58,7 +58,7 @@ function asyncThrottle<Args extends readonly unknown[], Result>(
   if (typeof func !== 'function') throw new Error('argument is not function.')
   const running = { current: false }
   let lastTime = 0
-  let timeout: number
+  let timeout: ReturnType<typeof setTimeout>
   const queue: Array<Args> = []
   return (...args: Args) =>
     (async () => {

src/createWebStoragePersister/index.ts

@@ -96,7 +96,7 @@ function throttle<TArgs extends any[]>(
   func: (...args: TArgs) => any,
   wait = 100
 ) {
-  let timer: number | null = null
+  let timer: ReturnType<typeof setTimeout> | null = null
   let params: TArgs
   return function (...args: TArgs) {
     params = args

tsconfig.json

@@ -14,7 +14,7 @@
     "noUncheckedIndexedAccess": true,
     "skipLibCheck": true,
     "strict": true,
-    "types": ["jest"],
+    "types": ["jest", "node"],
     "paths": {
       "react-query": ["./src/index.ts"]
     }