[Fizz] Move digest from errorInfo to Error instance (#25313)
* suspense boundary error digest to Error instance and deprecate digest from errorInfo for onRecoverableError * fix closure escape
This commit is contained in:
parent
d1bb1c5861
commit
112d0498c8
|
@ -92,7 +92,7 @@ describe('ReactDOMFizzServer', () => {
|
|||
function expectErrors(errorsArr, toBeDevArr, toBeProdArr) {
|
||||
const mappedErrows = errorsArr.map(({error, errorInfo}) => {
|
||||
const stack = errorInfo && errorInfo.componentStack;
|
||||
const digest = errorInfo && errorInfo.digest;
|
||||
const digest = error.digest;
|
||||
if (stack) {
|
||||
return [error.message, digest, normalizeCodeLocInfo(stack)];
|
||||
} else if (digest) {
|
||||
|
@ -3230,6 +3230,47 @@ describe('ReactDOMFizzServer', () => {
|
|||
);
|
||||
});
|
||||
|
||||
it('warns in dev if you access digest from errorInfo in onRecoverableError', async () => {
|
||||
await act(async () => {
|
||||
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
|
||||
<div>
|
||||
<Suspense fallback={'loading...'}>
|
||||
<AsyncText text={'hello'} />
|
||||
</Suspense>
|
||||
</div>,
|
||||
{
|
||||
onError(error) {
|
||||
return 'a digest';
|
||||
},
|
||||
},
|
||||
);
|
||||
rejectText('hello');
|
||||
pipe(writable);
|
||||
});
|
||||
expect(getVisibleChildren(container)).toEqual(<div>loading...</div>);
|
||||
|
||||
ReactDOMClient.hydrateRoot(
|
||||
container,
|
||||
<div>
|
||||
<Suspense fallback={'loading...'}>hello</Suspense>
|
||||
</div>,
|
||||
{
|
||||
onRecoverableError(error, errorInfo) {
|
||||
expect(() => {
|
||||
expect(error.digest).toBe('a digest');
|
||||
expect(errorInfo.digest).toBe('a digest');
|
||||
}).toErrorDev(
|
||||
'Warning: You are accessing "digest" from the errorInfo object passed to onRecoverableError.' +
|
||||
' This property is deprecated and will be removed in a future version of React.' +
|
||||
' To access the digest of an Error look for this property on the Error instance itself.',
|
||||
{withoutStack: true},
|
||||
);
|
||||
},
|
||||
},
|
||||
);
|
||||
expect(Scheduler).toFlushWithoutYielding();
|
||||
});
|
||||
|
||||
describe('error escaping', () => {
|
||||
it('escapes error hash, message, and component stack values in directly flushed errors (html escaping)', async () => {
|
||||
window.__outlet = {};
|
||||
|
|
|
@ -2746,6 +2746,7 @@ function updateDehydratedSuspenseComponent(
|
|||
'client rendering.',
|
||||
);
|
||||
}
|
||||
(error: any).digest = digest;
|
||||
const capturedValue = createCapturedValue(error, digest, stack);
|
||||
return retrySuspenseComponentWithoutHydrating(
|
||||
current,
|
||||
|
|
|
@ -2746,6 +2746,7 @@ function updateDehydratedSuspenseComponent(
|
|||
'client rendering.',
|
||||
);
|
||||
}
|
||||
(error: any).digest = digest;
|
||||
const capturedValue = createCapturedValue(error, digest, stack);
|
||||
return retrySuspenseComponentWithoutHydrating(
|
||||
current,
|
||||
|
|
|
@ -2596,9 +2596,11 @@ function commitRootImpl(
|
|||
const onRecoverableError = root.onRecoverableError;
|
||||
for (let i = 0; i < recoverableErrors.length; i++) {
|
||||
const recoverableError = recoverableErrors[i];
|
||||
const componentStack = recoverableError.stack;
|
||||
const digest = recoverableError.digest;
|
||||
onRecoverableError(recoverableError.value, {componentStack, digest});
|
||||
const errorInfo = makeErrorInfo(
|
||||
recoverableError.digest,
|
||||
recoverableError.stack,
|
||||
);
|
||||
onRecoverableError(recoverableError.value, errorInfo);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -2689,6 +2691,33 @@ function commitRootImpl(
|
|||
return null;
|
||||
}
|
||||
|
||||
function makeErrorInfo(digest: ?string, componentStack: ?string) {
|
||||
if (__DEV__) {
|
||||
const errorInfo = {
|
||||
componentStack,
|
||||
digest,
|
||||
};
|
||||
Object.defineProperty(errorInfo, 'digest', {
|
||||
configurable: false,
|
||||
enumerable: true,
|
||||
get() {
|
||||
console.error(
|
||||
'You are accessing "digest" from the errorInfo object passed to onRecoverableError.' +
|
||||
' This property is deprecated and will be removed in a future version of React.' +
|
||||
' To access the digest of an Error look for this property on the Error instance itself.',
|
||||
);
|
||||
return digest;
|
||||
},
|
||||
});
|
||||
return errorInfo;
|
||||
} else {
|
||||
return {
|
||||
digest,
|
||||
componentStack,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function releaseRootPooledCache(root: FiberRoot, remainingLanes: Lanes) {
|
||||
if (enableCache) {
|
||||
const pooledCacheLanes = (root.pooledCacheLanes &= remainingLanes);
|
||||
|
|
|
@ -2596,9 +2596,11 @@ function commitRootImpl(
|
|||
const onRecoverableError = root.onRecoverableError;
|
||||
for (let i = 0; i < recoverableErrors.length; i++) {
|
||||
const recoverableError = recoverableErrors[i];
|
||||
const componentStack = recoverableError.stack;
|
||||
const digest = recoverableError.digest;
|
||||
onRecoverableError(recoverableError.value, {componentStack, digest});
|
||||
const errorInfo = makeErrorInfo(
|
||||
recoverableError.digest,
|
||||
recoverableError.stack,
|
||||
);
|
||||
onRecoverableError(recoverableError.value, errorInfo);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -2689,6 +2691,33 @@ function commitRootImpl(
|
|||
return null;
|
||||
}
|
||||
|
||||
function makeErrorInfo(digest: ?string, componentStack: ?string) {
|
||||
if (__DEV__) {
|
||||
const errorInfo = {
|
||||
componentStack,
|
||||
digest,
|
||||
};
|
||||
Object.defineProperty(errorInfo, 'digest', {
|
||||
configurable: false,
|
||||
enumerable: true,
|
||||
get() {
|
||||
console.error(
|
||||
'You are accessing "digest" from the errorInfo object passed to onRecoverableError.' +
|
||||
' This property is deprecated and will be removed in a future version of React.' +
|
||||
' To access the digest of an Error look for this property on the Error instance itself.',
|
||||
);
|
||||
return digest;
|
||||
},
|
||||
});
|
||||
return errorInfo;
|
||||
} else {
|
||||
return {
|
||||
digest,
|
||||
componentStack,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function releaseRootPooledCache(root: FiberRoot, remainingLanes: Lanes) {
|
||||
if (enableCache) {
|
||||
const pooledCacheLanes = (root.pooledCacheLanes &= remainingLanes);
|
||||
|
|
Loading…
Reference in New Issue