SSR哨兵

Question

• 我们在Reactjs上有一个应用程序
• 我们有一个SSR，它在webpack的基础上构建应用程序，呈现这个应用程序并返回HTML
• 然后，在客户端，我们补充了应用程序。
• 因此，该应用程序在服务器端和客户端运行。

问题：

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

我们尝试过的：

有两个模块@sentry/browser和@sentry/节点。我们试着制作一个模块来实现：

export default isClientSide ? SentryBrowser : SentryNode

因此，如果它是客户端，那么使用SentryBrowser。If服务器- SentryNode

但是@sentry/node不能在webpack上运行，因为它不能解决fs、path等节点的依赖关系。

问题：，我们如何在客户端和服务器端使用单个Sentry接口来做出类似@sentry/nextjs在双方都能工作的反应？

Answer 1

我们的解决方案是将一个errorHandler道具传递给应用程序。在服务器上呈现时，我们会传入@sentry/node的captureException，而在客户机上则会传递@sentry/browser的一个。似乎运作得很好。

const App = ({errorHandler}) => {
  ..
  return (<ErrorBoundary errorHandler={errorHandler}>
    ..
  </ErrorBoundary>);

然后在服务器上：

import { captureException as serverCaptureEx } from '@sentry/node';

hydrate(..., <App errorHandler={serverCaptureEx} />)

在客户方面：

import { captureException as clientCaptureEx } from '@sentry/browser';

render(..., <App errorHandler={clientCaptureEx} />)

Answer 2

简短的回答-你不能。

客户端以特殊的方式包装，在大多数情况下称为误差边界。React将一个错误传递给项目的根组件，并将其捕获并向URL报告。这是一个浏览器，它是客户端的“服务器”，可以在以太网上执行请求等等。

如果您运行的是NextJS服务器，而不是html export (非常重要的条件！)，那么它将使用一些NodeJS库(例如快递)。此服务器与Webpack或JS编译没有任何共同之处，被用作中间件。如你所见，它只是某个路由或功能的包装器。如果服务器出现错误，则由NodeJS报告，而不是Webpack报告。因此，旗子在反应或Webpack插件将不会帮助你。

再一次，客户机和服务器是不同的环境，浏览器和NodeJS服务器.错误是由服务器报告的，而不是由绑定程序报告的。Webpack不会在这里帮你的。