Next.js: 서버 측에서 로그를 보고하기 위해 오류를 포착하고 처리하는 방법

클라이언트 측에서 오류를 기록하기 위해 다음을 수행했습니다.
https://gist.github.com/jgautheron/044b88307d934d486f59ae87c5a5a5a0

기본적으로 stdout 인쇄되고 Docker 로깅 드라이버에 의해 포착되는 오류를 서버에 보냅니다.
핵심 Next 파일을 재정의할 필요 없이 react-guard 로 SSR 오류를 성공적으로 포착했습니다.

저도 이 문제가 있습니다. 다음의 handleRequest 에서 거부된 프라미스를 단순히 반환하는 것으로 충분할까요? 즉, 여기 에서 코드를

handleRequest (req, res, parsedUrl) {
  // .....snip....

   return this.run(req, res, parsedUrl)
     .catch((err) => {
       if (!this.quiet) console.error(err)
       res.statusCode = 500
       res.end(STATUS_CODES[500])

       // rethrow error to create new, rejected promise 
       throw err;
     })
}

그런 다음 사용자 코드에서:

const app = nextJs({ dev: process.env.NODE_ENV !== 'production' });
const nextJsHandler = app.getRequestHandler();
const expressApp = express();

app.prepare().then(() => {
   // invoke express middlewares
   // ...

   // time to run next
   expressApp.use(function(req, res, next) {
     nextJsHandler(req, res).catch(e => {
       // use rejected promise to forward error to next express middleware
       next(e)
     })
   });

   // Use standard express error middlewares to handle the error from next
   // this makes it easy to log to sentry etc.
})

@arunoda @rauchg 바로 위에서 제안한 변경 사항이 효과가 있다고 생각하십니까? 그렇다면 기꺼이 PR을 제출하십시오.

우리가 그것을 가지고 놀 수 있도록 오류를 다시 던지는 데 동의하십시오.
또한 renderToHTML 에서 다시 던져야 합니다...

나는 또한 서버 측과 클라이언트 측 모두에서 Sentry와 유사한 서비스에 오류를 보내고 싶은 상황에 있습니다.

이러한 서비스/도구의 가장 가치 있는 기능은 내 경험상 야생(즉, 클라이언트 측)에서 발견되지 않은 오류인 가장 예상치 못한 문제를 보고하는 것이라고 생각합니다. 불행히도 이전에 관련 문제 #2334에서 강조했듯이 Next.js의 클라이언트 측 핸들러는 이러한 오류를 다른 도구의 Sentry에 전달할 수 있는 방법 없이 이러한 오류를 자체적으로 유지합니다.

우리를 특히 힘들게 한 것은 다음과 같습니다. React가 클라이언트 측에서 렌더링하기 전에 잡히지 않은 예외가 발생하면 제대로 서버 측에서 렌더링된 페이지가 오류 페이지로 다시 렌더링됩니다 . 이것은 훌륭한 기능으로 볼 수 있지만 놀랍게도 클라이언트의 일부에서 이미 렌더링된 문서를 제공하는 이점을 근본적으로 망치기 때문에 실망스러운 개발자 경험으로 볼 수 있습니다.

다음은 문제를 보여주는 샘플 페이지입니다.

import React from 'react';

// Works well in Node 8, but crashes in Chrome<56, Firefox<48, Edge<15, Safari<10, any IE…
const whoops = 'Phew, I made it to the client-side…'.padEnd(80);

export default () => <pre>{whoops}</pre>;

위의 코드는 서버 측에서 완벽하게 렌더링되어 클라이언트에 전달될 수 있지만, 클라이언트 측에서 전체 페이지가 대부분의 브라우저에서 "예기치 않은 오류가 발생했습니다"라는 두려운 메시지로 대체되기 전에 원하지 않는 콘텐츠 의 Sentry (또는 다른 서비스/도구)에

이 "오류 삼키기"는 또한 대부분의 클라이언트 측 오류 보고 도구가 연결하는 표준 onerror 핸들러(또는 더 현대적이지만 널리 퍼져 있지 않은 onunhandledrejection , 클라이언트 측의 비동기 특성을 고려할 때 더 적합할 수 있음)의 활용을 방지합니다. 암호).

가능한 클라이언트 측 솔루션

내가 말할 수 있는 한, 이러한 유형의 pre-React 클라이언트 측 오류는 Next.js의 client/index.js 에 있는 try / catch 블록에서 삼켜집니다. 여기서 Component 렌더링되기이 값을 재 할당 ErrorComponent (현재 라인 67-72 ).

Next.js 작성자 및 유지 관리자에게, 렌더링되는 내용을 제어하기 위해 다음 아이디어 중 어떤 것이 허용/가능하다고 생각하십니까?

• 이런 종류의 오류를 처리하기 위해 client/index.js의 catch 블록에 후크를 도입하시겠습니까?
• 감지된 경우 오류를 onerror/onunhandledrejection 처리기로 전송하시겠습니까?
• 오류를 다시 발생시키는 옵션을 제공하시겠습니까?
• 오류 구성 요소를 표시하지 않는 옵션을 제공하시겠습니까?
• 사용자 지정 오류 구성 요소를 표시하는 옵션을 제공하시겠습니까?

이런 종류의 오류를 처리하기 위해 client/index.js의 catch 블록에 후크를 도입하시겠습니까?
감지된 경우 오류를 onerror/onunhandledrejection 처리기로 전송하시겠습니까?

내부적으로 이야기한 내용입니다. 그리고 곧 다룰 것입니다.

저는 Sentry.io를 사용하여 오류를 보고하고 있으며 우리가 적용하는 솔루션은 다음과 같습니다.

