FG
🌐 Web & Full-StackVercel

How to catch and handle errors to report logs on server side

Freshabout 19 hours ago
Mar 14, 20260 views
Confidence Score95%
95%

Problem

Hi, I'm in the situation where we want to sent errors, both on server and client side, to Sentry tool. Our app uses Express as a custom server. Basically we create an express app, apply some middlewares but delegate all the real job to the next.js handle: [code block] With this approach next.js takes control over the rendering process and any error is catch by next.js and the only way I have to process it is overriding the `_error.js` page file. Within that `_error.js` file I need a universal way to report errors to Sentry. Currently there are two libraries (`raven` for node and `raven-js` por javascript). The proble is I can't import both of them because `raven` works for SSR but fails when webpack builds the bundle, and also `raven-js` fails due XMLHTTPRequest dependency too. Is there a way I can be notified for next.js error on server side?

Error Output

error is catch by next.js and the only way I have to process it is overriding the `_error.js` page file.

Unverified for your environment

Select your OS to check compatibility.

1 Fix

Canonical Fix
Unverified Fix
New Fix – Awaiting Verification

Implement Universal Error Handling for Sentry in Next.js

Medium Risk

Next.js captures errors during server-side rendering, and the default error handling does not provide a way to report these errors to Sentry directly. The conflict between `raven` and `raven-js` libraries arises from their incompatibility with server-side and client-side environments, preventing a unified error reporting solution.

Awaiting Verification

Be the first to verify this fix

  1. 1

    Install Sentry SDK

    Install the Sentry SDK for both server-side and client-side error reporting. Use the latest version of the SDK that supports both environments.

    bash
    npm install @sentry/node @sentry/react
  2. 2

    Configure Sentry in Express Server

    Set up Sentry in your Express server to capture errors. Initialize Sentry at the top of your server file before any middleware.

    javascript
    const Sentry = require('@sentry/node');

Sentry.init({
  dsn: 'YOUR_SENTRY_DSN',
  tracesSampleRate: 1.0,
});

app.use(Sentry.Handlers.requestHandler());
  3. 3

    Handle Errors in _error.js

    Override the `_error.js` page to capture errors and send them to Sentry. Use the Sentry React SDK to report client-side errors.

    javascript
    import * as Sentry from '@sentry/react';

function Error({ statusCode }) {
  if (statusCode) {
    Sentry.captureException(new Error('Error occurred: ' + statusCode));
  }
  return <p>An error {statusCode} occurred on server</p>;
}

Error.getInitialProps = async ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
  return { statusCode };
};
  4. 4

    Add Sentry Error Handler Middleware

    Add Sentry's error handler middleware to your Express app to catch any unhandled errors and report them to Sentry.

    javascript
    app.use(Sentry.Handlers.errorHandler());
  5. 5

    Test Error Reporting

    Trigger an error in your application to ensure that it is captured by Sentry. You can create a test route that throws an error and check Sentry for the reported error.

    javascript
    app.get('/error', (req, res) => {
  throw new Error('This is a test error!');
});

Validation

To confirm the fix worked, trigger an error in your application and check the Sentry dashboard for the reported error. Ensure that both server-side and client-side errors are logged correctly.

Sign in to verify this fix

Environment

Submitted by

AC

Alex Chen

2450 rep

Tags

nextjsreactssr