带 SSR 的哨兵

Question

• We have an application on Reactjs
• We have an SSR that builds the app on webpack, renders this application and returns HTML
• Then on the client-side we hydrate the app
• So the app is run on both server and client sides.

Problem:

We'd like to use sentry in react, so that it can be used on both client and server sides, because an error may occur in either place

What we've tried:

There are 2 modules @sentry/browser and @sentry/node. We tried to make a module that would do:

export default isClientSide ? SentryBrowser : SentryNode

So if it's client, then use SentryBrowser. If server - SentryNode

But @sentry/node can't be run on webpack since it can't resolve node dependencies like fs , path etc.

Question: How can we use a single Sentry interface on both client and server sides for React like @sentry/nextjs works on both sides?

Answer 1

Short answer - you can't.

Answer 2

Our solution was to pass in an errorHandler prop to the app. When rendering on the server we'd pass in @sentry/node's captureException, and on the client we'd pass in the @sentry/browser's one. Seemed to work just fine.

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

Then on server:

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

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

and on client:

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

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