mirror of
https://github.com/zebrajr/react.git
synced 2025-12-06 12:20:20 +01:00
151cce3740
This is the first step to experimenting with a new type of stack traces behind the `enableOwnerStacks` flag - in DEV only. The idea is to generate stacks that are more like if the JSX was a direct call even though it's actually a lazy call. Not only can you see which exact JSX call line number generated the erroring component but if that's inside an abstraction function, which function called that function and if it's a component, which component generated that component. For this to make sense it really need to be the "owner" stack rather than the parent stack like we do for other component stacks. On one hand it has more precise information but on the other hand it also loses context. For most types of problems the owner stack is the most useful though since it tells you which component rendered this component. The problem with the platform in its current state is that there's two ways to deal with stacks: 1) `new Error().stack` 2) `console.createTask()` The nice thing about `new Error().stack` is that we can extract the frames and piece them together in whatever way we want. That is great for constructing custom UIs like error dialogs. Unfortunately, we can't take custom stacks and set them in the native UIs like Chrome DevTools. The nice thing about `console.createTask()` is that the resulting stacks are natively integrated into the Chrome DevTools in the console and the breakpoint debugger. They also automatically follow source mapping and ignoreLists. The downside is that there's no way to extract the async stack outside the native UI itself so this information cannot be used for custom UIs like errors dialogs. It also means we can't collect this on the server and then pass it to the client for server components. The solution here is that we use both techniques and collect both an `Error` object and a `Task` object for every JSX call. The main concern about this approach is the performance so that's the main thing to test. It's certainly too slow for production but it might also be too slow even for DEV. This first PR doesn't actually use the stacks yet. It just collects them as the first step. The next step is to start utilizing this information in error printing etc. For RSC we pass the stack along across over the wire. This can be concatenated on the client following the owner path to create an owner stack leading back into the server. We'll later use this information to restore fake frames on the client for native integration. Since this information quickly gets pretty heavy if we include all frames, we strip out the top frame. We also strip out everything below the functions that call into user space in the Flight runtime. To do this we need to figure out the frames that represents calling out into user space. The resulting stack is typically just the one frame inside the owner component's JSX callsite. I also eagerly strip out things we expect to be ignoreList:ed anyway - such as `node_modules` and Node.js internals.
277 lines
10 KiB
JavaScript
277 lines
10 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 strict
|
|
*/
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Land or remove (zero effort)
|
|
//
|
|
// Flags that can likely be deleted or landed without consequences
|
|
// -----------------------------------------------------------------------------
|
|
|
|
export const enableComponentStackLocations = true;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Killswitch
|
|
//
|
|
// Flags that exist solely to turn off a change in case it causes a regression
|
|
// when it rolls out to prod. We should remove these as soon as possible.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Land or remove (moderate effort)
|
|
//
|
|
// Flags that can be probably deleted or landed, but might require extra effort
|
|
// like migrating internal callers or performance testing.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// TODO: Finish rolling out in www
|
|
export const favorSafetyOverHydrationPerf = true;
|
|
export const enableAsyncActions = true;
|
|
|
|
// Need to remove didTimeout argument from Scheduler before landing
|
|
export const disableSchedulerTimeoutInWorkLoop = false;
|
|
|
|
// This will break some internal tests at Meta so we need to gate this until
|
|
// those can be fixed.
|
|
export const enableDeferRootSchedulingToMicrotask = true;
|
|
|
|
// TODO: Land at Meta before removing.
|
|
export const disableDefaultPropsExceptForClasses = true;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Slated for removal in the future (significant effort)
|
|
//
|
|
// These are experiments that didn't work out, and never shipped, but we can't
|
|
// delete from the codebase until we migrate internal callers.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// Add a callback property to suspense to notify which promises are currently
|
|
// in the update queue. This allows reporting and tracing of what is causing
|
|
// the user to see a loading state.
|
|
//
|
|
// Also allows hydration callbacks to fire when a dehydrated boundary gets
|
|
// hydrated or deleted.
|
|
//
|
|
// This will eventually be replaced by the Transition Tracing proposal.
|
|
export const enableSuspenseCallback = false;
|
|
|
|
// Experimental Scope support.
|
|
export const enableScopeAPI = false;
|
|
|
|
// Experimental Create Event Handle API.
|
|
export const enableCreateEventHandleAPI = false;
|
|
|
|
// Support legacy Primer support on internal FB www
|
|
export const enableLegacyFBSupport = false;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Ongoing experiments
|
|
//
|
|
// These are features that we're either actively exploring or are reasonably
|
|
// likely to include in an upcoming release.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
export const enableCache = true;
|
|
export const enableLegacyCache = __EXPERIMENTAL__;
|
|
|
|
export const enableBinaryFlight = __EXPERIMENTAL__;
|
|
export const enableFlightReadableStream = __EXPERIMENTAL__;
|
|
export const enableAsyncIterableChildren = __EXPERIMENTAL__;
|
|
|
|
export const enableTaint = __EXPERIMENTAL__;
|
|
|
|
export const enablePostpone = __EXPERIMENTAL__;
|
|
|
|
export const enableTransitionTracing = false;
|
|
|
|
// No known bugs, but needs performance testing
|
|
export const enableLazyContextPropagation = false;
|
|
|
|
// FB-only usage. The new API has different semantics.
|
|
export const enableLegacyHidden = false;
|
|
|
|
// Enables unstable_avoidThisFallback feature in Fiber
|
|
export const enableSuspenseAvoidThisFallback = false;
|
|
// Enables unstable_avoidThisFallback feature in Fizz
|
|
export const enableSuspenseAvoidThisFallbackFizz = false;
|
|
|
|
export const enableCPUSuspense = __EXPERIMENTAL__;
|
|
|
|
// Enables useMemoCache hook, intended as a compilation target for
|
|
// auto-memoization.
|
|
export const enableUseMemoCacheHook = true;
|
|
// Test this at Meta before enabling.
|
|
export const enableNoCloningMemoCache = false;
|
|
|
|
export const enableUseEffectEventHook = __EXPERIMENTAL__;
|
|
|
|
// Test in www before enabling in open source.
|
|
// Enables DOM-server to stream its instruction set as data-attributes
|
|
// (handled with an MutationObserver) instead of inline-scripts
|
|
export const enableFizzExternalRuntime = __EXPERIMENTAL__;
|
|
|
|
export const alwaysThrottleRetries = true;
|
|
|
|
export const passChildrenWhenCloningPersistedNodes = false;
|
|
|
|
export const enableServerComponentLogs = __EXPERIMENTAL__;
|
|
|
|
export const enableEarlyReturnForPropDiffing = false;
|
|
|
|
export const enableAddPropertiesFastPath = false;
|
|
|
|
export const enableOwnerStacks = __EXPERIMENTAL__;
|
|
|
|
/**
|
|
* Enables an expiration time for retry lanes to avoid starvation.
|
|
*/
|
|
export const enableRetryLaneExpiration = false;
|
|
export const retryLaneExpirationMs = 5000;
|
|
export const syncLaneExpirationMs = 250;
|
|
export const transitionLaneExpirationMs = 5000;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Ready for next major.
|
|
//
|
|
// Alias __NEXT_MAJOR__ to __EXPERIMENTAL__ for easier skimming.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// TODO: Anything that's set to `true` in this section should either be cleaned
|
|
// up (if it's on everywhere, including Meta and RN builds) or moved to a
|
|
// different section of this file.
|
|
|
|
// const __NEXT_MAJOR__ = __EXPERIMENTAL__;
|
|
|
|
// Renames the internal symbol for elements since they have changed signature/constructor
|
|
export const renameElementSymbol = true;
|
|
|
|
// Removes legacy style context
|
|
export const disableLegacyContext = true;
|
|
|
|
// Not ready to break experimental yet.
|
|
// Modern <StrictMode /> behaviour aligns more with what components
|
|
// components will encounter in production, especially when used With <Offscreen />.
|
|
// TODO: clean up legacy <StrictMode /> once tests pass WWW.
|
|
export const useModernStrictMode = true;
|
|
|
|
// Not ready to break experimental yet.
|
|
// Remove IE and MsApp specific workarounds for innerHTML
|
|
export const disableIEWorkarounds = true;
|
|
|
|
// Filter certain DOM attributes (e.g. src, href) if their values are empty
|
|
// strings. This prevents e.g. <img src=""> from making an unnecessary HTTP
|
|
// request for certain browsers.
|
|
export const enableFilterEmptyStringAttributesDOM = true;
|
|
|
|
// Disabled caching behavior of `react/cache` in client runtimes.
|
|
export const disableClientCache = true;
|
|
|
|
/**
|
|
* Enables a new error detection for infinite render loops from updates caused
|
|
* by setState or similar outside of the component owning the state.
|
|
*/
|
|
export const enableInfiniteRenderLoopDetection = true;
|
|
|
|
// Subtle breaking changes to JSX runtime to make it faster, like passing `ref`
|
|
// as a normal prop instead of stripping it from the props object.
|
|
|
|
// Passes `ref` as a normal prop instead of stripping it from the props object
|
|
// during element creation.
|
|
export const enableRefAsProp = true;
|
|
export const disableStringRefs = true;
|
|
export const enableFastJSX = true;
|
|
|
|
// Warn on any usage of ReactTestRenderer
|
|
export const enableReactTestRendererWarning = true;
|
|
|
|
// Disables legacy mode
|
|
// This allows us to land breaking changes to remove legacy mode APIs in experimental builds
|
|
// before removing them in stable in the next Major
|
|
export const disableLegacyMode = true;
|
|
|
|
export const disableDOMTestUtils = true;
|
|
|
|
// Make <Context> equivalent to <Context.Provider> instead of <Context.Consumer>
|
|
export const enableRenderableContext = true;
|
|
|
|
// Enables the `initialValue` option for `useDeferredValue`
|
|
export const enableUseDeferredValueInitialArg = true;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Chopping Block
|
|
//
|
|
// Planned feature deprecations and breaking changes. Sorted roughly in order of
|
|
// when we plan to enable them.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// Enables time slicing for updates that aren't wrapped in startTransition.
|
|
export const forceConcurrentByDefaultForTesting = false;
|
|
|
|
export const enableUnifiedSyncLane = true;
|
|
|
|
// Adds an opt-in to time slicing for updates that aren't wrapped in startTransition.
|
|
export const allowConcurrentByDefault = false;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// React DOM Chopping Block
|
|
//
|
|
// Similar to main Chopping Block but only flags related to React DOM. These are
|
|
// grouped because we will likely batch all of them into a single major release.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// Disable support for comment nodes as React DOM containers. Already disabled
|
|
// in open source, but www codebase still relies on it. Need to remove.
|
|
export const disableCommentsAsDOMContainers = true;
|
|
|
|
export const enableTrustedTypesIntegration = false;
|
|
|
|
// Prevent the value and checked attributes from syncing with their related
|
|
// DOM properties
|
|
export const disableInputAttributeSyncing = false;
|
|
|
|
// Disables children for <textarea> elements
|
|
export const disableTextareaChildren = false;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Debugging and DevTools
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// Adds user timing marks for e.g. state updates, suspense, and work loop stuff,
|
|
// for an experimental timeline tool.
|
|
export const enableSchedulingProfiler = __PROFILE__;
|
|
|
|
// Helps identify side effects in render-phase lifecycle hooks and setState
|
|
// reducers by double invoking them in StrictLegacyMode.
|
|
export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;
|
|
|
|
// Gather advanced timing metrics for Profiler subtrees.
|
|
export const enableProfilerTimer = __PROFILE__;
|
|
|
|
// Record durations for commit and passive effects phases.
|
|
export const enableProfilerCommitHooks = __PROFILE__;
|
|
|
|
// Phase param passed to onRender callback differentiates between an "update" and a "cascading-update".
|
|
export const enableProfilerNestedUpdatePhase = __PROFILE__;
|
|
|
|
// Adds verbose console logging for e.g. state updates, suspense, and work loop
|
|
// stuff. Intended to enable React core members to more easily debug scheduling
|
|
// issues in DEV builds.
|
|
export const enableDebugTracing = false;
|
|
|
|
export const enableAsyncDebugInfo = __EXPERIMENTAL__;
|
|
|
|
// Track which Fiber(s) schedule render work.
|
|
export const enableUpdaterTracking = __PROFILE__;
|
|
|
|
// Internal only.
|
|
export const enableGetInspectorDataForInstanceInProduction = false;
|
|
|
|
export const consoleManagedByDevToolsDuringStrictMode = true;
|
|
|
|
export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
|