[ReactDevTools] add custom error view for caught error

ReactVersions.js

@@ -18,26 +18,26 @@
 //
 // 0.0.0-experimental-241c4467e-20200129
 
-const ReactVersion = '18.0.0';
+const ReactVersion = '18.1.0';
 
 // The label used by the @next channel. Represents the upcoming release's
 // stability. Could be "alpha", "beta", "rc", etc.
 const nextChannelLabel = 'next';
 
 const stablePackages = {
  'create-subscription': ReactVersion,
- 'eslint-plugin-react-hooks': '4.4.0',
- 'jest-react': '0.12.1',
+ 'eslint-plugin-react-hooks': '4.5.0',
+ 'jest-react': '0.13.1',
  react: ReactVersion,
  'react-art': ReactVersion,
  'react-dom': ReactVersion,
  'react-is': ReactVersion,
- 'react-reconciler': '0.27.0',
- 'react-refresh': '0.12.0',
+ 'react-reconciler': '0.28.0',
+ 'react-refresh': '0.13.0',
  'react-test-renderer': ReactVersion,
- 'use-subscription': '1.6.0',
- 'use-sync-external-store': '1.0.0',
- scheduler: '0.21.0',
+ 'use-subscription': '1.7.0',
+ 'use-sync-external-store': '1.1.0',
+ scheduler: '0.22.0',
 };
 
 // These packages do not exist in the @next or @latest channel, only

fixtures/ssr2/README.md

@@ -0,0 +1,30 @@
+# SSR Fixtures
+
+A set of test cases for quickly identifying issues with server-side rendering.
+
+## Setup
+
+To reference a local build of React, first run `npm run build` at the root
+of the React project. Then:
+
+```
+cd fixtures/ssr2
+yarn
+yarn start
+```
+
+The `start` command runs a webpack dev server and a server-side rendering server in development mode with hot reloading.
+
+**Note: whenever you make changes to React and rebuild it, you need to re-run `yarn` in this folder:**
+
+```
+yarn
+```
+
+If you want to try the production mode instead run:
+
+```
+yarn start:prod
+```
+
+This will pre-build all static resources and then start a server-side rendering HTTP server that hosts the React app and service the static resources (without hot reloading).

fixtures/ssr2/scripts/build.js

@@ -40,7 +40,6 @@ webpack(
  console.error(err.details);
  }
  process.exit(1);
