[ReactDebugTools] add custom error type for future new hooks

Author: mondaychen

packages/react-debug-tools/src/ReactDebugCustomErrors.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/**
+ * This file contains a list of custom Errors that ReactDebugTools can throw in
+ * special occasions.
+ * The names of the errors are exported so that other packages (such as DevTools)
+ * can use them to detect and handle them separately.
+ */
+
+export const ErrorsNames = {
+  UNSUPPORTTED_FEATURE_ERROR: 'UnsupportedFeatureError',
+};
+
+// For now we just override the name. If we decide to move react-debug-tools to
+// devtools package, we should use a real Error class instead.
+export function createUnsupportedFeatureError(message: string = '') {
+  const error = new Error(message);
+  error.name = ErrorsNames.UNSUPPORTTED_FEATURE_ERROR;
+  return error;
+}

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -29,6 +29,7 @@ import {
   ContextProvider,
   ForwardRef,
 } from 'react-reconciler/src/ReactWorkTags';
+import {createUnsupportedFeatureError} from './ReactDebugCustomErrors';
 
 type CurrentDispatcherRef = typeof ReactSharedInternals.ReactCurrentDispatcher;
 
@@ -356,6 +357,21 @@ const Dispatcher: DispatcherType = {
   useId,
 };
 
+// create a proxy to throw a custom error
+// in case future versions of React adds more hooks
+const DispatcherProxyHandler = {
+  get(target, prop, _receiver) {
+    if (target.hasOwnProperty(prop)) {
+      return Reflect.get(...arguments);
+    }
+    throw createUnsupportedFeatureError(
+      'Missing method in Dispatcher: ' + prop,
+    );
+  },
+};
+
+const DispatcherProxy = new Proxy(Dispatcher, DispatcherProxyHandler);
+
 // Inspect
 
 export type HookSource = {
@@ -664,7 +680,7 @@ export function inspectHooks<Props>(
 
   const previousDispatcher = currentDispatcher.current;
   let readHookLog;
-  currentDispatcher.current = Dispatcher;
+  currentDispatcher.current = DispatcherProxy;
   let ancestorStackError;
   try {
     ancestorStackError = new Error();
@@ -708,7 +724,7 @@ function inspectHooksOfForwardRef<Props, Ref>(
 ): HooksTree {
   const previousDispatcher = currentDispatcher.current;
   let readHookLog;
-  currentDispatcher.current = Dispatcher;
+  currentDispatcher.current = DispatcherProxy;
   let ancestorStackError;
   try {
     ancestorStackError = new Error();

packages/react-debug-tools/src/ReactDebugTools.js

@@ -8,5 +8,6 @@
  */
 
 import {inspectHooks, inspectHooksOfFiber} from './ReactDebugHooks';
+import {ErrorsNames} from './ReactDebugCustomErrors';
 
-export {inspectHooks, inspectHooksOfFiber};
+export {inspectHooks, inspectHooksOfFiber, ErrorsNames};