React×ReduxでWebアプリを作って、そこにSentryをいれています。
なにかエラーが出たときにReduxのStateとともにログが送信されて非常に便利。

しかしながら、最近エラーの送信時に 413 (Request Entity Too Large) という返ってくるようになりました。

おそらくAPIから獲得したテーブルのデータを全部Redux Stateに入れてるせいで、サイズが大きくなりすぎてしまったのでしょう。
なにか問題が起きたかどうかすら検知できないのは不便が過ぎます。
しかも、エラーの解析をするのにテーブルの中身はほとんど必要ないはず。

Sentryにデータを送るときにStateの中からエラーの解析に必要のないデータを削除して、サイズを小さくして413で怒られないようにしましょう。

方法

たぶん、Sentryを入れてる部分ってこんな感じになってると思います。

import { createStore, applyMiddleware, combineReducers } from 'redux';
import reducer from '../reducers/index';
import Raven from 'raven-js';
import createRavenMiddleware from 'raven-for-redux';
import thunk from 'redux-thunk';

export default function configureStore() {
  Raven.config(SENTRY_KEY).install();
  const middlewares = [thunk, createRavenMiddleware(Raven, {})];

  return createStore(
    combineReducers(assign({}, reducers)),
    applyMiddleware(...middlewares)
  );
}

変更するのはcreateRavenMiddlewareの部分

  const middlewares = [thunk, createRavenMiddleware(Raven, {})];

ここの第2引数にはいろいろとオプションをつけられます。
で、オプションの一つにstateTransformerというStateの変換を行うためのオプションがあるんですね
https://github.com/captbaritone/raven-for-redux/blob/master/README.md#statetransformer-function

このオプションを入れるとこんな感じ

  const middlewares = [thunk, createRavenMiddleware(Raven, {
    stateTransformer: (state) => {
      // いらないデータを消す
      const returnState = state;
      delete returnState.table;
      delete returnState.bigData;
      delete returnState.largeData;
      return returnState;
    },
  })];

これでいらないデータをエラーログに含まないようになり、 413 (Request Entity Too Large) を解消することができました。

注意すべき点

第1引数に入ってくるstateをいじっても、元のstateには何も影響を及ぼさないので、「何かエラーが起きたときにstateを調整して、怪しいデータを削除」みたいなことはできません。

逆にstateを直接書き換えてしまっても問題は起きないということなので、それはそれで安心かも。

同じエラーで困ってる人のお役に立てれば幸い。

Sentryで 413 (Request Entity Too Large) と怒られたので対処（React × Redux）

方法

注意すべき点