- return;
  }
  const info = stats.toJson();
  if (stats.hasErrors()) {

fixtures/ssr2/server/render.js

@@ -20,6 +20,7 @@ let assets = {
 };
 
 module.exports = function render(url, res) {
+ const data = createServerData();
  // This is how you would wire it up previously:
  //
  // res.send(
@@ -36,14 +37,17 @@ module.exports = function render(url, res) {
  console.error('Fatal', error);
  });
  let didError = false;
- const data = createServerData();
  const {pipe, abort} = renderToPipeableStream(
  <DataProvider data={data}>
  <App assets={assets} />
  </DataProvider>,
  {
  bootstrapScripts: [assets['main.js']],
- onCompleteShell() {
+ onAllReady() {
+ // Full completion.
+ // You can use this for SSG or crawlers.
+ },
+ onShellReady() {
  // If something errored before we started streaming, we set the error code appropriately.
  res.statusCode = didError ? 500 : 200;
  res.setHeader('Content-type', 'text/html');

packages/eslint-plugin-react-hooks/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 4.4.0
+
+* No changes, this was an automated release together with React 18.
+
 ## 4.3.0
 
 * Support ESLint 8. ([@MichaelDeBoey](https:/MichaelDeBoey) in [#22248](https:/facebook/react/pull/22248))

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

@@ -366,7 +366,7 @@ const DispatcherProxyHandler = {
  const error = new Error('Missing method in Dispatcher: ' + prop);
  // Note: This error name needs to stay in sync with react-devtools-shared
  // TODO: refactor this if we ever combine the devtools and debug tools packages
- error.name = 'UnsupportedFeatureError';
+ error.name = 'ReactDebugToolsUnsupportedHookError';
  throw error;
  },
 };
@@ -667,6 +667,30 @@ function processDebugValues(
  }
 }
 
+function handleRenderFunctionError(error: any): void {
+ // original error might be any type.
+ if (
+ error instanceof Error &&
+ error.name === 'ReactDebugToolsUnsupportedHookError'
+ ) {
+ throw error;
+ }
+ // If the error is not caused by an unsupported feature, it means
+ // that the error is caused by user's code in renderFunction.
+ // In this case, we should wrap the original error inside a custom error
+ // so that devtools can give a clear message about it.
+ // $FlowFixMe: Flow doesn't know about 2nd argument of Error constructor
+ const wrapperError = new Error('Error rendering inspected component', {
+ cause: error,
+ });
+ // Note: This error name needs to stay in sync with react-devtools-shared
+ // TODO: refactor this if we ever combine the devtools and debug tools packages
+ wrapperError.name = 'ReactDebugToolsRenderError';
+ // this stage-4 proposal is not supported by all environments yet.
+ wrapperError.cause = error;
+ throw wrapperError;
+}
+
 export function inspectHooks<Props>(
  renderFunction: Props => React$Node,
  props: Props,
@@ -686,6 +710,8 @@ export function inspectHooks<Props>(
  try {
  ancestorStackError = new Error();
  renderFunction(props);
+ } catch (error) {
+ handleRenderFunctionError(error);
  } finally {
  readHookLog = hookLog;
  hookLog = [];
@@ -730,6 +756,8 @@ function inspectHooksOfForwardRef<Props, Ref>(
  try {
  ancestorStackError = new Error();
  renderFunction(props, ref);
+ } catch (error) {
+ handleRenderFunctionError(error);
  } finally {
  readHookLog = hookLog;
  hookLog = [];

packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js

@@ -276,10 +276,20 @@ describe('ReactHooksInspection', () => {
  },
  };
 
+ let didCatch = false;
  expect(() => {
- expect(() => {
+ // mock the Error constructor to check the internal of the error instance
+ try {
  ReactDebugTools.inspectHooks(Foo, {}, FakeDispatcherRef);
- }).toThrow("Cannot read property 'useState' of null");
+ } catch (error) {
+ expect(error.message).toBe('Error rendering inspected component');
+ // error.cause is the original error
+ expect(error.cause).toBeInstanceOf(Error);
+ expect(error.cause.message).toBe(
+ "Cannot read property 'useState' of null",
+ );
+ }
+ didCatch = true;
  }).toErrorDev(
  'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
  ' one of the following reasons:\n' +
@@ -289,6 +299,8 @@ describe('ReactHooksInspection', () => {
  'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
  {withoutStack: true},
  );
+ // avoid false positive if no error was thrown at all
+ expect(didCatch).toBe(true);
 
  expect(getterCalls).toBe(1);
  expect(setterCalls).toHaveLength(2);

packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js

@@ -920,16 +920,26 @@ describe('ReactHooksInspectionIntegration', () => {
 
  const renderer = ReactTestRenderer.create(<Foo />);
  const childFiber = renderer.root._currentFiber();
- expect(() => {
+
+ let didCatch = false;
+
+ try {
  ReactDebugTools.inspectHooksOfFiber(childFiber, FakeDispatcherRef);
- }).toThrow(
- 'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
- ' one of the following reasons:\n' +
- '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
- '2. You might be breaking the Rules of Hooks\n' +
- '3. You might have more than one copy of React in the same app\n' +
- 'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
- );
+ } catch (error) {
+ expect(error.message).toBe('Error rendering inspected component');
+ expect(error.cause).toBeInstanceOf(Error);
+ expect(error.cause.message).toBe(
+ 'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+ ' one of the following reasons:\n' +
+ '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+ '2. You might be breaking the Rules of Hooks\n' +
+ '3. You might have more than one copy of React in the same app\n' +
+ 'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
+ );
+ didCatch = true;
+ }
+ // avoid false positive if no error was thrown at all
+ expect(didCatch).toBe(true);
 
  expect(getterCalls).toBe(1);
  expect(setterCalls).toHaveLength(2);

packages/react-devtools-shared/src/__tests__/inspectedElement-test.js

@@ -2145,7 +2145,7 @@ describe('InspectedElement', () => {
  expect(value).toBe(null);
 
  const error = errorBoundaryInstance.state.error;
- expect(error.message).toBe('Expected');
+ expect(error.message).toBe('Error rendering inspected component');
  expect(error.stack).toContain('inspectHooksOfFiber');
  });
 

packages/react-devtools-shared/src/backend/renderer.js

@@ -3606,6 +3606,43 @@ export function attach(
  try {
  mostRecentlyInspectedElement = inspectElementRaw(id);
  } catch (error) {
+ // the error name is synced with ReactDebugHooks
+ if (error.name === 'ReactDebugToolsRenderError') {
+ let message = 'Error rendering inspected element.';
+ let stack;
+ // Log error & cause for user to debug
+ console.error(message + '\n\n', error);
+ if (error.cause != null) {
+ console.error(
+ 'Original error causing above error: \n\n',
+ error.cause,
+ );
+ if (error.cause instanceof Error) {
+ message = error.cause.message || message;
+ stack = error.cause.stack;
+ }
+ }
+
+ return {
+ type: 'user-error',
+ id,
+ responseID: requestID,
+ message,
+ stack,
+ };
+ }
+
+ // the error name is synced with ReactDebugHooks
+ if (error.name === 'ReactDebugToolsUnsupportedHookError') {
+ return {
+ type: 'unsupported-feature',
+ id,
+ responseID: requestID,
+ message: 'Unsupported feature: ' + error.message,
+ };
+ }
+
+ // Log Uncaught Error
  console.error('Error inspecting element.\n\n', error);
 
  return {

packages/react-devtools-shared/src/backend/types.js

@@ -281,6 +281,8 @@ export type InspectedElement = {|
 |};
 
 export const InspectElementErrorType = 'error';
+export const InspectElementUserErrorType = 'user-error';
+export const InspectElementUnsupportedFeatureErrorType = 'unsupported-feature';
 export const InspectElementFullDataType = 'full-data';
 export const InspectElementNoChangeType = 'no-change';
 export const InspectElementNotFoundType = 'not-found';
@@ -293,6 +295,21 @@ export type InspectElementError = {|
  stack: string,
 |};
 
+export type InspectElementUserError = {|
+ id: number,
+ responseID: number,
+ type: 'user-error',
+ message: string,
+ stack: ?string,
+|};
+
+export type InspectElementUnsupportedFeatureError = {|
+ id: number,
+ responseID: number,
+ type: 'unsupported-feature',
+ message: string,
+|};
+
 export type InspectElementFullData = {|
  id: number,
  responseID: number,
@@ -322,6 +339,8 @@ export type InspectElementNotFound = {|
 
 export type InspectedElementPayload =
  | InspectElementError
+ | InspectElementUserError
+ | InspectElementUnsupportedFeatureError
  | InspectElementFullData
  | InspectElementHydratedPath
  | InspectElementNoChange

packages/react-devtools-shared/src/backendAPI.js

@@ -10,7 +10,7 @@
 import {hydrate, fillInPath} from 'react-devtools-shared/src/hydration';
 import {separateDisplayNameAndHOCs} from 'react-devtools-shared/src/utils';
 import Store from 'react-devtools-shared/src/devtools/store';
-import TimeoutError from 'react-devtools-shared/src/TimeoutError';
+import TimeoutError from 'react-devtools-shared/src/errors/TimeoutError';
 
 import type {
  InspectedElement as InspectedElementBackend,

packages/react-devtools-shared/src/devtools/views/Components/types.js

@@ -63,6 +63,7 @@ export type OwnersList = {|
 
 export type InspectedElementResponseType =
  | 'error'
+ | 'user-error'
  | 'full-data'
  | 'hydrated-path'
  | 'no-change'