Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Re-enabled DebugTracing feature for old reconciler fork #19161

Merged
merged 2 commits into from
Jun 23, 2020
Merged

Re-enabled DebugTracing feature for old reconciler fork #19161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
87860f5
Re-enabled DebugTracing feature for old reconciler fork
Jun 19, 2020
feb7b1a
Force Code Sandbox CI to re-run
Jun 19, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 17 additions & 12 deletions packages/react-reconciler/src/DebugTracing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
* @flow
*/

import type {Lane, Lanes} from './ReactFiberLane';
import type {Wakeable} from 'shared/ReactTypes';

import {enableDebugTracing} from 'shared/ReactFeatureFlags';
Expand All @@ -17,6 +18,10 @@ let nativeConsoleLog: null | Function = null;
const pendingGroupArgs: Array<any> = [];
let printedGroupIndex: number = -1;

function formatLanes(laneOrLanes: Lane | Lanes): string {
return '0b' + (laneOrLanes: any).toString(2).padStart(31, '0');
}

function group(...groupArgs): void {
pendingGroupArgs.push(groupArgs);

Expand Down Expand Up @@ -57,11 +62,11 @@ function log(...logArgs): void {
const REACT_LOGO_STYLE =
'background-color: #20232a; color: #61dafb; padding: 0 2px;';

export function logCommitStarted(priorityLabel: string): void {
export function logCommitStarted(lanes: Lanes): void {
if (__DEV__) {
if (enableDebugTracing) {
group(
`%c⚛️%c commit%c (priority: ${priorityLabel})`,
`%c⚛️%c commit%c (${formatLanes(lanes)})`,
REACT_LOGO_STYLE,
'',
'font-weight: normal;',
Expand Down Expand Up @@ -128,11 +133,11 @@ export function logComponentSuspended(
}
}

export function logLayoutEffectsStarted(priorityLabel: string): void {
export function logLayoutEffectsStarted(lanes: Lanes): void {
if (__DEV__) {
if (enableDebugTracing) {
group(
`%c⚛️%c layout effects%c (priority: ${priorityLabel})`,
`%c⚛️%c layout effects%c (${formatLanes(lanes)})`,
REACT_LOGO_STYLE,
'',
'font-weight: normal;',
Expand All @@ -149,11 +154,11 @@ export function logLayoutEffectsStopped(): void {
}
}

export function logPassiveEffectsStarted(priorityLabel: string): void {
export function logPassiveEffectsStarted(lanes: Lanes): void {
if (__DEV__) {
if (enableDebugTracing) {
group(
`%c⚛️%c passive effects%c (priority: ${priorityLabel})`,
`%c⚛️%c passive effects%c (${formatLanes(lanes)})`,
REACT_LOGO_STYLE,
'',
'font-weight: normal;',
Expand All @@ -170,11 +175,11 @@ export function logPassiveEffectsStopped(): void {
}
}

export function logRenderStarted(priorityLabel: string): void {
export function logRenderStarted(lanes: Lanes): void {
if (__DEV__) {
if (enableDebugTracing) {
group(
`%c⚛️%c render%c (priority: ${priorityLabel})`,
`%c⚛️%c render%c (${formatLanes(lanes)})`,
REACT_LOGO_STYLE,
'',
'font-weight: normal;',
Expand All @@ -193,12 +198,12 @@ export function logRenderStopped(): void {

export function logForceUpdateScheduled(
componentName: string,
priorityLabel: string,
lane: Lane,
): void {
if (__DEV__) {
if (enableDebugTracing) {
log(
`%c⚛️%c ${componentName} forced update %c(priority: ${priorityLabel})`,
`%c⚛️%c ${componentName} forced update %c(${formatLanes(lane)})`,
REACT_LOGO_STYLE,
'color: #db2e1f; font-weight: bold;',
'',
Expand All @@ -209,13 +214,13 @@ export function logForceUpdateScheduled(

export function logStateUpdateScheduled(
componentName: string,
priorityLabel: string,
lane: Lane,
payloadOrAction: any,
): void {
if (__DEV__) {
if (enableDebugTracing) {
log(
`%c⚛️%c ${componentName} updated state %c(priority: ${priorityLabel})`,
`%c⚛️%c ${componentName} updated state %c(${formatLanes(lane)})`,
REACT_LOGO_STYLE,
'color: #01a252; font-weight: bold;',
'',
Expand Down
31 changes: 30 additions & 1 deletion packages/react-reconciler/src/ReactFiberClassComponent.old.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {Update, Snapshot} from './ReactSideEffectTags';
import {
debugRenderPhaseSideEffectsForStrictMode,
disableLegacyContext,
enableDebugTracing,
warnAboutDeprecatedLifecycles,
} from 'shared/ReactFeatureFlags';
import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
Expand All @@ -27,7 +28,7 @@ import invariant from 'shared/invariant';
import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';

import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
import {StrictMode} from './ReactTypeOfMode';
import {DebugTracingMode, StrictMode} from './ReactTypeOfMode';

import {
enqueueUpdate,
Expand Down Expand Up @@ -55,6 +56,7 @@ import {
scheduleUpdateOnFiber,
} from './ReactFiberWorkLoop.old';
import {requestCurrentSuspenseConfig} from './ReactFiberSuspenseConfig';
import {logForceUpdateScheduled, logStateUpdateScheduled} from './DebugTracing';

import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';

Expand Down Expand Up @@ -203,6 +205,15 @@ const classComponentUpdater = {

enqueueUpdate(fiber, update);
scheduleUpdateOnFiber(fiber, lane, eventTime);

if (__DEV__) {
if (enableDebugTracing) {
if (fiber.mode & DebugTracingMode) {
const name = getComponentName(fiber.type) || 'Unknown';
logStateUpdateScheduled(name, lane, payload);
}
}
}
},
enqueueReplaceState(inst, payload, callback) {
const fiber = getInstance(inst);
Expand All @@ -223,6 +234,15 @@ const classComponentUpdater = {

enqueueUpdate(fiber, update);
scheduleUpdateOnFiber(fiber, lane, eventTime);

if (__DEV__) {
if (enableDebugTracing) {
if (fiber.mode & DebugTracingMode) {
const name = getComponentName(fiber.type) || 'Unknown';
logStateUpdateScheduled(name, lane, payload);
}
}
}
},
enqueueForceUpdate(inst, callback) {
const fiber = getInstance(inst);
Expand All @@ -242,6 +262,15 @@ const classComponentUpdater = {

enqueueUpdate(fiber, update);
scheduleUpdateOnFiber(fiber, lane, eventTime);

if (__DEV__) {
if (enableDebugTracing) {
if (fiber.mode & DebugTracingMode) {
const name = getComponentName(fiber.type) || 'Unknown';
logForceUpdateScheduled(name, lane);
}
}
}
},
};

Expand Down
17 changes: 15 additions & 2 deletions packages/react-reconciler/src/ReactFiberHooks.old.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,12 @@ import type {FiberRoot} from './ReactInternalTypes';
import type {OpaqueIDType} from './ReactFiberHostConfig';

import ReactSharedInternals from 'shared/ReactSharedInternals';
import {enableNewReconciler} from 'shared/ReactFeatureFlags';
import {
enableDebugTracing,
enableNewReconciler,
} from 'shared/ReactFeatureFlags';

import {NoMode, BlockingMode} from './ReactTypeOfMode';
import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
import {
NoLane,
NoLanes,
Expand Down Expand Up @@ -83,6 +86,7 @@ import {
warnAboutMultipleRenderersDEV,
} from './ReactMutableSource.old';
import {getIsRendering} from './ReactCurrentFiber';
import {logStateUpdateScheduled} from './DebugTracing';

const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;

Expand Down Expand Up @@ -1737,6 +1741,15 @@ function dispatchAction<S, A>(
}
scheduleUpdateOnFiber(fiber, lane, eventTime);
}

if (__DEV__) {
if (enableDebugTracing) {
if (fiber.mode & DebugTracingMode) {
const name = getComponentName(fiber.type) || 'Unknown';
logStateUpdateScheduled(name, lane, action);
}
}
}
}

export const ContextOnlyDispatcher: Dispatcher = {
Expand Down
13 changes: 12 additions & 1 deletion packages/react-reconciler/src/ReactFiberThrow.old.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ import {
LifecycleEffectMask,
} from './ReactSideEffectTags';
import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent.old';
import {NoMode, BlockingMode} from './ReactTypeOfMode';
import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
import {enableDebugTracing} from 'shared/ReactFeatureFlags';
import {createCapturedValue} from './ReactCapturedValue';
import {
enqueueCapturedUpdate,
Expand All @@ -53,6 +54,7 @@ import {
pingSuspendedRoot,
} from './ReactFiberWorkLoop.old';
import {logCapturedError} from './ReactFiberErrorLogger';
import {logComponentSuspended} from './DebugTracing';

import {
SyncLane,
Expand Down Expand Up @@ -189,6 +191,15 @@ function throwException(
// This is a wakeable.
const wakeable: Wakeable = (value: any);

if (__DEV__) {
if (enableDebugTracing) {
if (sourceFiber.mode & DebugTracingMode) {
const name = getComponentName(sourceFiber.type) || 'Unknown';
logComponentSuspended(name, wakeable);
}
}
}

if ((sourceFiber.mode & BlockingMode) === NoMode) {
// Reset the memoizedState to what it was before we attempted
// to render it.
Expand Down
Loading