Как загрузить исходные карты в Sentry с помощью Next.js

В настоящее время каждое современное веб-приложение использует платформы, обеспечивающие мониторинг ошибок в режиме реального времени. У них есть поддержка разных языков и технологий. И это здорово, потому что качество разработки растет с каждым годом.

Я большой поклонник инструментов, которые помогают моей команде мгновенно реагировать на ошибки и сбои и исправлять их как можно скорее. Это необходимо, когда вы создаете стартап и пытаетесь показать своим клиентам лучший сервис. Например, раньше мы отслеживали ошибки внешнего интерфейса в Airbrake и исправили повторяющиеся сбои в мобильном браузере Safari. Это была большая победа, потому что я начал ненавидеть эту проблему (каждый сталкивался с этой проблемой, которая стоила ему много часов, чтобы найти решение). Недавно моя команда приняла решение перенести наши интерфейсные проекты с Airbrake на Sentry. И, как и многие другие разработчики, я мучился с загрузкой исходных карт туда.

Я думаю, что следующие решения могут помочь тем, у кого в проектах есть версии ~Next.js@12 и ~@sentry/nextjs@7.3+.

Решение 1

Если вы видите уведомление, подобное показанному на рисунке ниже, на странице задачи в Sentry, не волнуйтесь. @sentry/nextjs пропустил загрузку некоторых исходных карт для файлов, сгенерированных Next.js. В моем случае это были ошибки, связанные с фреймворком/основными файлами.

Небольшое пояснение: когда Sentry реагирует на какую-либо ошибку или событие, он пытается получить исходные карты из загруженного им архива release. Согласно обсуждению проблемы на GitHub, код фреймворка больше не загружается по умолчанию, и Sentry не имеет доступа ко всем файлам для разрешения трассировки стека.

Взгляните на это примечание из документации по ручной настройке Sentry:

Если вы обнаружите, что в ваших трассировках стека на стороне клиента есть фреймы внутри приложения, которые не сопоставляются с исходным кодом, даже когда большинство других сопоставляются, вероятно, потому, что они из файлов в static/chunks/< /code>, а не static/chunks/pages/. По умолчанию такие файлы не загружаются, потому что большинство файлов в static/chunks/ содержат только Next.js или сторонний код и названы так, что их трудно различить. между релевантными файлами (содержащими ваш код) и нерелевантными.

// next.config.js
module.exports = withSentryConfig(
  {
    ...yourNextConfig,
    sentry: {
       widenClientFileUpload: true,
    }
  },
  {
    ...yourWebpackSentryConfig,
    ignore: [],
  },
  yourSentryConfig,
);

npm install --save @sentry/integrations

import { RewriteFrames } from '@sentry/integrations';

Sentry.init({
  ...yourSentryClientConfig,
  integrations: [
    ...yourSentryClientConfig.integrations,
    new RewriteFrames({
      iteratee: frame => {
        frame.filename = frame.filename.replace(distDir, 'app:///_next');
        // here we are decoding our square brackets []
        frame.filename = decodeURI(frame.filename);
        return frame;
      },
    }),
  ],
});