Files
react/packages/react-devtools-shared/src/devtools/views/Components/CannotSuspendWarningMessage.js
Ruslan Lesiutin 77ec61885f fix[devtools/inspectElement]: dont pause initial inspectElement call when user switches tabs (#27488)
There are not so many changes, most of them are changing imports,
because I've moved types for UI in a single file.

In https://github.com/facebook/react/pull/27357 I've added support for
pausing polling events: when user inspects an element, we start polling
React DevTools backend for updates in props / state. If user switches
tabs, extension's service worker can be killed by browser and this
polling will start spamming errors.

What I've missed is that we also have a separate call for this API, but
which is executed only once when user selects an element. We don't
handle promise rejection here and this can lead to some errors when user
selects an element and switches tabs right after it.

The only change here is that this API now has
`shouldListenToPauseEvents` param, which is `true` for polling, so we
will pause polling once user switches tabs. It is `false` by default, so
we won't pause initial call by accident.


af8beeebf6/packages/react-devtools-shared/src/backendAPI.js (L96)
2023-10-10 18:10:17 +01:00

45 lines
1.2 KiB
JavaScript

/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
import * as React from 'react';
import {useContext} from 'react';
import {StoreContext} from '../context';
import {
ComponentFilterElementType,
ElementTypeSuspense,
} from 'react-devtools-shared/src/frontend/types';
export default function CannotSuspendWarningMessage(): React.Node {
const store = useContext(StoreContext);
const areSuspenseElementsHidden = !!store.componentFilters.find(
filter =>
filter.type === ComponentFilterElementType &&
filter.value === ElementTypeSuspense &&
filter.isEnabled,
);
// Has the user filtered out Suspense nodes from the tree?
// If so, the selected element might actually be in a Suspense tree after all.
if (areSuspenseElementsHidden) {
return (
<div>
Suspended state cannot be toggled while Suspense components are hidden.
Disable the filter and try again.
</div>
);
} else {
return (
<div>
The selected element is not within a Suspense container. Suspending it
would cause an error.
</div>
);
}
}