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.

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

Console Logging for StrictMode Double Rendering #22030

Merged
merged 6 commits into from
Aug 25, 2021
Merged
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
Change double render console color based on browser theme
lunaruan committed Aug 25, 2021
commit 181c2d6699ce040f3a703b0e83aadd47addb9f32
3 changes: 3 additions & 0 deletions packages/react-devtools-extensions/src/main.js
Original file line number Diff line number Diff line change
@@ -46,6 +46,9 @@ function syncSavedPreferences() {
)};
window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = ${JSON.stringify(
getHideConsoleLogsInStrictMode(),
)};
window.__REACT_DEVTOOLS_BROWSER_THEME__ = ${JSON.stringify(
getBrowserTheme(),
lunaruan marked this conversation as resolved.
Show resolved Hide resolved
)};`,
);
}
4 changes: 2 additions & 2 deletions packages/react-devtools-extensions/src/utils.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
/* global chrome */

import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
lunaruan marked this conversation as resolved.
Show resolved Hide resolved

const IS_CHROME = navigator.userAgent.indexOf('Firefox') < 0;

export type BrowserName = 'Chrome' | 'Firefox';
@@ -8,8 +10,6 @@ export function getBrowserName(): BrowserName {
return IS_CHROME ? 'Chrome' : 'Firefox';
}

export type BrowserTheme = 'dark' | 'light';

export function getBrowserTheme(): BrowserTheme {
if (IS_CHROME) {
// chrome.devtools.panels added in Chrome 18.
4 changes: 4 additions & 0 deletions packages/react-devtools-shared/src/backend/agent.js
Original file line number Diff line number Diff line change
@@ -40,6 +40,7 @@ import type {
} from './types';
import type {ComponentFilter} from '../types';
import {isSynchronousXHRSupported} from './utils';
import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';

const debug = (methodName, ...args) => {
if (__DEBUG__) {
@@ -636,11 +637,13 @@ export default class Agent extends EventEmitter<{|
breakOnConsoleErrors,
showInlineWarningsAndErrors,
hideConsoleLogsInStrictMode,
browserTheme,
}: {|
appendComponentStack: boolean,
breakOnConsoleErrors: boolean,
showInlineWarningsAndErrors: boolean,
hideConsoleLogsInStrictMode: boolean,
browserTheme: BrowserTheme,
|}) => {
// If the frontend preference has change,
// or in the case of React Native- if the backend is just finding out the preference-
@@ -651,6 +654,7 @@ export default class Agent extends EventEmitter<{|
breakOnConsoleErrors,
showInlineWarningsAndErrors,
hideConsoleLogsInStrictMode,
browserTheme,
});
};

27 changes: 21 additions & 6 deletions packages/react-devtools-shared/src/backend/console.js
Original file line number Diff line number Diff line change
@@ -9,6 +9,7 @@

import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
import type {CurrentDispatcherRef, ReactRenderer, WorkTagMap} from './types';
import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
import {format} from './utils';

import {getInternalReactConstants} from './renderer';
@@ -17,9 +18,12 @@ import {getStackByFiberInDevAndProd} from './DevToolsFiberComponentStack';
// NOTE: KEEP IN SYNC with src/hook.js
const OVERRIDE_CONSOLE_METHODS = ['error', 'trace', 'warn', 'log'];
const DIMMED_NODE_CONSOLE_COLOR = '\x1b[2m%s\x1b[0m';
const DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, .5)';
const DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, .5)';
const DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.5)';
const DARK_MODE_DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, 0.5)';
const DARK_MODE_DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, 0.5)';
const DARK_MODE_DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.5)';
const LIGHT_MODE_DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, 0.75)';
const LIGHT_MODE_DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, 0.75)';
const LIGHT_MODE_DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.75)';

// React's custom built component stack strings match "\s{4}in"
// Chrome's prefix matches "\s{4}at"
@@ -124,11 +128,13 @@ export function patch({
breakOnConsoleErrors,
showInlineWarningsAndErrors,
hideConsoleLogsInStrictMode,
browserTheme,
}: {
appendComponentStack: boolean,
breakOnConsoleErrors: boolean,
showInlineWarningsAndErrors: boolean,
hideConsoleLogsInStrictMode: boolean,
browserTheme: BrowserTheme,
}): void {
// Settings may change after we've patched the console.
// Using a shared ref allows the patch function to read the latest values.
@@ -248,14 +254,23 @@ export function patch({
let color;
switch (method) {
case 'warn':
color = DIMMED_WARNING_COLOR;
color =
browserTheme === 'light'
? LIGHT_MODE_DIMMED_WARNING_COLOR
: DARK_MODE_DIMMED_WARNING_COLOR;
break;
case 'error':
color = DIMMED_ERROR_COLOR;
color =
browserTheme === 'light'
? LIGHT_MODE_DIMMED_ERROR_COLOR
: DARK_MODE_DIMMED_ERROR_COLOR;
break;
case 'log':
default:
color = DIMMED_LOG_COLOR;
color =
browserTheme === 'light'
? LIGHT_MODE_DIMMED_LOG_COLOR
: DARK_MODE_DIMMED_LOG_COLOR;
break;
}

2 changes: 2 additions & 0 deletions packages/react-devtools-shared/src/backend/renderer.js
Original file line number Diff line number Diff line change
@@ -742,12 +742,14 @@ export function attach(
window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false;
const hideConsoleLogsInStrictMode =
window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true;
const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__;

patchConsole({
appendComponentStack,
breakOnConsoleErrors,
showInlineWarningsAndErrors,
hideConsoleLogsInStrictMode,
browserTheme,
});
}

2 changes: 2 additions & 0 deletions packages/react-devtools-shared/src/bridge.js
Original file line number Diff line number Diff line change
@@ -17,6 +17,7 @@ import type {
RendererID,
} from 'react-devtools-shared/src/backend/types';
import type {StyleAndLayout as StyleAndLayoutPayload} from 'react-devtools-shared/src/backend/NativeStyleEditor/types';
import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';

const BATCH_DURATION = 100;

@@ -165,6 +166,7 @@ type UpdateConsolePatchSettingsParams = {|
breakOnConsoleErrors: boolean,
showInlineWarningsAndErrors: boolean,
hideConsoleLogsInStrictMode: boolean,
browserTheme: BrowserTheme,
|};

export type BackendEvents = {|
Original file line number Diff line number Diff line change
@@ -181,13 +181,15 @@ function SettingsContextController({
breakOnConsoleErrors,
showInlineWarningsAndErrors,
hideConsoleLogsInStrictMode,
browserTheme,
});
}, [
bridge,
appendComponentStack,
breakOnConsoleErrors,
showInlineWarningsAndErrors,
hideConsoleLogsInStrictMode,
browserTheme,
]);

useEffect(() => {
9 changes: 8 additions & 1 deletion packages/react-devtools-shared/src/hook.js
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@

import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
import type {ReactRenderer} from './backend/types';
import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';

import {
patch as patchConsole,
@@ -224,7 +225,10 @@ export function installHook(target: any): DevToolsHook | null {
// NOTE: KEEP IN SYNC with src/backend/console.js:patch
function patchConsoleForInitialRenderInExtension(
renderer: ReactRenderer,
{hideConsoleLogsInStrictMode}: {hideConsoleLogsInStrictMode: boolean},
{
hideConsoleLogsInStrictMode,
browserTheme,
}: {hideConsoleLogsInStrictMode: boolean, browserTheme: BrowserTheme},
): void {
const overrideConsoleMethods = ['error', 'trace', 'warn', 'log'];

@@ -346,6 +350,7 @@ export function installHook(target: any): DevToolsHook | null {
window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false;
const hideConsoleLogsInStrictMode =
window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true;
const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__;

// The installHook() function is injected by being stringified in the browser,
// so imports outside of this function do not get included.
@@ -361,10 +366,12 @@ export function installHook(target: any): DevToolsHook | null {
breakOnConsoleErrors,
showInlineWarningsAndErrors,
hideConsoleLogsInStrictMode,
browserTheme,
});
} else {
patchConsoleForInitialRenderInExtension(renderer, {
hideConsoleLogsInStrictMode,
browserTheme,
});
}
} catch (error) {}