mirror of
https://github.com/zebrajr/react.git
synced 2025-12-07 00:20:28 +01:00
When developing in an RSC environment, you should be able to work in a single environment as if it was a unified environment. With thrown errors we already serialize them and then rethrow them on the client. Since by default we log them via onError both in Flight and Fizz, you can get the same log in the RSC runtime, the SSR runtime and on the client. With console logs made in SSR renders, you typically replay the same code during hydration on the client. So for example warnings already show up both in the SSR logs and on the client (although not guaranteed to be the same). You could just spend your time in the client and you'd be fine. Previously, RSC logs would not be replayed because they don't hydrate. So it's easy to miss warnings for example. With this approach, we replay RSC logs both during SSR so they end up in the SSR logs and on the client. That way you can just stay in the browser window during normal development cycles. You shouldn't have to care if your component is a server or client component when working on logical things or iterating on a product. With this change, you probably should mostly ignore the Flight log stream and just look at the client or maybe the SSR one. Unless you're digging into something specific. In particular if you just naively run both Flight and Fizz in the same terminal you get duplicates. I like to run out fixtures `yarn dev:region` and `yarn dev:global` in two separate terminals. Console logs may contain complex objects which can be inspected. Ideally a DevTools inspector could reach into the RSC server and remotely inspect objects using the remote inspection protocol. That way complex objects can be loaded on demand as you expand into them. However, that is a complex environment to set up and the server might not even be alive anymore by the time you inspect the objects. Therefore, I do a best effort to serialize the objects using the RSC protocol but limit the depth that can be rendered. This feature is only own in dev mode since it can be expensive. In a follow up, I'll give the logs a special styling treatment to clearly differentiate them from logs coming from the client. As well as deal with stacks.
340 lines
8.5 KiB
JavaScript
340 lines
8.5 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
|
|
*/
|
|
|
|
/* eslint-disable */
|
|
|
|
declare var __PROFILE__: boolean;
|
|
declare var __UMD__: boolean;
|
|
declare var __EXPERIMENTAL__: boolean;
|
|
declare var __VARIANT__: boolean;
|
|
|
|
declare var __REACT_DEVTOOLS_GLOBAL_HOOK__: any; /*?{
|
|
inject: ?((stuff: Object) => void)
|
|
};*/
|
|
|
|
declare var globalThis: Object;
|
|
|
|
declare var queueMicrotask: (fn: Function) => void;
|
|
declare var reportError: (error: mixed) => void;
|
|
declare var AggregateError: Class<Error>;
|
|
|
|
declare var FinalizationRegistry: any;
|
|
|
|
declare module 'create-react-class' {
|
|
declare var exports: React$CreateClass;
|
|
}
|
|
|
|
// Flow hides the props of React$Element, this overrides it to unhide
|
|
// them for React internals.
|
|
// prettier-ignore
|
|
declare opaque type React$Element<
|
|
+ElementType: React$ElementType,
|
|
+P = React$ElementProps<ElementType>,
|
|
>: {
|
|
+type: ElementType,
|
|
+props: P,
|
|
+key: React$Key | null,
|
|
+ref: any,
|
|
};
|
|
|
|
declare var trustedTypes: {
|
|
isHTML: (value: any) => boolean,
|
|
isScript: (value: any) => boolean,
|
|
isScriptURL: (value: any) => boolean,
|
|
// TrustedURLs are deprecated and will be removed soon: https://github.com/WICG/trusted-types/pull/204
|
|
isURL?: (value: any) => boolean,
|
|
};
|
|
|
|
// ReactFeatureFlags www fork
|
|
declare module 'ReactFeatureFlags' {
|
|
declare module.exports: any;
|
|
}
|
|
|
|
// ReactFiberErrorDialog www fork
|
|
declare module 'ReactFiberErrorDialog' {
|
|
declare module.exports: {showErrorDialog: (error: mixed) => boolean, ...};
|
|
}
|
|
|
|
// EventListener www fork
|
|
declare module 'EventListener' {
|
|
declare module.exports: {
|
|
listen: (
|
|
target: EventTarget,
|
|
type: string,
|
|
callback: Function,
|
|
priority?: number,
|
|
options?: {passive: boolean, ...},
|
|
) => mixed,
|
|
capture: (target: EventTarget, type: string, callback: Function) => mixed,
|
|
captureWithPassiveFlag: (
|
|
target: EventTarget,
|
|
type: string,
|
|
callback: Function,
|
|
passive: boolean,
|
|
) => mixed,
|
|
bubbleWithPassiveFlag: (
|
|
target: EventTarget,
|
|
type: string,
|
|
callback: Function,
|
|
passive: boolean,
|
|
) => mixed,
|
|
...
|
|
};
|
|
}
|
|
|
|
declare function __webpack_chunk_load__(id: string): Promise<mixed>;
|
|
declare var __webpack_require__: ((id: string) => any) & {
|
|
u: string => string,
|
|
};
|
|
|
|
declare function __turbopack_load__(id: string): Promise<mixed>;
|
|
declare var __turbopack_require__: ((id: string) => any) & {
|
|
u: string => string,
|
|
};
|
|
|
|
declare module 'fs/promises' {
|
|
declare var access: (path: string, mode?: number) => Promise<void>;
|
|
declare var lstat: (
|
|
path: string,
|
|
options?: ?{bigint?: boolean},
|
|
) => Promise<mixed>;
|
|
declare var readdir: (
|
|
path: string,
|
|
options?:
|
|
| ?string
|
|
| {
|
|
encoding?: ?string,
|
|
withFileTypes?: ?boolean,
|
|
},
|
|
) => Promise<Buffer>;
|
|
declare var readFile: (
|
|
path: string,
|
|
options?:
|
|
| ?string
|
|
| {
|
|
encoding?: ?string,
|
|
},
|
|
) => Promise<Buffer>;
|
|
declare var readlink: (
|
|
path: string,
|
|
options?:
|
|
| ?string
|
|
| {
|
|
encoding?: ?string,
|
|
},
|
|
) => Promise<mixed>;
|
|
declare var realpath: (
|
|
path: string,
|
|
options?:
|
|
| ?string
|
|
| {
|
|
encoding?: ?string,
|
|
},
|
|
) => Promise<mixed>;
|
|
declare var stat: (
|
|
path: string,
|
|
options?: ?{bigint?: boolean},
|
|
) => Promise<mixed>;
|
|
}
|
|
declare module 'pg' {
|
|
declare var Pool: (options: mixed) => {
|
|
query: (query: string, values?: Array<mixed>) => void,
|
|
};
|
|
}
|
|
|
|
declare module 'util' {
|
|
declare function debuglog(section: string): (data: any, ...args: any) => void;
|
|
declare function format(format: string, ...placeholders: any): string;
|
|
declare function log(string: string): void;
|
|
declare function inspect(object: any, options?: util$InspectOptions): string;
|
|
declare function isArray(object: any): boolean;
|
|
declare function isRegExp(object: any): boolean;
|
|
declare function isDate(object: any): boolean;
|
|
declare function isError(object: any): boolean;
|
|
declare function inherits(
|
|
constructor: Function,
|
|
superConstructor: Function,
|
|
): void;
|
|
declare function deprecate(f: Function, string: string): Function;
|
|
declare function promisify(f: Function): Function;
|
|
declare function callbackify(f: Function): Function;
|
|
declare class TextDecoder {
|
|
constructor(
|
|
encoding?: string,
|
|
options?: {
|
|
fatal?: boolean,
|
|
ignoreBOM?: boolean,
|
|
...
|
|
},
|
|
): void;
|
|
decode(
|
|
input?: ArrayBuffer | DataView | $TypedArray,
|
|
options?: {stream?: boolean, ...},
|
|
): string;
|
|
encoding: string;
|
|
fatal: boolean;
|
|
ignoreBOM: boolean;
|
|
}
|
|
declare class TextEncoder {
|
|
constructor(encoding?: string): TextEncoder;
|
|
encode(buffer: string): Uint8Array;
|
|
encodeInto(
|
|
buffer: string,
|
|
dest: Uint8Array,
|
|
): {read: number, written: number};
|
|
encoding: string;
|
|
}
|
|
}
|
|
|
|
declare module 'busboy' {
|
|
import type {Writable, Readable} from 'stream';
|
|
|
|
declare interface Info {
|
|
encoding: string;
|
|
mimeType: string;
|
|
}
|
|
|
|
declare interface FileInfo extends Info {
|
|
filename: string;
|
|
}
|
|
|
|
declare interface FieldInfo extends Info {
|
|
nameTruncated: boolean;
|
|
valueTruncated: boolean;
|
|
}
|
|
|
|
declare interface BusboyEvents {
|
|
file: (name: string, stream: Readable, info: FileInfo) => void;
|
|
field: (name: string, value: string, info: FieldInfo) => void;
|
|
partsLimit: () => void;
|
|
filesLimit: () => void;
|
|
fieldsLimit: () => void;
|
|
error: (error: mixed) => void;
|
|
close: () => void;
|
|
}
|
|
declare interface Busboy extends Writable {
|
|
addListener<Event: $Keys<BusboyEvents>>(
|
|
event: Event,
|
|
listener: BusboyEvents[Event],
|
|
): Busboy;
|
|
addListener(
|
|
event: string | symbol,
|
|
listener: (...args: any[]) => void,
|
|
): Busboy;
|
|
|
|
on<Event: $Keys<BusboyEvents>>(
|
|
event: Event,
|
|
listener: BusboyEvents[Event],
|
|
): Busboy;
|
|
on(event: string | symbol, listener: (...args: any[]) => void): Busboy;
|
|
|
|
once<Event: $Keys<BusboyEvents>>(
|
|
event: Event,
|
|
listener: BusboyEvents[Event],
|
|
): Busboy;
|
|
once(event: string | symbol, listener: (...args: any[]) => void): Busboy;
|
|
|
|
removeListener<Event: $Keys<BusboyEvents>>(
|
|
event: Event,
|
|
listener: BusboyEvents[Event],
|
|
): Busboy;
|
|
removeListener(
|
|
event: string | symbol,
|
|
listener: (...args: any[]) => void,
|
|
): Busboy;
|
|
|
|
off<Event: $Keys<BusboyEvents>>(
|
|
event: Event,
|
|
listener: BusboyEvents[Event],
|
|
): Busboy;
|
|
off(event: string | symbol, listener: (...args: any[]) => void): Busboy;
|
|
|
|
prependListener<Event: $Keys<BusboyEvents>>(
|
|
event: Event,
|
|
listener: BusboyEvents[Event],
|
|
): Busboy;
|
|
prependListener(
|
|
event: string | symbol,
|
|
listener: (...args: any[]) => void,
|
|
): Busboy;
|
|
|
|
prependOnceListener<Event: $Keys<BusboyEvents>>(
|
|
event: Event,
|
|
listener: BusboyEvents[Event],
|
|
): Busboy;
|
|
prependOnceListener(
|
|
event: string | symbol,
|
|
listener: (...args: any[]) => void,
|
|
): Busboy;
|
|
}
|
|
}
|
|
|
|
declare module 'pg/lib/utils' {
|
|
declare module.exports: {
|
|
prepareValue(val: any): mixed,
|
|
};
|
|
}
|
|
|
|
// Node
|
|
declare module 'async_hooks' {
|
|
declare class AsyncLocalStorage<T> {
|
|
disable(): void;
|
|
getStore(): T | void;
|
|
run<R>(store: T, callback: (...args: any[]) => R, ...args: any[]): R;
|
|
enterWith(store: T): void;
|
|
}
|
|
declare interface AsyncResource {}
|
|
declare function executionAsyncId(): number;
|
|
declare function executionAsyncResource(): AsyncResource;
|
|
declare function triggerAsyncId(): number;
|
|
declare type HookCallbacks = {
|
|
init?: (
|
|
asyncId: number,
|
|
type: string,
|
|
triggerAsyncId: number,
|
|
resource: AsyncResource,
|
|
) => void,
|
|
before?: (asyncId: number) => void,
|
|
after?: (asyncId: number) => void,
|
|
promiseResolve?: (asyncId: number) => void,
|
|
destroy?: (asyncId: number) => void,
|
|
};
|
|
declare class AsyncHook {
|
|
enable(): this;
|
|
disable(): this;
|
|
}
|
|
declare function createHook(callbacks: HookCallbacks): AsyncHook;
|
|
}
|
|
|
|
// Edge
|
|
declare class AsyncLocalStorage<T> {
|
|
disable(): void;
|
|
getStore(): T | void;
|
|
run<R>(store: T, callback: (...args: any[]) => R, ...args: any[]): R;
|
|
enterWith(store: T): void;
|
|
}
|
|
|
|
declare var async_hooks: {
|
|
createHook(callbacks: any): any,
|
|
executionAsyncId(): number,
|
|
};
|
|
|
|
declare module 'node:worker_threads' {
|
|
declare class MessageChannel {
|
|
port1: MessagePort;
|
|
port2: MessagePort;
|
|
}
|
|
}
|
|
|
|
declare var Bun: {
|
|
hash(
|
|
input: string | $TypedArray | DataView | ArrayBuffer | SharedArrayBuffer,
|
|
): number,
|
|
};
|