ff93c4448c
Stacked on #33482. There's a flaw with getting information from the execution context of the ping. For the soft-deprecated "throw a promise" technique, this is a bit unreliable because you could in theory throw the same one multiple times. Similarly, a more fundamental flaw with that API is that it doesn't allow for tracking the information of Promises that are already synchronously able to resolve. This stops tracking the async debug info in the case of throwing a Promise and only when you render a Promise. That means some loss of data but we should just warn for throwing a Promise anyway. Instead, this also adds support for tracking `use()`d thenables and forwarding `_debugInfo` from then. This is done by extracting the info from the Promise after the fact instead of in the resolve so that it only happens once at the end after the pings are done. This also supports passing the same Promise in multiple places and tracking the debug info at each location, even if it was already instrumented with a synchronous value by the time of the second use.
2141 lines
55 KiB
JavaScript
2141 lines
55 KiB
JavaScript
'use strict';
|
|
|
|
const path = require('path');
|
|
|
|
import {patchSetImmediate} from '../../../../scripts/jest/patchSetImmediate';
|
|
|
|
let React;
|
|
let ReactServer;
|
|
let cache;
|
|
let ReactServerDOMServer;
|
|
let ReactServerDOMClient;
|
|
let Stream;
|
|
|
|
const streamOptions = {
|
|
objectMode: true,
|
|
};
|
|
|
|
const repoRoot = path.resolve(__dirname, '../../../../');
|
|
|
|
function normalizeStack(stack) {
|
|
if (!stack) {
|
|
return stack;
|
|
}
|
|
const copy = [];
|
|
for (let i = 0; i < stack.length; i++) {
|
|
const [name, file, line, col, enclosingLine, enclosingCol] = stack[i];
|
|
copy.push([
|
|
name,
|
|
file.replace(repoRoot, ''),
|
|
line,
|
|
col,
|
|
enclosingLine,
|
|
enclosingCol,
|
|
]);
|
|
}
|
|
return copy;
|
|
}
|
|
|
|
function normalizeIOInfo(ioInfo) {
|
|
const {debugTask, debugStack, ...copy} = ioInfo;
|
|
if (ioInfo.stack) {
|
|
copy.stack = normalizeStack(ioInfo.stack);
|
|
}
|
|
if (ioInfo.owner) {
|
|
copy.owner = normalizeDebugInfo(ioInfo.owner);
|
|
}
|
|
if (typeof ioInfo.start === 'number') {
|
|
copy.start = 0;
|
|
}
|
|
if (typeof ioInfo.end === 'number') {
|
|
copy.end = 0;
|
|
}
|
|
return copy;
|
|
}
|
|
|
|
function normalizeDebugInfo(debugInfo) {
|
|
if (Array.isArray(debugInfo.stack)) {
|
|
const {debugTask, debugStack, ...copy} = debugInfo;
|
|
copy.stack = normalizeStack(debugInfo.stack);
|
|
if (debugInfo.owner) {
|
|
copy.owner = normalizeDebugInfo(debugInfo.owner);
|
|
}
|
|
if (debugInfo.awaited) {
|
|
copy.awaited = normalizeIOInfo(copy.awaited);
|
|
}
|
|
if (debugInfo.props) {
|
|
copy.props = {};
|
|
}
|
|
return copy;
|
|
} else if (typeof debugInfo.time === 'number') {
|
|
return {...debugInfo, time: 0};
|
|
} else if (debugInfo.awaited) {
|
|
return {...debugInfo, awaited: normalizeIOInfo(debugInfo.awaited)};
|
|
} else {
|
|
return debugInfo;
|
|
}
|
|
}
|
|
|
|
function getDebugInfo(obj) {
|
|
const debugInfo = obj._debugInfo;
|
|
if (debugInfo) {
|
|
const copy = [];
|
|
for (let i = 0; i < debugInfo.length; i++) {
|
|
copy.push(normalizeDebugInfo(debugInfo[i]));
|
|
}
|
|
return copy;
|
|
}
|
|
return debugInfo;
|
|
}
|
|
|
|
function filterStackFrame(filename, functionName) {
|
|
return (
|
|
filename !== '' &&
|
|
!filename.startsWith('node:') &&
|
|
!filename.includes('node_modules') &&
|
|
// Filter out our own internal source code since it'll typically be in node_modules
|
|
(!filename.includes('/packages/') || filename.includes('/__tests__/')) &&
|
|
!filename.includes('/build/')
|
|
);
|
|
}
|
|
|
|
describe('ReactFlightAsyncDebugInfo', () => {
|
|
beforeEach(() => {
|
|
jest.resetModules();
|
|
jest.useRealTimers();
|
|
patchSetImmediate();
|
|
global.console = require('console');
|
|
|
|
jest.mock('react', () => require('react/react.react-server'));
|
|
jest.mock('react-server-dom-webpack/server', () =>
|
|
require('react-server-dom-webpack/server.node'),
|
|
);
|
|
ReactServer = require('react');
|
|
ReactServerDOMServer = require('react-server-dom-webpack/server');
|
|
cache = ReactServer.cache;
|
|
|
|
jest.resetModules();
|
|
jest.useRealTimers();
|
|
patchSetImmediate();
|
|
|
|
__unmockReact();
|
|
jest.unmock('react-server-dom-webpack/server');
|
|
jest.mock('react-server-dom-webpack/client', () =>
|
|
require('react-server-dom-webpack/client.node'),
|
|
);
|
|
|
|
React = require('react');
|
|
ReactServerDOMClient = require('react-server-dom-webpack/client');
|
|
Stream = require('stream');
|
|
});
|
|
|
|
function delay(timeout) {
|
|
return new Promise(resolve => {
|
|
setTimeout(resolve, timeout);
|
|
});
|
|
}
|
|
|
|
function fetchThirdParty(Component) {
|
|
const stream = ReactServerDOMServer.renderToPipeableStream(
|
|
<Component />,
|
|
{},
|
|
{
|
|
environmentName: 'third-party',
|
|
},
|
|
);
|
|
const readable = new Stream.PassThrough(streamOptions);
|
|
const result = ReactServerDOMClient.createFromNodeStream(readable, {
|
|
moduleMap: {},
|
|
moduleLoading: {},
|
|
});
|
|
stream.pipe(readable);
|
|
return result;
|
|
}
|
|
|
|
it('can track async information when awaited', async () => {
|
|
async function getData(text) {
|
|
await delay(1);
|
|
const promise = delay(2);
|
|
await Promise.all([promise]);
|
|
return text.toUpperCase();
|
|
}
|
|
|
|
async function Component() {
|
|
const result = await getData('hi');
|
|
const moreData = getData('seb');
|
|
return <InnerComponent text={result} promise={moreData} />;
|
|
}
|
|
|
|
async function InnerComponent({text, promise}) {
|
|
// This async function depends on the I/O in parent components but it should not
|
|
// include that I/O as part of its own meta data.
|
|
return text + ', ' + (await promise);
|
|
}
|
|
|
|
const stream = ReactServerDOMServer.renderToPipeableStream(<Component />);
|
|
|
|
const readable = new Stream.PassThrough(streamOptions);
|
|
|
|
const result = ReactServerDOMClient.createFromNodeStream(readable, {
|
|
moduleMap: {},
|
|
moduleLoading: {},
|
|
});
|
|
stream.pipe(readable);
|
|
|
|
expect(await result).toBe('HI, SEB');
|
|
if (
|
|
__DEV__ &&
|
|
gate(
|
|
flags =>
|
|
flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
|
|
)
|
|
) {
|
|
expect(getDebugInfo(result)).toMatchInlineSnapshot(`
|
|
[
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
175,
|
|
109,
|
|
155,
|
|
50,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"awaited": {
|
|
"end": 0,
|
|
"env": "Server",
|
|
"name": "delay",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
175,
|
|
109,
|
|
155,
|
|
50,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"delay",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
133,
|
|
12,
|
|
132,
|
|
3,
|
|
],
|
|
[
|
|
"getData",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
157,
|
|
13,
|
|
156,
|
|
5,
|
|
],
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
164,
|
|
26,
|
|
163,
|
|
5,
|
|
],
|
|
],
|
|
"start": 0,
|
|
},
|
|
"env": "Server",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
175,
|
|
109,
|
|
155,
|
|
50,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"getData",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
157,
|
|
13,
|
|
156,
|
|
5,
|
|
],
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
164,
|
|
26,
|
|
163,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"awaited": {
|
|
"end": 0,
|
|
"env": "Server",
|
|
"name": "delay",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
175,
|
|
109,
|
|
155,
|
|
50,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"delay",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
133,
|
|
12,
|
|
132,
|
|
3,
|
|
],
|
|
[
|
|
"getData",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
158,
|
|
21,
|
|
156,
|
|
5,
|
|
],
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
164,
|
|
20,
|
|
163,
|
|
5,
|
|
],
|
|
],
|
|
"start": 0,
|
|
},
|
|
"env": "Server",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
175,
|
|
109,
|
|
155,
|
|
50,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"getData",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
159,
|
|
21,
|
|
156,
|
|
5,
|
|
],
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
164,
|
|
20,
|
|
163,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "InnerComponent",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
166,
|
|
60,
|
|
163,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"awaited": {
|
|
"end": 0,
|
|
"env": "Server",
|
|
"name": "delay",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
175,
|
|
109,
|
|
155,
|
|
50,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"delay",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
133,
|
|
12,
|
|
132,
|
|
3,
|
|
],
|
|
[
|
|
"getData",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
158,
|
|
21,
|
|
156,
|
|
5,
|
|
],
|
|
],
|
|
"start": 0,
|
|
},
|
|
"env": "Server",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "InnerComponent",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
166,
|
|
60,
|
|
163,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"InnerComponent",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
172,
|
|
35,
|
|
169,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
]
|
|
`);
|
|
}
|
|
});
|
|
|
|
it('can track async information when use()d', async () => {
|
|
async function getData(text) {
|
|
await delay(1);
|
|
return text.toUpperCase();
|
|
}
|
|
|
|
function Component() {
|
|
const result = ReactServer.use(getData('hi'));
|
|
const moreData = getData('seb');
|
|
return <InnerComponent text={result} promise={moreData} />;
|
|
}
|
|
|
|
function InnerComponent({text, promise}) {
|
|
// This async function depends on the I/O in parent components but it should not
|
|
// include that I/O as part of its own meta data.
|
|
return text + ', ' + ReactServer.use(promise);
|
|
}
|
|
|
|
const stream = ReactServerDOMServer.renderToPipeableStream(
|
|
<Component />,
|
|
{},
|
|
{
|
|
filterStackFrame,
|
|
},
|
|
);
|
|
|
|
const readable = new Stream.PassThrough(streamOptions);
|
|
|
|
const result = ReactServerDOMClient.createFromNodeStream(readable, {
|
|
moduleMap: {},
|
|
moduleLoading: {},
|
|
});
|
|
stream.pipe(readable);
|
|
|
|
expect(await result).toBe('HI, SEB');
|
|
if (
|
|
__DEV__ &&
|
|
gate(
|
|
flags =>
|
|
flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
|
|
)
|
|
) {
|
|
expect(getDebugInfo(result)).toMatchInlineSnapshot(`
|
|
[
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
517,
|
|
40,
|
|
498,
|
|
49,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"awaited": {
|
|
"end": 0,
|
|
"env": "Server",
|
|
"name": "delay",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
517,
|
|
40,
|
|
498,
|
|
49,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"delay",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
133,
|
|
12,
|
|
132,
|
|
3,
|
|
],
|
|
[
|
|
"getData",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
500,
|
|
13,
|
|
499,
|
|
5,
|
|
],
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
505,
|
|
36,
|
|
504,
|
|
5,
|
|
],
|
|
],
|
|
"start": 0,
|
|
},
|
|
"env": "Server",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
517,
|
|
40,
|
|
498,
|
|
49,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"getData",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
500,
|
|
13,
|
|
499,
|
|
5,
|
|
],
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
505,
|
|
36,
|
|
504,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "InnerComponent",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
507,
|
|
60,
|
|
504,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"awaited": {
|
|
"end": 0,
|
|
"env": "Server",
|
|
"name": "delay",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
517,
|
|
40,
|
|
498,
|
|
49,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"delay",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
133,
|
|
12,
|
|
132,
|
|
3,
|
|
],
|
|
[
|
|
"getData",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
500,
|
|
13,
|
|
499,
|
|
5,
|
|
],
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
506,
|
|
22,
|
|
504,
|
|
5,
|
|
],
|
|
],
|
|
"start": 0,
|
|
},
|
|
"env": "Server",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "InnerComponent",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
507,
|
|
60,
|
|
504,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"InnerComponent",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
513,
|
|
40,
|
|
510,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
]
|
|
`);
|
|
}
|
|
});
|
|
|
|
it('can track the start of I/O when no native promise is used', async () => {
|
|
function Component() {
|
|
const callbacks = [];
|
|
setTimeout(function timer() {
|
|
callbacks.forEach(callback => callback('hi'));
|
|
}, 5);
|
|
return {
|
|
then(callback) {
|
|
callbacks.push(callback);
|
|
},
|
|
};
|
|
}
|
|
|
|
const stream = ReactServerDOMServer.renderToPipeableStream(<Component />);
|
|
|
|
const readable = new Stream.PassThrough(streamOptions);
|
|
|
|
const result = ReactServerDOMClient.createFromNodeStream(readable, {
|
|
moduleMap: {},
|
|
moduleLoading: {},
|
|
});
|
|
stream.pipe(readable);
|
|
|
|
expect(await result).toBe('hi');
|
|
if (
|
|
__DEV__ &&
|
|
gate(
|
|
flags =>
|
|
flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
|
|
)
|
|
) {
|
|
expect(getDebugInfo(result)).toMatchInlineSnapshot(`
|
|
[
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
772,
|
|
109,
|
|
759,
|
|
67,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"awaited": {
|
|
"end": 0,
|
|
"env": "Server",
|
|
"name": "setTimeout",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
772,
|
|
109,
|
|
759,
|
|
67,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
762,
|
|
7,
|
|
760,
|
|
5,
|
|
],
|
|
],
|
|
"start": 0,
|
|
},
|
|
"env": "Server",
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
]
|
|
`);
|
|
}
|
|
});
|
|
|
|
it('can ingores the start of I/O when immediately resolved non-native promise is awaited', async () => {
|
|
async function Component() {
|
|
return await {
|
|
then(callback) {
|
|
callback('hi');
|
|
},
|
|
};
|
|
}
|
|
|
|
const stream = ReactServerDOMServer.renderToPipeableStream(<Component />);
|
|
|
|
const readable = new Stream.PassThrough(streamOptions);
|
|
|
|
const result = ReactServerDOMClient.createFromNodeStream(readable, {
|
|
moduleMap: {},
|
|
moduleLoading: {},
|
|
});
|
|
stream.pipe(readable);
|
|
|
|
expect(await result).toBe('hi');
|
|
if (
|
|
__DEV__ &&
|
|
gate(
|
|
flags =>
|
|
flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
|
|
)
|
|
) {
|
|
expect(getDebugInfo(result)).toMatchInlineSnapshot(`
|
|
[
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
866,
|
|
109,
|
|
857,
|
|
94,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
]
|
|
`);
|
|
}
|
|
});
|
|
|
|
it('forwards debugInfo from awaited Promises', async () => {
|
|
async function Component() {
|
|
let resolve;
|
|
const promise = new Promise(r => (resolve = r));
|
|
promise._debugInfo = [
|
|
{time: performance.now()},
|
|
{
|
|
name: 'Virtual Component',
|
|
},
|
|
{time: performance.now()},
|
|
];
|
|
const promise2 = promise.then(value => value);
|
|
promise2._debugInfo = [
|
|
{time: performance.now()},
|
|
{
|
|
name: 'Virtual Component2',
|
|
},
|
|
{time: performance.now()},
|
|
];
|
|
resolve('hi');
|
|
const result = await promise2;
|
|
return result.toUpperCase();
|
|
}
|
|
|
|
const stream = ReactServerDOMServer.renderToPipeableStream(<Component />);
|
|
|
|
const readable = new Stream.PassThrough(streamOptions);
|
|
|
|
const result = ReactServerDOMClient.createFromNodeStream(readable, {
|
|
moduleMap: {},
|
|
moduleLoading: {},
|
|
});
|
|
stream.pipe(readable);
|
|
|
|
expect(await result).toBe('HI');
|
|
if (
|
|
__DEV__ &&
|
|
gate(
|
|
flags =>
|
|
flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
|
|
)
|
|
) {
|
|
expect(getDebugInfo(result)).toMatchInlineSnapshot(`
|
|
[
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
937,
|
|
109,
|
|
913,
|
|
50,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"name": "Virtual Component",
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"name": "Virtual Component2",
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
]
|
|
`);
|
|
}
|
|
});
|
|
|
|
it('forwards async debug info one environment to the next', async () => {
|
|
async function getData() {
|
|
await delay(1);
|
|
await delay(2);
|
|
return 'hi';
|
|
}
|
|
|
|
async function ThirdPartyComponent() {
|
|
const data = await getData();
|
|
return data;
|
|
}
|
|
|
|
async function Component() {
|
|
const data = await fetchThirdParty(ThirdPartyComponent);
|
|
return data.toUpperCase();
|
|
}
|
|
|
|
const stream = ReactServerDOMServer.renderToPipeableStream(<Component />);
|
|
|
|
const readable = new Stream.PassThrough(streamOptions);
|
|
|
|
const result = ReactServerDOMClient.createFromNodeStream(readable, {
|
|
moduleMap: {},
|
|
moduleLoading: {},
|
|
});
|
|
stream.pipe(readable);
|
|
|
|
expect(await result).toBe('HI');
|
|
if (
|
|
__DEV__ &&
|
|
gate(
|
|
flags =>
|
|
flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
|
|
)
|
|
) {
|
|
expect(getDebugInfo(result)).toMatchInlineSnapshot(`
|
|
[
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1019,
|
|
109,
|
|
1002,
|
|
63,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"env": "third-party",
|
|
"key": null,
|
|
"name": "ThirdPartyComponent",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"fetchThirdParty",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
140,
|
|
40,
|
|
138,
|
|
3,
|
|
],
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1015,
|
|
24,
|
|
1014,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"awaited": {
|
|
"end": 0,
|
|
"env": "third-party",
|
|
"name": "delay",
|
|
"owner": {
|
|
"env": "third-party",
|
|
"key": null,
|
|
"name": "ThirdPartyComponent",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"fetchThirdParty",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
140,
|
|
40,
|
|
138,
|
|
3,
|
|
],
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1015,
|
|
24,
|
|
1014,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"delay",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
133,
|
|
12,
|
|
132,
|
|
3,
|
|
],
|
|
[
|
|
"getData",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1004,
|
|
13,
|
|
1003,
|
|
5,
|
|
],
|
|
[
|
|
"ThirdPartyComponent",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1010,
|
|
24,
|
|
1009,
|
|
5,
|
|
],
|
|
],
|
|
"start": 0,
|
|
},
|
|
"env": "third-party",
|
|
"owner": {
|
|
"env": "third-party",
|
|
"key": null,
|
|
"name": "ThirdPartyComponent",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"fetchThirdParty",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
140,
|
|
40,
|
|
138,
|
|
3,
|
|
],
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1015,
|
|
24,
|
|
1014,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"getData",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1004,
|
|
13,
|
|
1003,
|
|
5,
|
|
],
|
|
[
|
|
"ThirdPartyComponent",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1010,
|
|
24,
|
|
1009,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"awaited": {
|
|
"end": 0,
|
|
"env": "third-party",
|
|
"name": "delay",
|
|
"owner": {
|
|
"env": "third-party",
|
|
"key": null,
|
|
"name": "ThirdPartyComponent",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"fetchThirdParty",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
140,
|
|
40,
|
|
138,
|
|
3,
|
|
],
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1015,
|
|
24,
|
|
1014,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"delay",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
133,
|
|
12,
|
|
132,
|
|
3,
|
|
],
|
|
[
|
|
"getData",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1005,
|
|
13,
|
|
1003,
|
|
5,
|
|
],
|
|
[
|
|
"ThirdPartyComponent",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1010,
|
|
18,
|
|
1009,
|
|
5,
|
|
],
|
|
],
|
|
"start": 0,
|
|
},
|
|
"env": "third-party",
|
|
"owner": {
|
|
"env": "third-party",
|
|
"key": null,
|
|
"name": "ThirdPartyComponent",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"fetchThirdParty",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
140,
|
|
40,
|
|
138,
|
|
3,
|
|
],
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1015,
|
|
24,
|
|
1014,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"getData",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1005,
|
|
13,
|
|
1003,
|
|
5,
|
|
],
|
|
[
|
|
"ThirdPartyComponent",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1010,
|
|
18,
|
|
1009,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
]
|
|
`);
|
|
}
|
|
});
|
|
|
|
it('can track cached entries awaited in later components', async () => {
|
|
const getData = cache(async function getData(text) {
|
|
await delay(1);
|
|
return text.toUpperCase();
|
|
});
|
|
|
|
async function Child() {
|
|
const greeting = await getData('hi');
|
|
return greeting + ', Seb';
|
|
}
|
|
|
|
async function Component() {
|
|
await getData('hi');
|
|
return <Child />;
|
|
}
|
|
|
|
const stream = ReactServerDOMServer.renderToPipeableStream(
|
|
<Component />,
|
|
{},
|
|
{
|
|
filterStackFrame,
|
|
},
|
|
);
|
|
|
|
const readable = new Stream.PassThrough(streamOptions);
|
|
|
|
const result = ReactServerDOMClient.createFromNodeStream(readable, {
|
|
moduleMap: {},
|
|
moduleLoading: {},
|
|
});
|
|
stream.pipe(readable);
|
|
|
|
expect(await result).toBe('HI, Seb');
|
|
if (
|
|
__DEV__ &&
|
|
gate(
|
|
flags =>
|
|
flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
|
|
)
|
|
) {
|
|
expect(getDebugInfo(result)).toMatchInlineSnapshot(`
|
|
[
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1327,
|
|
40,
|
|
1310,
|
|
62,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"awaited": {
|
|
"end": 0,
|
|
"env": "Server",
|
|
"name": "delay",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1327,
|
|
40,
|
|
1310,
|
|
62,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"delay",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
133,
|
|
12,
|
|
132,
|
|
3,
|
|
],
|
|
[
|
|
"getData",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1312,
|
|
13,
|
|
1311,
|
|
25,
|
|
],
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1322,
|
|
13,
|
|
1321,
|
|
5,
|
|
],
|
|
],
|
|
"start": 0,
|
|
},
|
|
"env": "Server",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1327,
|
|
40,
|
|
1310,
|
|
62,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"getData",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1312,
|
|
13,
|
|
1311,
|
|
25,
|
|
],
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1322,
|
|
13,
|
|
1321,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Child",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1323,
|
|
60,
|
|
1321,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"awaited": {
|
|
"end": 0,
|
|
"env": "Server",
|
|
"name": "delay",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1327,
|
|
40,
|
|
1310,
|
|
62,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"delay",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
133,
|
|
12,
|
|
132,
|
|
3,
|
|
],
|
|
[
|
|
"getData",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1312,
|
|
13,
|
|
1311,
|
|
25,
|
|
],
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1322,
|
|
13,
|
|
1321,
|
|
5,
|
|
],
|
|
],
|
|
"start": 0,
|
|
},
|
|
"env": "Server",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Child",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1323,
|
|
60,
|
|
1321,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"Child",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1317,
|
|
28,
|
|
1316,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
]
|
|
`);
|
|
}
|
|
});
|
|
|
|
it('can track cached entries used in child position', async () => {
|
|
const getData = cache(async function getData(text) {
|
|
await delay(1);
|
|
return text.toUpperCase();
|
|
});
|
|
|
|
function Child() {
|
|
return getData('hi');
|
|
}
|
|
|
|
function Component() {
|
|
ReactServer.use(getData('hi'));
|
|
return <Child />;
|
|
}
|
|
|
|
const stream = ReactServerDOMServer.renderToPipeableStream(
|
|
<Component />,
|
|
{},
|
|
{
|
|
filterStackFrame,
|
|
},
|
|
);
|
|
|
|
const readable = new Stream.PassThrough(streamOptions);
|
|
|
|
const result = ReactServerDOMClient.createFromNodeStream(readable, {
|
|
moduleMap: {},
|
|
moduleLoading: {},
|
|
});
|
|
stream.pipe(readable);
|
|
|
|
expect(await result).toBe('HI');
|
|
if (
|
|
__DEV__ &&
|
|
gate(
|
|
flags =>
|
|
flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
|
|
)
|
|
) {
|
|
expect(getDebugInfo(result)).toMatchInlineSnapshot(`
|
|
[
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1588,
|
|
40,
|
|
1572,
|
|
57,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"awaited": {
|
|
"end": 0,
|
|
"env": "Server",
|
|
"name": "delay",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1588,
|
|
40,
|
|
1572,
|
|
57,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"delay",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
133,
|
|
12,
|
|
132,
|
|
3,
|
|
],
|
|
[
|
|
"getData",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1574,
|
|
13,
|
|
1573,
|
|
25,
|
|
],
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1583,
|
|
23,
|
|
1582,
|
|
5,
|
|
],
|
|
],
|
|
"start": 0,
|
|
},
|
|
"env": "Server",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1588,
|
|
40,
|
|
1572,
|
|
57,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"getData",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1574,
|
|
13,
|
|
1573,
|
|
25,
|
|
],
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1583,
|
|
23,
|
|
1582,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Child",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1584,
|
|
60,
|
|
1582,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"awaited": {
|
|
"end": 0,
|
|
"env": "Server",
|
|
"name": "delay",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Component",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1588,
|
|
40,
|
|
1572,
|
|
57,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"delay",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
133,
|
|
12,
|
|
132,
|
|
3,
|
|
],
|
|
[
|
|
"getData",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1574,
|
|
13,
|
|
1573,
|
|
25,
|
|
],
|
|
[
|
|
"Component",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1583,
|
|
23,
|
|
1582,
|
|
5,
|
|
],
|
|
],
|
|
"start": 0,
|
|
},
|
|
"env": "Server",
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
]
|
|
`);
|
|
}
|
|
});
|
|
|
|
it('can track implicit returned promises that are blocked by previous data', async () => {
|
|
async function delayTwice() {
|
|
await delay('', 20);
|
|
await delay('', 10);
|
|
}
|
|
|
|
async function delayTrice() {
|
|
const p = delayTwice();
|
|
await delay('', 40);
|
|
return p;
|
|
}
|
|
|
|
async function Bar({children}) {
|
|
await delayTrice();
|
|
return 'hi';
|
|
}
|
|
|
|
const stream = ReactServerDOMServer.renderToPipeableStream(
|
|
<Bar />,
|
|
{},
|
|
{
|
|
filterStackFrame,
|
|
},
|
|
);
|
|
|
|
const readable = new Stream.PassThrough(streamOptions);
|
|
|
|
const result = ReactServerDOMClient.createFromNodeStream(readable, {
|
|
moduleMap: {},
|
|
moduleLoading: {},
|
|
});
|
|
stream.pipe(readable);
|
|
|
|
expect(await result).toBe('hi');
|
|
if (
|
|
__DEV__ &&
|
|
gate(
|
|
flags =>
|
|
flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
|
|
)
|
|
) {
|
|
expect(getDebugInfo(result)).toMatchInlineSnapshot(`
|
|
[
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Bar",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1822,
|
|
40,
|
|
1804,
|
|
80,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"awaited": {
|
|
"end": 0,
|
|
"env": "Server",
|
|
"name": "delay",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Bar",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1822,
|
|
40,
|
|
1804,
|
|
80,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"delay",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
133,
|
|
12,
|
|
132,
|
|
3,
|
|
],
|
|
[
|
|
"delayTrice",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1812,
|
|
13,
|
|
1810,
|
|
5,
|
|
],
|
|
[
|
|
"Bar",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1817,
|
|
13,
|
|
1816,
|
|
5,
|
|
],
|
|
],
|
|
"start": 0,
|
|
},
|
|
"env": "Server",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Bar",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1822,
|
|
40,
|
|
1804,
|
|
80,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"delayTrice",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1812,
|
|
13,
|
|
1810,
|
|
5,
|
|
],
|
|
[
|
|
"Bar",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1817,
|
|
13,
|
|
1816,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"awaited": {
|
|
"end": 0,
|
|
"env": "Server",
|
|
"name": "delay",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Bar",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1822,
|
|
40,
|
|
1804,
|
|
80,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"delay",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
133,
|
|
12,
|
|
132,
|
|
3,
|
|
],
|
|
[
|
|
"delayTwice",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1806,
|
|
13,
|
|
1805,
|
|
5,
|
|
],
|
|
[
|
|
"delayTrice",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1811,
|
|
15,
|
|
1810,
|
|
5,
|
|
],
|
|
[
|
|
"Bar",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1817,
|
|
13,
|
|
1816,
|
|
5,
|
|
],
|
|
],
|
|
"start": 0,
|
|
},
|
|
"env": "Server",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Bar",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1822,
|
|
40,
|
|
1804,
|
|
80,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"delayTwice",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1806,
|
|
13,
|
|
1805,
|
|
5,
|
|
],
|
|
[
|
|
"delayTrice",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1811,
|
|
15,
|
|
1810,
|
|
5,
|
|
],
|
|
[
|
|
"Bar",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1817,
|
|
13,
|
|
1816,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"awaited": {
|
|
"end": 0,
|
|
"env": "Server",
|
|
"name": "delay",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Bar",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1822,
|
|
40,
|
|
1804,
|
|
80,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"delay",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
133,
|
|
12,
|
|
132,
|
|
3,
|
|
],
|
|
[
|
|
"delayTwice",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1807,
|
|
13,
|
|
1805,
|
|
5,
|
|
],
|
|
],
|
|
"start": 0,
|
|
},
|
|
"env": "Server",
|
|
"owner": {
|
|
"env": "Server",
|
|
"key": null,
|
|
"name": "Bar",
|
|
"props": {},
|
|
"stack": [
|
|
[
|
|
"Object.<anonymous>",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1822,
|
|
40,
|
|
1804,
|
|
80,
|
|
],
|
|
],
|
|
},
|
|
"stack": [
|
|
[
|
|
"delayTwice",
|
|
"/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
|
|
1807,
|
|
13,
|
|
1805,
|
|
5,
|
|
],
|
|
],
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
{
|
|
"time": 0,
|
|
},
|
|
]
|
|
`);
|
|
}
|
|
});
|
|
});
|