From f71dfbcbf020bea806827ef8b8e8a8743de8d615 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 6 Jun 2016 20:37:46 +0200 Subject: [PATCH] Warn that ReactPerf does not work in the production build (#6884, #6975) Fixes #6871 --- src/renderers/shared/ReactDebugTool.js | 4 +- src/renderers/shared/ReactPerf.js | 86 +++++++++++++++++-- .../shared/__tests__/ReactPerf-test.js | 23 +++++ 3 files changed, 104 insertions(+), 9 deletions(-) diff --git a/src/renderers/shared/ReactDebugTool.js b/src/renderers/shared/ReactDebugTool.js index cd6ac3bb80ed1..6deb84bc85be6 100644 --- a/src/renderers/shared/ReactDebugTool.js +++ b/src/renderers/shared/ReactDebugTool.js @@ -208,9 +208,7 @@ var ReactDebugTool = { } }, getFlushHistory() { - if (__DEV__) { - return flushHistory; - } + return flushHistory; }, onBeginFlush() { if (__DEV__) { diff --git a/src/renderers/shared/ReactPerf.js b/src/renderers/shared/ReactPerf.js index 209651e21693c..9307ace3af6b8 100644 --- a/src/renderers/shared/ReactPerf.js +++ b/src/renderers/shared/ReactPerf.js @@ -13,17 +13,41 @@ var ReactDebugTool = require('ReactDebugTool'); var warning = require('warning'); +var alreadyWarned = false; function roundFloat(val, base = 2) { var n = Math.pow(10, base); return Math.floor(val * n) / n; } -function getFlushHistory() { +function warnInProduction() { + if (alreadyWarned) { + return; + } + alreadyWarned = true; + if (typeof console !== 'undefined') { + console.error( + 'ReactPerf is not supported in the production builds of React. ' + + 'To collect measurements, please use the development build of React instead.' + ); + } +} + +function getLastMeasurements() { + if (!__DEV__) { + warnInProduction(); + return []; + } + return ReactDebugTool.getFlushHistory(); } -function getExclusive(flushHistory = getFlushHistory()) { +function getExclusive(flushHistory = getLastMeasurements()) { + if (!__DEV__) { + warnInProduction(); + return []; + } + var aggregatedStats = {}; var affectedIDs = {}; @@ -73,7 +97,12 @@ function getExclusive(flushHistory = getFlushHistory()) { ); } -function getInclusive(flushHistory = getFlushHistory()) { +function getInclusive(flushHistory = getLastMeasurements()) { + if (!__DEV__) { + warnInProduction(); + return []; + } + var aggregatedStats = {}; var affectedIDs = {}; @@ -141,7 +170,12 @@ function getInclusive(flushHistory = getFlushHistory()) { ); } -function getWasted(flushHistory = getFlushHistory()) { +function getWasted(flushHistory = getLastMeasurements()) { + if (!__DEV__) { + warnInProduction(); + return []; + } + var aggregatedStats = {}; var affectedIDs = {}; @@ -234,7 +268,12 @@ function getWasted(flushHistory = getFlushHistory()) { ); } -function getOperations(flushHistory = getFlushHistory()) { +function getOperations(flushHistory = getLastMeasurements()) { + if (!__DEV__) { + warnInProduction(); + return []; + } + var stats = []; flushHistory.forEach((flush, flushIndex) => { var {operations, treeSnapshot} = flush; @@ -258,6 +297,11 @@ function getOperations(flushHistory = getFlushHistory()) { } function printExclusive(flushHistory) { + if (!__DEV__) { + warnInProduction(); + return; + } + var stats = getExclusive(flushHistory); var table = stats.map(item => { var {key, instanceCount, totalDuration} = item; @@ -279,6 +323,11 @@ function printExclusive(flushHistory) { } function printInclusive(flushHistory) { + if (!__DEV__) { + warnInProduction(); + return; + } + var stats = getInclusive(flushHistory); var table = stats.map(item => { var {key, instanceCount, inclusiveRenderDuration, renderCount} = item; @@ -293,6 +342,11 @@ function printInclusive(flushHistory) { } function printWasted(flushHistory) { + if (!__DEV__) { + warnInProduction(); + return; + } + var stats = getWasted(flushHistory); var table = stats.map(item => { var {key, instanceCount, inclusiveRenderDuration, renderCount} = item; @@ -307,6 +361,11 @@ function printWasted(flushHistory) { } function printOperations(flushHistory) { + if (!__DEV__) { + warnInProduction(); + return; + } + var stats = getOperations(flushHistory); var table = stats.map(stat => ({ 'Owner > Node': stat.key, @@ -344,19 +403,34 @@ function getMeasurementsSummaryMap(measurements) { } function start() { + if (!__DEV__) { + warnInProduction(); + return; + } + ReactDebugTool.beginProfiling(); } function stop() { + if (!__DEV__) { + warnInProduction(); + return; + } + ReactDebugTool.endProfiling(); } function isRunning() { + if (!__DEV__) { + warnInProduction(); + return false; + } + return ReactDebugTool.isProfiling(); } var ReactPerfAnalysis = { - getLastMeasurements: getFlushHistory, + getLastMeasurements, getExclusive, getInclusive, getWasted, diff --git a/src/renderers/shared/__tests__/ReactPerf-test.js b/src/renderers/shared/__tests__/ReactPerf-test.js index 5fa4e3685c312..babd6a03a5125 100644 --- a/src/renderers/shared/__tests__/ReactPerf-test.js +++ b/src/renderers/shared/__tests__/ReactPerf-test.js @@ -445,4 +445,27 @@ describe('ReactPerf', function() { ReactPerf.stop(); expect(ReactPerf.isRunning()).toBe(false); }); + + it('should print console error only once', () => { + __DEV__ = false; + + spyOn(console, 'error'); + + expect(ReactPerf.getLastMeasurements()).toEqual([]); + expect(ReactPerf.getExclusive()).toEqual([]); + expect(ReactPerf.getInclusive()).toEqual([]); + expect(ReactPerf.getWasted()).toEqual([]); + expect(ReactPerf.getOperations()).toEqual([]); + expect(ReactPerf.printExclusive()).toEqual(undefined); + expect(ReactPerf.printInclusive()).toEqual(undefined); + expect(ReactPerf.printWasted()).toEqual(undefined); + expect(ReactPerf.printOperations()).toEqual(undefined); + expect(ReactPerf.start()).toBe(undefined); + expect(ReactPerf.stop()).toBe(undefined); + expect(ReactPerf.isRunning()).toBe(false); + + expect(console.error.calls.count()).toBe(1); + + __DEV__ = true; + }) });