1- 서버 측에서 raven-node 구성
2- 클라이언트 측에서 ravenjs를 구성합니다( _document 에서 만들었습니다.

이 두 단계를 통해 클라이언트와 서버 모두에서 처리되지 않은 예외를 포착합니다.

3- _error 페이지를 만듭니다. nextjs가 해당 페이지가 렌더링되는 요청(클라이언트 측이든 서버 측이든 상관없이)을 처리하면 생성되는 모든 오류입니다. _error 페이지의 getInitialProps 메소드에서 우리는 sentry에 오류를 보고합니다.

raven-node 또는 ravenjs가 클라이언트 const Raven = require('raven-js'); 또는 서버 측 const Raven = require('raven'); 인지에 따라 동적으로 가져오기를 해결하는 경우 로드 방법을 결정하는 방법입니다.
next.config.js 를 업데이트하는 raven 모듈(서버 측 모듈)을 다음과 함께 번들하지 않도록 webpack을 구성했습니다.

const webpack = require('webpack');

module.exports = {
  // Do not show the X-Powered-By header in the responses
  poweredByHeader: false,
  webpack: (config) => {
    config.plugins.push(new webpack.IgnorePlugin(/^raven$/));
    return config;
  },
};

@캐니멀

2- 클라이언트 측에서 ravenjs를 구성합니다(_document.js에서 만들었습니다.

_document.js 에서 raven-js를 어떻게 구성했는지 보여줄 수 있습니까? 오류가 발생하면 센트리에서 아무 일도 일어나지 않습니다.

_error.js 페이지의 모든 오류를 수동으로 센트리로 보내야 합니까?

// _document constructor
constructor(props) {
    super(props);
    Raven
      .config('...')
      .install();
}

Next.js는 조용히 설정하지 않는 한 서버의 console.error 에 여전히 오류를 출력합니다.

Sentry를 사용하면 autoBreadcrumbs 를 활성화 하여 이 출력 을 캡처한 다음 자신의 메시지를 수동으로 캡처할 수 있습니다. 제목은 덜 설명적이지만 여전히 전체 스택 추적을 포함합니다.

구현 예:

const express = require('express');
const nextjs = require('next');
const Raven = require('raven');

const dev = process.env.NODE_ENV !== 'production';

// Must configure Raven before doing anything else with it
if (!dev) {
  Raven.config('__DSN__', {
    autoBreadcrumbs: true,
    captureUnhandledRejections: true,
  }).install();
}

const app = nextjs({ dev });
const handle = app.getRequestHandler();

const captureMessage = (req, res) => () => {
  if (res.statusCode > 200) {
    Raven.captureMessage(`Next.js Server Side Error: ${res.statusCode}`, {
      req,
      res,
    });
  }
};

app
  .prepare()
  .then(() => {
    const server = express();

    if (!dev) {
      server.use((req, res, next) => {
        res.on('close', captureMessage(req, res));
        res.on('finish', captureMessage(req, res));
        next();
      });
    }

    [...]

    server.get('/', (req, res) => {
      return app.render(req, res, '/home', req.query)
    })

    server.get('*', (req, res) => {
      return handle(req, res)
    })

    server.listen('3000', (err) => {
      if (err) throw err
      console.log(`> Ready on http://localhost:${port}`)
    })
  })
  .catch(ex => {
    console.error(ex.stack);
    process.exit(1);
  });

이것은 실제 코드를 수정한 매우 인위적인 예입니다. 이 형식으로 테스트하지 않았습니다. 고장나면 알려주세요.

물론, Next.js가 이러한 오류를 Express로 전달할 수 있다면 가장 좋을 것입니다. 그러면 Sentry/Express 통합을 즉시 사용할 수 있습니다.

@tusgavomelo 답변이 늦어 죄송합니다.

업데이트가 있습니다. 우리 앱에는 클라이언트 측이나 서버 측에서 고려하는 Raven 인스턴스를 가져오는 역할을 하는 메소드가 있는 도우미 파일이 있습니다.

let clientInstance;
let serverInstance;

const getRavenInstance = (key, config) => {
  const clientSide = typeof window !== 'undefined';

  if (clientSide) {
    if (!clientInstance) {
      const Raven = require('raven-js');  // eslint-disable-line global-require
      Raven.config(key, config).install();
      clientInstance = Raven;
    }

    return clientInstance;
  }

  if (!serverInstance) {
    // NOTE: raven (for node) is not bundled by webpack (see rules in next.config.js).
    const RavenNode = require('raven'); // eslint-disable-line global-require
    RavenNode.config(key, config).install();
    serverInstance = RavenNode;
  }
  return serverInstance;
};

이 코드는 서버 측(요청이 도착할 때)과 클라이언트 측 모두를 실행합니다. 우리가 한 것은 raven 패키지를 번들하지 않도록 webpack( next.config.js 파일)을 구성하는 것입니다.

@acanimal 작업 예제를 제공할 수 있습니까? 전체 스택 추적을 얻지 못하는 것 같습니까? 아니면 _error.js 를 게시할 수 있습니까?

내가 좋아하는 뭔가를하고있는 중이 야 RavenInstance.captureException(err) 내에서 _error.js ,하지만 난뿐만 아니라 곳으로 발생한 오류의 유형을 볼 수 없어요?

export default class Error extends React.Component {
  static getInitialProps({ res, err }) {
    const RavenInstance = getRavenInstance('__SENTRY__')
    if (!(err instanceof Error)) {
      err = new Error(err && err.message)
    }
    RavenInstance.captureException(err)
    // const statusCode = res ? res.statusCode : err ? err.statusCode : null;

    return { }
  }

  render() {
    return (
      <div>
        <p>An error occurred on server</p>
      </div>
    )
  }
}

이것은 quiet 가 false 로 설정되어 모듈을 다시 빌드할 때 다음 화면을 지우고 보기에서 오류를 제거하는 것을 방지하기 때문에 사용자 정의 로거 지원을 요청하는 장소처럼 보이지만 여기에서 실행 가능한 유일한 해킹은 다음이 필요합니다. quiet 를 false로 설정합니다.

오류 세부 정보는 stderr 스트림에서도 볼 수 있습니다.
process.stderr.write = error => yourErrorLog(error);

_unortodox_ 솔루션을 사랑해야 합니다.

function installErrorHandler(app) {
  const _renderErrorToHTML = app.renderErrorToHTML.bind(app)
  const errorHandler = rollbar.errorHandler()

  app.renderErrorToHTML = (err, req, res, pathname, query) => {
    if (err) {
      errorHandler(err, req, res, () => {})
    }

    return _renderErrorToHTML(err, req, res, pathname, query)
  }

  return app
}
// ¯\_(ツ)_/¯

사용자 정의 웹팩 구성 없이 노드 및 브라우저에 대해 올바른 Raven을 얻는 방법의 압축 버전. @acanimal 댓글에서 영감을

// package.json
"browser": {
    "raven": "raven-js"
}

// getRaven.js
const Raven = require('raven')

if (process.env.NODE_ENV === 'production') {
  Raven.config('YOUR_SENTRY_DSN').install()
}

module.exports = Raven

요점

이 문제를 조사하는 모든 사람을 위한 간략한 요약입니다.

// pages/_error.js
import Raven from 'raven';
...
static async getInitialProps({ store, err, isServer }) {
   if (isServer && err) {
      // https://github.com/zeit/next.js/issues/1852
      // eslint-disable-next-line global-require
      const Raven = require('raven');

      Raven.captureException(err);
    }
    ...

// next.config.js
config.plugins.push(new webpack.IgnorePlugin(/^raven$/));

@acanimal 님 의 댓글 덕분입니다.

raven (이전 주석에서 제안한 대로 webpack 무시) 및 raven-js 를 모두 설치한 다음 lib/raven.js 와 같이 동형 Raven을 인스턴스화하는 도우미를 만듭니다.

import Raven from 'raven-js';

// https://gist.github.com/impressiver/5092952
const clientIgnores = {
  ignoreErrors: [
    'top.GLOBALS',
    'originalCreateNotification',
    'canvas.contentDocument',
    'MyApp_RemoveAllHighlights',
    'http://tt.epicplay.com',
    "Can't find variable: ZiteReader",
    'jigsaw is not defined',
    'ComboSearch is not defined',
    'http://loading.retry.widdit.com/',
    'atomicFindClose',
    'fb_xd_fragment',
    'bmi_SafeAddOnload',
    'EBCallBackMessageReceived',
    'conduitPage',
    'Script error.',
  ],
  ignoreUrls: [
    // Facebook flakiness
    /graph\.facebook\.com/i,
    // Facebook blocked
    /connect\.facebook\.net\/en_US\/all\.js/i,
    // Woopra flakiness
    /eatdifferent\.com\.woopra-ns\.com/i,
    /static\.woopra\.com\/js\/woopra\.js/i,
    // Chrome extensions
    /extensions\//i,
    /^chrome:\/\//i,
    // Other plugins
    /127\.0\.0\.1:4001\/isrunning/i, // Cacaoweb
    /webappstoolbarba\.texthelp\.com\//i,
    /metrics\.itunes\.apple\.com\.edgesuite\.net\//i,
  ],
};

const options = {
  autoBreadcrumbs: true,
  captureUnhandledRejections: true,
};

let IsomorphicRaven = null;

if (process.browser === true) {
  IsomorphicRaven = Raven;
  IsomorphicRaven.config(SENTRY_PUBLIC_DSN, {
    ...clientIgnores,
    ...options,
  }).install();
} else {
  // https://arunoda.me/blog/ssr-and-server-only-modules
  IsomorphicRaven = eval("require('raven')");
  IsomorphicRaven.config(
    SENTRY_DSN,
    options,
  ).install();
}

export default IsomorphicRaven;

그런 다음 pages/_error.js 에서 사용할 수 있으며 서버 측과 클라이언트 측 모두에서 작동합니다.

import NextError from 'next/error';
import IsomorphicRaven from 'lib/raven';

class MyError extends NextError {
  static getInitialProps = async (context) => {
    if (context.err) {
      IsomorphicRaven.captureException(context.err);
    }
    const errorInitialProps = await NextError.getInitialProps(context);
    return errorInitialProps;
  };
}

export default MyError;

다음은 Next.js를 지원하는 Rollbar 소스맵 웹백 플러그인 https://github.com/thredup/rollbar-sourcemap-webpack-plugin/pull/56에 대한 제 PR입니다. :)

@tusgavomelo , 스트림에 있는 오류를 사용하는 방법에 대해 자세히 설명해 주시겠습니까?
"process.stderr.write = 오류 => yourErrorLog(오류);"

노드 콘솔에 오류를 기록하려면 이 코드 줄을 어디에 작성해야 합니까?

그것은 단지 클라이언트 측입니다.
Rollbar.error('some error')

https://docs.rollbar.com/docs/javascript

@teekey99 @sentry/browser 비슷한 솔루션이 있습니까? 아마도 with-sentry 예제를 업데이트하시겠습니까?

@sheerun 지금까지 raven 및 raven-js 하고 있습니다. 모든 새로운 기능이 이제 @sentry/node 및 @sentry/browser 추가됨에 따라 이러한 기능이 더 이상 사용되지 않을 것임을 알고 있습니다. 문제는 아직 내 프로젝트에서 이러한 새 라이브러리를 사용하지 않았지만 살펴보려고 합니다. 작업 예제가 있으면 다시 가져오겠습니다.

with-sentry 예제가 최근에 업데이트되었습니다.

@timneutkens 내가 @sentry/node 어딘가에 사용할 것입니다.

@sheerun 저도 같은 문제를 @sentry/node 를 사용하는 것은 쉬운 일이 아닙니다. 이 Sentry 예제의 추가 정보는 내가 작업 중인 애플리케이션에 이미 있는 사용자 정의 서버 사용을 제안합니다. 사용자 지정 Express.js 서버에서 예외를 캡처하려면 Sentry 오류 처리기 미들웨어 오류 를 첫 번째 오류 처리 미들웨어 로 삽입해야 합니다. 다음 핸들러 바로 뒤에 Sentry의 오류 핸들러를 삽입하면 해당 지점에서 이미 오류를 삼켜 버렸고 Sentry는 이를 볼 수 없습니다.

getInitialProps 의 _error.js getInitialProps @sentry/browser 에서 @sentry/browser 에 서버 측 지원이 있어야 하는지 모르겠지만 Sentry에 이벤트를 받고 있습니다.

사용자 정의 Express 서버의 항목 파일에서 @sentry/node Sentry.init() 를 통해

다음은 내가 사용하는 설정의 요지입니다. https://gist.github.com/mcdougal/7bf001417c3dc4b579da224b12776691

흥미로운!

여기에는 확실히 일종의 글로벌 상태가 있습니다(약간 무섭고 아마도 부서지기 쉽고 바람직하지 않음). _error.js 변경 사항 적용:

• 커스텀 서버에서 Sentry를 구성하지 않고__:
  
  
  
  • 개발 모드 또는 프로덕션(예: 내 앱 빌드)에서 실행할 때 서버 측 오류가 발생하면 Sentry에 아무 것도 보고되지 않지만 서버 로그에 ReferenceError: XMLHttpRequest is not defined 오류가 발생합니다.
  
  
• __구성 후__ 사용자 지정 서버의 Sentry:
  
  
  
  • 내 서버 측 예외가 보고되지만 Sentry에 이상한 Error: Sentry syntheticException 기록됩니다.
  
  

공식적인 해결책이 무엇인지 이해하는 것이 좋을 것입니다. Next의 문서는 지금 사용자 정의 <App> 구성 요소를 사용하는 것을 권장하는 것 같으며 이것이 "with Sentry" 예제가 하는 일이지만 이것은 클라이언트 측에서만 작동합니다.

오류 보고는 앱이 처음 렌더링될 때까지 발생하지 않습니다. 다음은 예를 들어 페이지를 렌더링할 때 이전에 실패할 수 있습니다. 앱이 서버 측에서 처음 렌더링된 후 어떤 경우에는 우연히 작동할 수도 있지만 완전한 솔루션은 아닙니다.

with-sentry 예제는 @timneutkens에서도 작동하지 않습니다. 프로젝트를 실행하고 실제 DSN으로 테스트하면 400 응답이 나오고 센트리(api 버전 7)에는 아무 것도 전달되지 않습니다.

{"error":"Bad data reconstructing object (JSONDecodeError, Expecting value: line 1 column 1 (char 0))"}

@mcdougal 은 나를 위해 작동하지 않았습니다. 클라이언트에게 어떻게든 버블링되는 전역 서버 측 설정을 갖는 것은 이미 그다지 좋지 않았지만, 그 해킹으로도 센트리 301 응답을 받을 것입니다.

옵션이 많지 않고 여러 프로젝트에서 실행되기 때문에 내 센트리 자체 호스팅 설정이 어떻게 잘못 구성될 수 있는지 알 수 없습니다.

나는 with-sentry 예제에서 권장하는 것과 같은 방식으로 @sentry/browser 를 사용하고 있으며 서버와 클라이언트 모두에서 내 센트리로 오류를 보내는 것 같습니다. 특별한 구성은 없으며 예제와 동일한 코드만 있습니다.

@Jauny 서버에서 보내는

@timrogers 네, 정말 제 잘못입니다. 테스트한 오류가 서버에서 온다고 가정했지만 실제로는 클라이언트에서 발생했습니다.

현재 예제 with-sentry는 getInitialProps에서 throw된 오류를 catch하지 않는 것 같습니다. 응용 프로그램의 렌더링 트리에 있는 오류일 뿐입니다. 제 경우에는 대부분의 오류가 getInitialProps에서 발생합니다.

@sheerun 위의 mcdougal 해결 방법 을 시도해 볼 수 있습니까? 완벽하지는 않지만(이상한 합성 센트리 오류) 모든 오류가 발생한다는 인상을 받고 그것이 사실이 아닌지 알고 싶습니다. 그것이 사실이라면, with-sentry 예제는 아마도 Next.js가 그것을 더 잘 수행하는 방법에 대해 조언할 수 있을 때까지 업데이트해야 할 것입니다(이상적으로는 server.js 센트리 오류 처리기를 건너뛰지 않도록 만드는 것이 이상적입니까?).

두 가지 주요 문제로 작동하는 것 같습니다.

1. 비동기 서버 측 코드가 불필요하게 재생성 코드로 컴파일되기 때문에 프로덕션의 서버 측 스택 추적은 종종 internal/process/next_tick.js에서 잘리고 오류의 원인이 전혀 표시되지 않습니다.
2. 다음 요청 핸들러가 호출되기 전에 오류가 발생하면 오류 처리가 작동하지 않습니다(예: 사용자 정의 서버 코드에서)

실제로 사용자 정의 오류의 getInitialProps를 추가로 테스트한 후 어떤 이유로 인해 사용자 정의 _app의 getInitialProps 내부에서 오류가 발생하면 프로덕션 환경에서도 실행되지 않습니다.

예, 며칠 동안 시도한 후 확실히 이상한 행동이 나타났습니다. 우리가 직면한 주요 문제는 다음과 같습니다.

1. CSR의 경우 @sentry/browser 및 SSR의 경우 @sentry/node 가져오기
2. CSR과 SSR 모두에 대해 항상 트리거되는 오류 처리를 넣을 위치 찾기

나는 #1 를 해결하기 위해 지연 가져오기 및 전역 상태를 사용하려고 생각했습니다.

const sentryInitialized = false;

# Inside some trigger point
const Sentry = ssr ? eval(`require('@sentry/node')`) : eval(`require('@sentry/browser')`);
if (!sentryInitialized) {
  Sentry.init({dsn: SENTRY_DSN});
}
Sentry.captureException(err);

아마도 Next의 동적 가져오기를 사용할 수 있지만 아직 익숙하지 않습니다. 또한 오류 처리 코드가 트리거될 때마다 require 를 호출하는 것이 미치는 영향도 잘 모르겠습니다. 이 시도를 하면/때 업데이트하겠습니다.

#2 문제에 관해서는 다음과 같은 가능성이 있습니다.

1. _app.componentDidCatch , SSR에 대해 실행되지 않음
2. _error.getInitialProps , 많은 문제가 있습니다.
3. ...다른 것? 다음 서버 핸들러 기능에서 SSR을 위해 우리가 할 수 있는 일이 있습니까?

내 직감으로는 다음보다 먼저 Sentry의 오류 처리기를 주입하여 서버에서 이 작업을 수행할 수 있는 방법이 있을 것이라고 생각하지만 아직 시도해보지는 않았습니다.

현재 Next는 그렇게 하는 데 도움이 되는 후크를 제공하지 않습니다. 이것이 작동하는 것을 발견하면 추가할 수 있습니다 👌

하지만 Next가 너무 일찍 잡기 때문에 이것이 작동하지 않을 위험이 있습니다.

@mcdougal 아 &#!% 귀하의 해결 방법이 우리를 프로덕션에 투입하는 데 필요한 센트리 클라이언트/서버 범위를 확인하기에 충분했을 때 정말 기뻤습니다.

내 완전한 무지를 용서하지만 nodejs 보초 오류 처리기가 첫 번째가되도록 조건부로 오류 처리기를 비활성화 할 수 있도록 다음이 필요합니까? "disableErrorHandler"라는 next.config.js의 일부 플래그가 있습니까?

@Enalmada 멋진 오류 페이지를 렌더링하는 것이기 때문에 다음 오류 처리기를 비활성화하고 싶지 않다고 생각합니다. 그 앞에 다른 미들웨어를 삽입하기만 하면 됩니다. 나는 그것이 효과가 있을 것이라고 생각하지만 나는 그것을 시도해야 한다.

이 문제가 해결되었음에도 불구하고 클라이언트 측 오류 처리가 기대만큼 잘 작동하는 것 같지 않습니다.

이 모든 문제는 부끄러운 일이며 프로덕션에서 Next를 안전하게 실행하는 데 방해가 됩니다.

참고로 저는 @sentry/node 모든 곳에서 가져오고 다음을 next.config.js에 넣습니다.

        if (!isServer) {
          config.resolve.alias['@sentry/node$'] = '@sentry/browser'
        }

@mcdougal의 eval 보다 나을 수 있습니다.

다음은 사용자 지정 _app 구성 요소 및 오류 처리에 대한 추가 참고 사항입니다.

1. _app.js 는 _error.js 또는 404와 같은 페이지를 포함한 모든 페이지에 사용되므로 ctx.err 가 전달될 때 오류가 발생하지 않는지 확인하고 싶습니다.
2. _error.js getInitialProps가 호출되는 것을 방지하므로 앱의 getInitialProps에서 Component.getInitialProps를 호출하는 것을 잊지 마십시오( ctx.err 가 있더라도 호출).

class MyApp extends App {
  static async getInitialProps (appContext) {
    const { Component, ctx } = appContext
    if (ctx.err) {
      if (Component.getInitialProps) {
        pageProps = await Component.getInitialProps(ctx)
      }
      return { error: true, pageProps }
    }
    // here code that can throw an error, and then:
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }
    return { pageProps }
  }
  render() {
    if (this.props.error) return super.render()
    // rest of code that can throw an error
  }
}

지금까지 next.js에서 오류 보고를 올바르게 설정하는 것은 매우 취약한 절차입니다.

올바른 방향을 향한 좋은 정거장처럼 보이는 @sheerun 에게 감사드립니다. 나는 다음의 오류 처리가 지금 최적이 아니라는 데 동의합니다. 오류 처리 등을 추가할 수 있도록 일부 확장 가능한 모듈/미들웨어가 추가되는 것을 보는 것이 좋을 것입니다.

Sentry와 같은 동형 라이브러리의 부족은 또한 문제를 복잡하게 만들고 있습니다. 이는 구성 요소에서 두 라이브러리를 간단하게 가져올 수 없음을 의미하기 때문에 런타임에 동적으로 수행하여 오류가 서버 측이나 브라우저 측에서 발생하는지 항상 확인해야 합니다.

이 문제에 대한 업데이트가 있습니까? 지금까지 시도한 것은 다음과 같습니다. 모든 추적 코드를 _app.js로 옮겼습니다.

constructor(args: any) {
        super(args)
        Sentry.init({
            dsn: 'blah',
            environment: 'local',
        })
        Sentry.configureScope(scope => {
            scope.setTag('errorOrigin', isServer ? 'SSR' : 'Client')
        })
    }

    static async getInitialProps({ Component, router, ctx }: any) {
        let pageProps = {}

        try {
            if (Component.getInitialProps) {
                pageProps = await Component.getInitialProps(ctx)
            }
        } catch (error) {
            // console.log('we caught an error')
            console.log(error)
            Sentry.captureException(error)
            throw error
        }

        return { pageProps }
    }

server.js에서 @sheerun에서 next.config.js 추가 및 초기화 보초과 함께 너무 if (!isServer) { config.resolve.alias['@sentry/node$'] = '@sentry/browser' }
이것은 클라이언트 측의 모든 오류를 추적하는 것처럼 보이지만 서버 측에서는 서버를 다시 시작한 후 발생하는 첫 번째 오류만 추적하는 것으로 보입니다. 그러나 서버의 이후 오류는 추적되지 않습니다. 이 접근 방식을 사용하면 로그에 SyntheticErrors가 없고 실제 오류만 있습니다.

여전히 이것은 나에게 꽤 해커처럼 느껴지고 서버 측 추적은 처음에만 작동하기 때문에 여전히 사용할 수 없습니다.

또한 with-Sentry 예제에서 이 부분을 추가했습니다.

    componentDidCatch(error: any, errorInfo: any) {
        // if (process.env.FIAAS_NAMESPACE !== undefined) {
        Sentry.configureScope(scope => {
            Object.keys(errorInfo).forEach(key => {
                scope.setExtra(key, errorInfo[key])
            })
        })
        Sentry.captureException(error)
        console.log('componentDidCatch')

        // This is needed to render errors correctly in development / production
        super.componentDidCatch(error, errorInfo)
        // }
    }

그러나 이것이 필요한지 완전히 확실하지 않습니다.

제 경우에는 문제 없이 작동합니다. 또한 센트리를 초기화해서는 안 됩니다.
_app.js 생성자이지만 완전히 이 클래스 외부에 있음

2018년 11월 21일 수요일 오후 2시 53분에 abraxxas [email protected]에서 다음과 같이 썼습니다.

이 문제에 대한 업데이트가 있습니까? 내가 지금까지 시도한 것은 다음과 같습니다.
모든 추적 코드를 _app.js로 이동했습니다.

`
생성자(인수: 모두) {
슈퍼(인수)
Sentry.init({
dsn: '하하',
환경: '로컬',
})
Sentry.configureScope(범위 => {
scope.setTag('errorOrigin', isServer ? 'SSR' : '클라이언트')
})
}

정적 비동기 getInitialProps({ 구성 요소, 라우터, ctx }: 모든) {
let pageProps = {}

try {
    if (Component.getInitialProps) {
        pageProps = await Component.getInitialProps(ctx)
    }
} catch (error) {
    // console.log('we caught an error')
    console.log(error)
    Sentry.captureException(error)
    throw error
}

return { pageProps }

}

`

@sheerun의 next.config.js 추가와 결합
https://github.com/sheerun 및 server.js에서 보초를 초기화하는 경우에도
(!isServer) { config.resolve.alias['@sentry/node$'] = '@sentry/browser' }
이것은 클라이언트 측의 모든 오류를 추적하는 것처럼 보이지만 서버 측에서는
다시 시작한 후에 발생하는 첫 번째 오류만 추적하는 것으로 보입니다.
섬기는 사람. 그러나 서버의 이후 오류는 추적되지 않습니다. 이것으로
접근 방식 나는 로그에 SyntheticErrors가 없지만 실제 오류만 있습니다.

여전히 이것은 나에게 꽤 해키하게 느껴지고 서버 측 추적이
처음에만 작동하지만 여전히 사용할 수 없습니다.

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/zeit/next.js/issues/1852#issuecomment-440668980 또는 음소거
스레드
https://github.com/notifications/unsubscribe-auth/AAR2DeIhoOj6PdWRA2VqiEZyrO5Jui8vks5uxVrHgaJpZM4NOQlp
.

나는 이미 그것을 옮기려고 시도했지만 여전히 같은 행동입니다. @sheerun 설정에 대한 최소한의 요점을 게시할 수 있습니까? 당신이 제공한 스니펫으로 설정을 시도했지만 작동하지 않습니다. 내가 다소 간단한 작업이라고 예상했던 것에 비해 모든 것이 너무 복잡해 보입니다.

공식 센트리 예제를 업데이트하고 싶지만 "너무 복잡하다"는 이유로 거부될까 두렵습니다. 그래도 시간이 나면 게시해 보려고 합니다.

@sheerun 공식 예제로 업데이트하려는 시도조차 큰 가치가 있습니다. Sentry ssr이 SyntheticErrors 없이 작동하거나 발생한 첫 번째 서버 오류만 기록하는 데 필요한 최소 복잡성이라면 병합될 것이라고 생각합니다. 그런 다음 거기에서 더 나은 방법으로 만들거나 nextjs 핵심 개선 또는 센트리 동형 지원을 추진하는 방법을 알아낼 수 있습니다.

자.. https://github.com/zeit/next.js/pull/5727

이제 필연적으로 복잡한 작업 예제가 있으므로 상황을 개선하기 위한 다음 단계는 무엇입니까?

• 열린 센트리 문제에 무게를 둡니다(누락된 것이 있습니까?):
  https://github.com/getsentry/sentry-javascript/issues/1762#issuecomment -442778751
  https://github.com/getsentry/sentry-javascript/issues/1622
  https://github.com/getsentry/sentry-javascript/issues/951
• @sheerun 은 서버 및 앱용 플러그인을 만드는 next.js 지원이 도움이 될 수 있다고 언급했습니다. 어딘가에 초점을 맞춘 기능 티켓이 있습니까?
• nextjs 팀은 오류에 더 쉽게 접근할 수 있는 방법을 도와줄 수 있습니다.
  https://github.com/zeit/next.js/issues/1852#issuecomment -337573921
  https://github.com/zeit/next.js/issues/1852#issuecomment -427124032

next.js에서 필요한 유일한 것은 범용(동형) 플러그인 구성을 위해 next.config.js에 커스텀 미들웨어를 추가하고 next.browser.js와 같은 것을 추가하는 기능입니다(next.config.js는 webpack 구성을 위해 다른 것들 사이에서 사용되며, 이는 순환 종속성을 유발하므로 이 파일에 정의된 다른 항목을 애플리케이션 코드에서 사용할 수 없음을 의미합니다.

next.browser.js의 경우 next.js는 앱 또는 문서 구성 요소에 대한 데코레이터와 같은 구성을 정의할 수 있습니다. 이렇게 하면 센트리 통합을 완전히 플러그인으로 구현할 수 있습니다.

편집: 이에 대한 티켓이 있는지 여부는 모르겠지만 @timneutkens 가 이미 다음 서버를 별도의 패키지로 추출하고 있다고 생각합니다. 최고의 플러그인 인터페이스는 다음과 같습니다.

module.exports = {
  server: server => {
    server.use(Sentry.Handlers.errorHandler())
  }
}

#6922에서 이러한 API의 제안을 구현했습니다.

컨트랙트가 .listen() 자동으로 호출하지 않는 것으로 변경되어 사용자 정의 서버 코드에 데코레이터를 추가할 수 있으므로 next.js가 인스턴스화하기 전에 더 데코레이션할 수 있습니다.

with-sentry 예제를 사용하는 데 많은 문제가 있었기 때문에 훨씬 더 간단한 예제를 위해 PR을 열었습니다. 그것은 모든 종과 휘파람을 가지고 있지 않지만 그것은 나를 위해 일하고 있습니다.

https://github.com/zeit/next.js/pull/7119

사용자 정의 _document.js 에서 이것을 시도하십시오.

import React from "react";
import Document, {
  Html,
  Head,
  Main,
  NextScript,
} from "next/document";
import { NodeClient } from "@sentry/node";

const { default: getConfig } = require("next/config");
const { publicRuntimeConfig: { sentryDSN } } = getConfig();

let sentry = null;
if (sentryDSN) {
  sentry = new NodeClient({ dsn: sentryDSN });
}

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    if (ctx.err && sentry) sentry.captureException(ctx.err);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

그리고 이것은 사용자 정의 _app.js :

import * as Sentry from "@sentry/browser";

const { default: getConfig } = require("next/config");
const { publicRuntimeConfig: { sentryDSN } } = getConfig();

if (sentryDSN) {
  Sentry.init({ dsn: sentryDSN });
}

도움이 됩니다.

현재 next.js에 대한 오류를 잡는 올바른 위치가 무엇인지 매우 혼란스럽습니다. _app.tsx, _error.tsx 및 _document.tsx가 있습니다. 일부 항목은 _error.tsx에서 포착되어야 한다는 의견이 있습니다(예: https://github.com/zeit/next.js/pull/5727/files #r235981700) 그러나 현재 예제에서는 _app.tsx 또는 _app 및 _document를 사용합니다.

지금 두 가지 방법을 모두 시도했는데 ssr 중에 발생하는 일부 오류가 저에게 잡히지 않는 것 같습니다. 이제 어떤 장소가 오류를 확인하기에 올바른 장소입니까? 나에게 가장 논리적인 것은 _app의 componentDidCatch와 _error의 getInitialProps를 확인하는 것 같습니다. 이것은 오류의 경우에 제공되기 때문입니다. _document의 전체 process.on 부분에 대해 약간 혼란스럽습니다.

더 깊이 있는 지식을 가진 사람이 이 질문을 해결해 주시겠습니까?

@abraxxas process.on in _document.js 은 서버에서 발생하는 오류를 포착하고 있습니다. 요약하자면,

• _document.js 는 _서버측 전용_이며 초기 서버측 렌더링 문서 마크업을 변경하는 데 사용됩니다.
• _app.js 는 _클라이언트 측 전용_이며 페이지를 초기화하는 데 사용됩니다.

따라서 서버에서 오류가 발생하면 process.on 를 통해 Sentry에 오류를 던지고 클라이언트는 기본 오류 페이지 또는 _error.js 렌더링합니다.

이것이 도움이 되기를 바랍니다: https://leerob.io/blog/configuring-sentry-for-nextjs-apps/

_app.js는 클라이언트 측 전용이 아니지만 componentDidCatch 는

@timneutkens 좋아, 그것은 내 두뇌를 약간 주름지게합니다. 문서는 내가 마지막으로 본 이후 로 업데이트된 것 같습니다 . _app.js 가 클라이언트 측이 아닌 방법을 좀 더 자세히 설명해 주시겠습니까?

@timneutkens 오류가 발생하는 위치와 이유를 설명해 주시겠습니까? 의견이 너무 많은 것 같습니다.

@timneutkens 좋아, 그것은 내 두뇌를 약간 주름지게합니다. 문서는 내가 마지막으로 본 이후 로 업데이트된 것 같습니다 . _app.js 가 클라이언트 측이 아닌 방법을 좀 더 자세히 설명해 주시겠습니까?

안녕하세요 리롭입니다!
방금 귀하의 예에 대한 병합 요청에 대한 질문을 게시했습니다.
https://github.com/zeit/next.js/pull/7360#issuecomment -514318899

그 질문에 추가하여 ... 나는 또한 서버 측의 render()에서 오류를 발생시키려고 시도했습니다(저는 raiseErrorInRender: true로 상태를 시작했으므로 서버 측인 첫 번째 렌더링은 이미 오류를 던질 것입니다). 그 오류도 Sentry에 의해 포착되지 않았습니다.

애플리케이션에서 이를 테스트했으며 서버 측 오류가 실제로 캡처되고 있습니까? 넥스트9 사용중입니다.

그것이 사실이고 클라이언트 측 오류만 캡처되는 경우 _document.js 파일을 재정의할 이유도 없습니다.

도움을 주셔서 미리 감사드립니다!

@timneutkens 좋아, 그것은 내 두뇌를 약간 주름지게합니다. 문서는 내가 마지막으로 본 이후 로 업데이트된 것 같습니다 . _app.js 가 클라이언트 측이 아닌 방법을 좀 더 자세히 설명해 주시겠습니까?

귀하의 질문에 답하면 _app은 페이지를 초기화하기 위해 앱 구성 요소가 정의된 곳입니다. 페이지 변경 간에 레이아웃을 유지해야 하는 경우(모든 페이지에서 동일한 _app 사용) 또는 redux를 사용하는 경우와 같은 경우 이를 재정의합니다. 따라서 서버 측에서 발생하는 첫 번째 렌더링이라도 _app의 콘텐츠를 렌더링합니다(클라이언트 측에서만이 아님).

그 질문에 추가하여 ... 나는 또한 서버 측의 render()에서 오류를 발생시키려고 시도했습니다(저는 raiseErrorInRender: true로 상태를 시작했으므로 서버 측인 첫 번째 렌더링은 이미 오류를 던질 것입니다). 그 오류도 Sentry에 의해 포착되지 않았습니다.

해당 오류가 센트리에 표시되도록 다른 방법으로 관리했습니까? _error의 getInitialProps에서 캡처를 시도했지만 센트리에는 아무 것도 표시되지 않습니다. 현재 저는 서버에서 오류를 캡처하는 신뢰할 수 있는 방법을 찾지 못했습니다. 그 중 일부(대부분 API 오류에 연결된 경우)가 표시되지만 errortestpage에서 간단한 오류가 발생하여 센트리에 표시되지 않았습니다.

그 질문에 추가하여 ... 나는 또한 서버 측의 render()에서 오류를 발생시키려고 시도했습니다(저는 raiseErrorInRender: true로 상태를 시작했으므로 서버 측인 첫 번째 렌더링은 이미 오류를 던질 것입니다). 그 오류도 Sentry에 의해 포착되지 않았습니다.

해당 오류가 센트리에 표시되도록 다른 방법으로 관리했습니까? _error의 getInitialProps에서 캡처를 시도했지만 센트리에는 아무 것도 표시되지 않습니다. 현재 저는 서버에서 오류를 캡처하는 신뢰할 수 있는 방법을 찾지 못했습니다. 그 중 일부(대부분 API 오류에 연결된 경우)가 표시되지만 errortestpage에서 간단한 오류가 발생하여 센트리에 표시되지 않았습니다.

불행히도. 내가 구현할 것이라고 생각하는 솔루션은 클라이언트 측에서 발생하는 오류를 캡처하는 템플릿으로 예제(재정의된 _document.js 파일 제외)를 사용하는 것입니다. 사용자가 나에게 보고하지 않는 한 알고 있습니다. 서버 측에서는 모든 로그 라인을 로그 파일로 직접 리디렉션할 것이라고 생각합니다. 동일한 위치에 모든 오류가 있기를 원했기 때문에 그것은 확실히 최선의 해결책은 아니지만 그렇게 하면 최소한 응용 프로그램에서 발생할 수 있는 오류에 대한 정보를 갖게 됩니다.

그것에 대해 어떻게 생각하세요? 감사 해요!

그 질문에 추가하여 ... 나는 또한 서버 측의 render()에서 오류를 발생시키려고 시도했습니다(저는 raiseErrorInRender: true로 상태를 시작했으므로 서버 측인 첫 번째 렌더링은 이미 오류를 던질 것입니다). 그 오류도 Sentry에 의해 포착되지 않았습니다.

해당 오류가 센트리에 표시되도록 다른 방법으로 관리했습니까? _error의 getInitialProps에서 캡처를 시도했지만 센트리에는 아무 것도 표시되지 않습니다. 현재 저는 서버에서 오류를 캡처하는 신뢰할 수 있는 방법을 찾지 못했습니다. 그 중 일부(대부분 API 오류에 연결된 경우)가 표시되지만 errortestpage에서 간단한 오류가 발생하여 센트리에 표시되지 않았습니다.

불행히도. 내가 구현할 것이라고 생각하는 솔루션은 클라이언트 측에서 발생하는 오류를 캡처하는 템플릿으로 예제(재정의된 _document.js 파일 제외)를 사용하는 것입니다. 사용자가 나에게 보고하지 않는 한 알고 있습니다. 서버 측에서는 모든 로그 라인을 로그 파일로 직접 리디렉션할 것이라고 생각합니다. 동일한 위치에 모든 오류가 있기를 원했기 때문에 그것은 확실히 최선의 해결책은 아니지만 그렇게 하면 최소한 응용 프로그램에서 발생할 수 있는 오류에 대한 정보를 갖게 됩니다.

그것에 대해 어떻게 생각하세요? 감사 해요!

그것이 바로 우리가 지금 하고 있는 일입니다. 약간 투박하지만 우리가 할 수 있는 최선입니다. 그러나 일부 서버 측 오류가 우리를 위해 sentry에 표시되기 때문에 sentry 또는 next.js에서 뭔가 진행 중인 것이 틀림없다고 생각합니다. 나는 간단한 예제와 더 복잡한 예제를 모두 시도했고 둘 다 동일하게 동작하므로 이 동작이 우리의 설정과 관련이 없다고 적어도 어느 정도 확신합니다.

이 스레드의 사람들은 https://github.com/zeit/next.js/pull/8684 및 관련 버그에 관심이 있을 수 있습니다. Next.js가 처리하는 예외와 처리하지 않는 예외를 이해하기 위해 사용할 수 있는 처리되지 않은 예외에 대한 12가지 다른 테스트가 있습니다.

이 문제에 대한 소식이 있습니까?

내 솔루션은 redux 사용하여 state 에 노드 가져오기 데이터 오류를 저장합니다. 。그런 다음 componentDidMount 의 _app.js 조치를 취하는 것입니다(사용자에 대한 경고 또는 오류 요청 요청 백엔드로).
코드는 next-antd-scaffold_server-error 에 있습니다.

========> 상태

import {
  SERVER_ERROR,
  CLEAR_SERVER_ERROR
} from '../../constants/ActionTypes';

const initialState = {
  errorType: []
};

const serverError = (state = initialState, { type, payload }) => {
  switch (type) {
    case SERVER_ERROR: {
      const { errorType } = state;
      errorType.includes(payload) ? null : errorType.push(payload);
      return {
        ...state,
        errorType
      };
    }
    case CLEAR_SERVER_ERROR: {
      return initialState;
    }
    default:
      return state;
  }
};

export default serverError;

=======> 액션

import {
  SERVER_ERROR
} from '../../constants/ActionTypes';

export default () => next => action => {
  if (!process.browser && action.type.includes('FAIL')) {
    next({
      type: SERVER_ERROR,
      payload: action.type 
    });
  }
  return next(action);
};

=======> _app.js

...
componentDidMount() {
    const { store: { getState, dispatch } } = this.props;
    const { errorType } = getState().serverError;
    if (errorType.length > 0) {
      Promise.all(
        errorType.map(type => message.error(`Node Error, Code：${type}`))
      );
      dispatch(clearServerError());
    }
  }
...

https://github.com/zeit/next.js/issues/1852#issuecomment -353671222 덕분에 서버 측 롤바 오류 보고 작업 예제를 얻었습니다.

_unortodox_ 솔루션을 사랑해야 합니다.

function installErrorHandler(app) {
  const _renderErrorToHTML = app.renderErrorToHTML.bind(app)
  const errorHandler = rollbar.errorHandler()

  app.renderErrorToHTML = (err, req, res, pathname, query) => {
    if (err) {
      errorHandler(err, req, res, () => {})
    }

    return _renderErrorToHTML(err, req, res, pathname, query)
  }

  return app
}
// ¯\_(ツ)_/¯

404 오류가 발생하면 err 인수가 null이 되기 때문에 이 방법을 404 오류에 적용할 수 없습니다.

Elastic APM 노드 클라이언트(https://www.npmjs.com/package/elastic-apm-node)에 대해 이것을 해결했습니다.

관심 있는 사람:

next.config.js :

webpack: (config, { isServer, webpack }) => {
      if (!isServer) {
        config.node = {
          dgram: 'empty',
          fs: 'empty',
          net: 'empty',
          tls: 'empty',
          child_process: 'empty',
        };

        // ignore apm (might use in nextjs code but dont want it in client bundles)
        config.plugins.push(
          new webpack.IgnorePlugin(/^(elastic-apm-node)$/),
        );
      }

      return config;
} 

그런 다음 _error.js render func에서 captureError를 수동으로 호출할 수 있습니다.

function Error({ statusCode, message, err }) {

const serverSide = typeof window === 'undefined';

  // only run this on server side as APM only works on server
  if (serverSide) {
    // my apm instance (imports elastic-apm-node and returns  captureError)
    const { captureError } = require('../src/apm'); 

    if (err) {
      captureError(err);
    } else {
      captureError(`Message: ${message}, Status Code: ${statusCode}`);
    }
  }

}

모두 안녕! Express 서버를 추가하지 않고 Next.js에서 Express 스타일 아키텍처용 NPM 라이브러리를 시작했습니다. 서버 오류 처리 문제에 도움이 될 수 있습니다! 관심이 있다면 확인하십시오. https://github.com/oslabs-beta/connext-js

누구나 getServerSideProps 에서 발생하는 예외를 성공적으로 포착(및 처리)했습니까?

누구나 getServerSideProps 에서 발생하는 예외를 성공적으로 포착(및 처리)했습니까?

불명확합니다. 프레임워크가 클라이언트와 서버 모두에서 오류를 기록하는 관용적인 방법을 제공할 것이라고 생각할 것입니다 🤷‍♂️

누구나 getServerSideProps 에서 발생하는 예외를 성공적으로 포착(및 처리)했습니까?

@stephankaag

예, 다음과 같은 것이 저에게 효과적이었습니다.

먼저 충돌 보고를 처리하는 미들웨어를 만듭니다. Sentry 를 반환하는 것은 작동하지 않기 때문에 CrashReporter 클래스 안에 Sentry 래핑했습니다(예: req.getCrashReporter = () => Sentry ).

// crash-reporter.js

const Sentry = require("@sentry/node");

class CrashReporter {
  constructor(){
    Sentry.init({ dsn: process.env.SENTRY_DSN });
  }
  captureException(ex){
    return Sentry.captureException(ex);
  }
}

function crashReporterMiddleware(req, res, next) {
  req.getCrashReporter = () => new CrashReporter();
  next();
}

module.exports = crashReporterMiddleware;

다음은 물론 Next.js 요청 핸들러가 설정되기 전에 앱에 미들웨어를 로드합니다.

// server.js

const crashReporterMiddleware = require("./middleware/crash-reporter")

...

app.use(crashReporterMiddleware);

...

setHandler((req, res) => {
  return handle(req, res);
});

getServerSideProps 를 호출할 때마다 :

// _error.js

export async function getServerSideProps({req, res, err}) {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
  const crashReporter = req.getCrashReporter();
  const eventId = crashReporter.captureException(err);
  req.session.eventId = eventId;
  return {
    props: { statusCode, eventId }
  }
}