本文へスキップ
Hironobu Iga

React で GraphQL と Sentry を組み合わせるときに気をつけること

GraphQL のリクエストは全て同一 URL の POST になるため Sentry 上で区別がつかなくなる問題と、apollo-link-sentry での対処、そして出力範囲の注意点です。

公開日

この記事は別サイトにも掲載しています。 https://iganin.hatenablog.com/entry/2021/05/26/230514

tl; dr;

  • GraphQL のリクエストは全て同一の URL となる
  • 通信エラーの場合、Sentry 上では同一 URL となってしまい、operation がわからなくなる
  • 外部の OSS（apollo-link-sentry）を入れて GraphQL のリクエストの中身を見れるようにする

発生する問題

GraphQL のリクエストは基本的には全て同一の URL の POST リクエストになる。（GET リクエストに意図的に変えることも場合によっては可能、たしか）。 Sentry でネットワークエラーを検知した場合、同一の URL となってしまい原因の判別に時間がかかってしまう。

Sentry 上のログ。POST http://localhost:4000 [400] としか出ておらず、どのオペレーションか分からない

画像引用元: apollo-link-sentry

対応

上記の問題に対して解決策を提供するライブラリとして、apollo-link-sentry がある。

DiederikvandenB/apollo-link-sentry - GitHub

導入することによって、上記のリクエストエラーが下記のように表示され、クエリの operation や error の内容を表示させることができる。詳しい導入は GitHub の README を確認するのが良いと思う。

Sentry の breadcrumbs に gql query 名、query 本文、variables、error が展開されている

画像引用元: apollo-link-sentry

注意点

注意点としてどこまでの情報を出力するか、がある。 transaction での出力を有効にしているような場合、エラー以外でも Sentry にログが残る。 ここで、通常のレスポンス内容も出力してしまうと、個人情報が Sentry に乗る可能性もでてきてしまい、security 上非常によろしくない。（場合によっては GDPR にも引っかかる）

apollo-link-sentry では、初期化のタイミングでどの情報を出力させるかを設定できるので、そこで表示する情報を絞る。

new SentryLink(/* See options */);

apollo-link-sentry の options.ts

下記のような設定で良いのではないかと思う。variable には場合によっては個人情報が載る可能性があるので、出力せず、query の内容と error のみ出力するようにする。 そうすると個人情報が載る可能性は抑えられる。

const sentryLink = new SentryLink({
  uri: URL,
  setTransaction: true,
  setFingerprint: true,
  attachBreadcrumbs: {
    includeQuery: true,
    includeVariables: false,
    includeFetchResult: false,
    includeError: true,
    includeCache: false,
  },
});

ただエラーに個人情報を出力させてしまっている場合にはその限りではない。 その場合は option の中にある transform で Sentry に送る前に該当の出力を排除するようにする必要がありそう。

備考

今回は React を例にとったが、Swift、Kotlin などでも同様のはず。 GraphQL とそのエラー検知の組み合わせの場合には、通信の内容が出力されるような工夫が何かしら必要になってくると思う。

※ ライブラリがない場合は Sentry の Breadcrumbs に GraphQL のリクエストの内容を付与して送るような処理を自分で作って、client の link に繋ぐ必要がありそう。

続けて読む