带 SSR 的哨兵

Question

• 我们在 Reactjs 上有一个应用程序
• 我们有一个 SSR，它在 webpack 上构建应用程序，呈现这个应用程序并返回 HTML
• 然后在客户端对应用进行水合
• 所以应用程序在服务器端和客户端都运行。

问题：

我们想在 react 中使用 sentry，这样它就可以在客户端和服务器端使用，因为任何地方都可能出现错误

我们的尝试：

有两个模块@sentry/browser 和@sentry/node。 我们试图制作一个可以做到的模块：

export default isClientSide ? SentryBrowser : SentryNode

因此，如果是客户端，请使用 SentryBrowser。如果服务器 - SentryNode

但是@sentry/node 不能在 webpack 上运行，因为它无法解析节点依赖，例如 fs、path 等。

问题： 我们如何在客户端和服务器端都使用单个 Sentry 接口，以便像 @sentry/nextjs 一样在双方都工作？

Answer 1

简短的回答 - 你不能。

客户端封装在特殊的 HOC 中，在大多数情况下称为 Error Boundary。 React 将错误传递给项目的根组件并捕获它并将其报告给 URL。这是一个浏览器，是客户端的“服务器”，可以在以太网等上做请求。

如果您运行 NextJS 服务器，而不是 html export（非常重要的条件！），则它在后台使用了一些 NodeJS 库（例如，Express）。该服务器与 Webpack 或 JS 编译没有任何共同之处，用作中间件。 As you can see，它只是对某些路由或功能的封装。 如果你在服务器上遇到错误，它是由 NodeJS 报告的，而不是 Webpack。所以 React 或 Webpack 插件中某处的标志对你没有帮助。

再一次 - 客户端和服务器是不同的环境，浏览器和 NodeJS 服务器。这些错误是由服务器报告的，而不是捆绑程序。 Webpack 在这里帮不了你。