mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Detect and warn if use(promise) is wrapped with try/catch block (#25543)
The old (unstable) mechanism for suspending was to throw a promise. The purpose of throwing is to interrupt the component's execution, and also to signal to React that the interruption was caused by Suspense as opposed to some other error. A flaw is that throwing is meant to be an implementation detail — if code in userspace catches the promise, it can lead to unexpected behavior. With `use`, userspace code does not throw promises directly, but `use` itself still needs to throw something to interrupt the component and unwind the stack. The solution is to throw an internal error. In development, we can detect whether the error was caught by a userspace try/catch block and log a warning — though it's not foolproof, since a clever user could catch the object and rethrow it later. The error message includes advice to move `use` outside of the try/catch block. I did not yet implement the warning in Flight.
This commit is contained in:
@@ -443,5 +443,7 @@
|
||||
"455": "This CacheSignal was requested outside React which means that it is immediately aborted.",
|
||||
"456": "Calling Offscreen.detach before instance handle has been set.",
|
||||
"457": "acquireHeadResource encountered a resource type it did not expect: \"%s\". This is a bug in React.",
|
||||
"458": "Currently React only supports one RSC renderer at a time."
|
||||
"458": "Currently React only supports one RSC renderer at a time.",
|
||||
"459": "Expected a suspended thenable. This is a bug in React. Please file an issue.",
|
||||
"460": "Suspense Exception: This is not a real error! It's an implementation detail of `use` to interrupt the current render. You must either rethrow it immediately, or move the `use` call outside of the `try/catch` block. Capturing without rethrowing will lead to unexpected behavior.\n\nTo handle async errors, wrap your component in an error boundary, or call the promise's `.catch` method and pass the result to `use`"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user