Next.js ビルド ログを強化してエラーをより明確に特定する

Next.js エラー ログを強化するためのソリューション - エラー ログとデバッグの改善

Node.js/Next.js 環境用の JavaScript のバックエンド ソリューション。ファイル パス、行番号、リクエスト エラーの詳細に対するエラー トレースのサポートを追加します。

// backend script to improve error logging with exact file paths and request details
const fs = require('fs');
const path = require('path');

// Middleware function for error handling in Next.js (server-side)
const errorHandler = (err, req, res, next) => {
  console.error("Error stack:", err.stack);
  const errorLocation = getErrorLocation(err);
  const logMessage = {
    message: err.message,
    stack: errorLocation,
    url: req.url,
    method: req.method,
    headers: req.headers
  };

  // Log the detailed error
  fs.appendFileSync(path.resolve(__dirname, 'error.log'), JSON.stringify(logMessage) + '\\n');
  res.status(500).json({ error: 'Internal Server Error' });
};

// Helper function to retrieve error location details
function getErrorLocation(error) {
  if (!error.stack) return "No stack trace";
  const stackLines = error.stack.split('\\n');
  return stackLines[1] || stackLines[0]; // Include error line information
}

module.exports = errorHandler;

カスタム エラー境界を使用したクライアント側のエラー レポートの強化によるソリューション

Next.js のフロントエンド React ベースのエラー境界ソリューション。正確なファイル パスをキャプチャし、クライアント側エラーのコンテキストを提供することで、エラーの可視性を向上させます。

// frontend error boundary component in React
import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorInfo: null };
  }

  componentDidCatch(error, errorInfo) {
    this.setState({ hasError: true, errorInfo });
    console.error("Error:", error.message);
    console.log("Error location:", errorInfo.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return <h2>An error occurred. Check logs for details.</h2>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

エラー処理スクリプトの単体テスト - エラーのログと詳細の確認

バックエンド エラー ハンドラー関数の Jest ベースの単体テスト。さまざまな環境間でエラー出力の一貫性をテストします。

// Unit test for errorHandler middleware using Jest
const errorHandler = require('./errorHandler');
const httpMocks = require('node-mocks-http');
const fs = require('fs');

test("Logs error details correctly", () => {
  const req = httpMocks.createRequest({ url: "/test-route", method: "GET" });
  const res = httpMocks.createResponse();
  const next = jest.fn();
  const error = new Error("Test Error");

  errorHandler(error, req, res, next);

  expect(res.statusCode).toBe(500);
  const logFileContent = fs.readFileSync('./error.log', 'utf-8');
  expect(logFileContent).toContain("Test Error");
  expect(logFileContent).toContain("/test-route");
});

Next.js ビルド ログの改善に関するよくある質問

1. ソース マップとは何ですか? Next.js でソース マップはどのように役立ちますか?
2. ソース マップは、縮小またはコンパイルされたコードを元のソース コードに変換して戻すファイルで、開発者が開発中にコード内の特定の行までエラーを追跡するのに役立ちます。 build そして production。
3. Next.js ログにエラーの正確なファイルと行番号を表示するにはどうすればよいですか?
4. でソース マップを有効にすることで、 next.config.js ファイルと設定 custom error handlersを使用すると、エラー ログでより明確なファイル パスと行番号を取得できます。
5. Next.js ログでネットワーク リクエスト エラーをキャプチャできますか?
6. はい、カスタム エラー ハンドラーを次のようなツールと組み合わせて使用​​できます。 Winston または LogRocket 失敗したリクエスト URL、応答コード、エラー メッセージをキャプチャして、各エラーの完全なコンテキストを提供できます。
7. ログ設定をテストする最良の方法は何ですか?
8. などのツールを使用して、ローカルで生産条件をシミュレートします。 Docker コンテナ化された環境でアプリを実行することは、さまざまな設定間でログの信頼性を検証する優れた方法です。
9. エラーをよりよく理解するためにユーザー セッションを再生することは可能ですか?
10. はい、次のようなツールです LogRocket セッションのリプレイを許可すると、エラーが発生する前にユーザーが行ったアクションが簡単に確認できるため、デバッグ プロセスが大幅に役立ちます。
11. ソース マップはアプリのパフォーマンスに影響を与える可能性がありますか?
12. 実行時のパフォーマンスには影響しませんが、ビルド サイズがわずかに増加します。ただし、詳細なエラー追跡の利点を考えると、このトレードオフには通常の価値があります。
13. Next.js でサーバー側とクライアント側の両方のエラーをログに記録するにはどうすればよいですか?
14. の実装 error boundary クライアント側にはカスタム エラー ハンドラーを、サーバー側にはカスタム エラー ハンドラーを使用することは、両端からエラーをキャプチャしてログに記録する効果的な方法です。
15. 構造化ログとは何ですか?なぜ役立つのですか?
16. 構造化ログはログ データを JSON 形式で整理するため、特にクラウドベースのシステムでフィルタリング、検索、監視ツールとの統合が容易になります。
17. Next.js のエラーについて開発者に自動的に警告する方法はありますか?
18. Next.js アプリを次のような監視プラットフォームと統合する Sentry または Datadog エラーに対して自動アラートを提供できるため、応答時間が短縮されます。
19. Next.js を外部ログ サービスで使用できますか?
20. はい、Next.js は次のような外部ログ サービスと統合できます。 Winston サーバー側のログ記録用、または LogRocket フロントエンドでのセッション追跡のため、どちらもログの詳細を強化します。

Next.js でのエラー洞察の改善

Next.js のエラー処理はイライラすることがありますが、ファイル パスとリクエスト データを示す詳細なログを使用すると、デバッグがより効率的になります。これらの手法により、開発者は問題を探すのではなく解決に集中できるようになり、開発時間が短縮され、アプリの安定性が向上します。

ソース マップや構造化エラー ログなどのメソッドを実装すると、ビルドの問題に対する一貫した洞察が得られ、チームがよりスムーズでユーザー フレンドリーなアプリケーションを構築できるようになります。すべてのエラー ログに実用的な情報が提供されると、デバッグは面倒な作業ではなくなり、アプリケーションのパフォーマンスを向上させるための明確な道筋になります。 😄