Install ExtensionApp Store

X 上的 Ryan Toronto:“Errors from React Server Components are displayed differently between development and production environments. This is an awesome feature that's built into every server component and it doesn't require any extra work or configuration. Here's why and how… In development you https://t.co/nOMPohehUY” / X

Errors from React Server Components are displayed differently between development and production environments. This is an awesome feature that's built into every server component and it doesn't require any extra work or configuration.
React Server 组件的错误在开发环境和生产环境中的显示方式不同。 这是一个很棒的功能,内置于每个服务器组件中,并且不需要任何额外的工作或配置。
图像
Here's why and how… In development you want to expose as much information as possible whenever there's an error. The thinking here is that the more information you surface the easier it will be to fix the problem. But in production error messages and stack traces can expose system information, environment variables, and other data you do not want to leak out. Here protecting secrets outweighs the benefits of surfacing error information.
这是为什么以及如何...... 在开发过程中,只要出现错误,您就希望公开尽可能多的信息。这里的想法是,您提供的信息越多,解决问题就越容易。 但在生产中,错误消息和堆栈跟踪可能会暴露系统信息、环境变量和您不想泄漏的其他数据。在这里,保护秘密比显示错误信息的好处更重要。
图像
Anytime an RSC throws an error, React is going to serialize that error into the RSC payload. This serialized error is then sent to the client and client React will attempt to render it. This rendering fails, because it contains an error, and that error will be caught by the closest error boundary. In development, when React serializes the error into the RSC payload it is going to include the error message and stack trace. As soon as the error boundary catches the error it can display the error message in its entirety. But in production React does not serialize the error message or stack trace. The only thing serialized into the payload is a property called digest, which is a string id/hash associated with the error. In this situation the client knows nothing about the error, it sees an error with no message, no stack trace, only a single property called digest that contains an id. The most information the error boundary can display that digest id.
每当 RSC 抛出错误时,React 都会将该错误序列化到 RSC 有效负载中。然后这个序列化错误被发送到客户端,客户端 React 将尝试渲染它。此渲染失败,因为它包含错误,并且该错误将被最近的错误边界捕获。 在开发中,当 React 将错误序列化到 RSC 有效负载中时,它将包含错误消息和堆栈跟踪。一旦错误边界捕获到错误,它就可以完整地显示错误消息。 但在生产中,React 不会序列化错误消息或堆栈跟踪。序列化到有效负载中的唯一内容是一个名为摘要的属性,它是与错误关联的字符串 id/散列。在这种情况下,客户端对错误一无所知,它看到的错误没有消息,没有堆栈跟踪,只有一个名为 摘要 的包含 id 的属性。错误边界可以显示该摘要 ID 的最多信息。
图像
Once an error happens in production a developer can then take the digest and look it up in the production logs. The logs on the server should show the full error message, stack trace, and digest. This allows the developer to debug errors happening in production without leaking any details about the error to the public.
一旦生产中发生错误,开发人员就可以获取摘要并在生产日志中查找它。服务器上的日志应显示完整的错误消息、堆栈跟踪和摘要。这允许开发人员调试生产中发生的错误,而不会向公众泄露有关错误的任何详细信息。
图像
I think this is a pretty awesome feature of RSCs and it's nice to see that this sort of security is on by default.
我认为这是 RSC 的一个非常棒的功能,很高兴看到这种安全性默认开启。