Sentry

Sentry を分かりやすく

Sentryは、チームがソフトウェアの問題を迅速に診断し、解決するのに役立つエラートラッキングツールです。リアルタイムのエラーレポーティングを提供することで、エラーが発生した瞬間に開発者が通知を受け取り、詳細な情報をもとに原因の特定と修正を進めることができます。

例えば、自動車のダッシュボードに似たものと考えるとわかりやすいかもしれません。自動車のダッシュボードには、スピードメーターや燃料計、エンジンの警告灯などがあり、運転手が車の状態を把握し、問題が発生した場合にすぐに対応できるようになっています。Sentryも同様に、アプリケーションのエラー状況をリアルタイムで把握し、問題解決に必要な情報を提供します。

Sentry の歴史的変遷

Sentryは元々、Disqusという会社で内部的に使用されていたツールで、2012年にオープンソースプロジェクトとして公開されました。それ以降、多くの開発者や企業に利用されるようになり、今日では大規模なオープンソースプロジェクトの一つとなっています。

このような成功の背景には、Sentryの技術的な進歩があります。初期のSentryはPythonで書かれていましたが、現在ではさまざまなプログラミング言語やフレームワークに対応しています。また、分散型アーキテクチャの採用により、大量のエラーデータを効率的に処理できるようになりました。

Sentry と Jamstack の関係

Jamstackは静的サイト生成とサーバーレスアーキテクチャを組み合わせたもので、WebサイトやWebアプリケーションを高速に安全に配信することができます。

しかしながら、静的サイトではJSによるクライアントサイドの処理が多くなりがちであり、それがエラーの原因となる場合があります。

ここでSentryの出番です。SentryはフロントエンドのJavaScriptを含む多くのプログラミング言語やフレームワークをサポートしており、Jamstackアーキテクチャで構築されたサイトでもエラー監視を行うことができます。これにより、エラーが発生した場合でもすぐに通知を受け取り、詳細な情報をもとに問題解決を進めることができます。

Sentry を使うメリット

リアルタイムのエラーモニタリング

アプリケーションのエラーをリアルタイムに監視し、エラーが発生した瞬間に通知を受け取ることができます。これにより、問題の早期発見・早期解決が可能となります。

詳細なエラー情報

エラーレポートには、エラーが発生したコードのスタックトレースだけでなく、エラーが発生した環境や時間、ユーザーの情報など、問題解決に必要な詳細な情報が含まれます。

多様なプラットフォームへの対応

Sentryは多くのプログラミング言語やフレームワークをサポートしているため、あらゆる種類のアプリケーションで使用することができます。

Sentry を実装

Next.js と TypeScript を使用した Sentry の導入方法を見てみましょう。

まずは、Sentryをプロジェクトにインストールします。

npm install @sentry/nextjs

次に、Sentryの設定を行います。設定ファイル sentry.client.config.js と sentry.server.config.js をプロジェクトのルートディレクトリに作成します。

// sentry.client.config.js
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: "https://<your-dsn>.ingest.sentry.io/<project-id>",
  // ...
});

// sentry.server.config.js
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: "https://<your-dsn>.ingest.sentry.io/<project-id>",
  // ...
});

さて、これでSentryはNext.jsアプリケーションで利用できるようになりました。設定の dsn は Sentry のプロジェクト設定から取得できます。この dsn を使うことで、アプリケーションのエラーデータが正しいSentryプロジェクトに送信されます。

エラーをキャプチャするために、ある部分のコードを特定してみましょう。

// pages/index.tsx
import { useEffect } from "react";
import * as Sentry from "@sentry/nextjs";

type Props = {
  message: string;
};

const HomePage = ({ message }: Props) => {
  useEffect(() => {
    try {
      // 何かの処理
      throw new Error("Sample error");
    } catch (error) {
      Sentry.captureException(error);
    }
  }, []);

  return (
    <div>
      <h1>Hello Next.js!</h1>
      <p>{message}</p>
    </div>
  );
};

export default HomePage;

このサンプルでは、 useEffect の中でエラーを意図的に投げて、それを Sentry.captureException でキャプチャしています。通常は不具合があった場所で例外をキャプチャします。

Sentry を学ぶ

Sentryを知るうえで役立つリソースを以下に紹介します。

以上がSentryの紹介とNext.jsでの使用例です。アプリケーションのエラーをリアルタイムで監視し、問題解決に必要な情報を提供するSentryは、エラー発生時の対応をよりスムーズにします。その強力なエラートラッキング機能を活用して、アプリケーションの品質向上を目指しましょう。