Vercelとreact-adminを組み合わせるとrangeヘッダでエラーが出るので注意
React Adminとnext.jsを組み合わせようとしてハマったのでメモ。
なお、現在このエラーについては問い合わせ中なので、何らか解決される可能性もある 記事下部に追記しました
前提: React Admin
React Adminにおいての標準的なdataProviderのra-data-simple-restを利用する場合、Content-Rangeヘッダをページネーションに利用している。そしてChromeへの対応としてRangeヘッダを飛ばしている。
そもそもRangeヘッダとは
- https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Range
- https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Range
Range は HTTP のリクエストヘッダーで、サーバーが返すべき文書の部分を示します。
とのことで、「いやページネーションにRangeヘッダ使うのどうなのよ」という気持ちが勝ちつつ、好意的に解釈すれば「ページネーションもサーバーの返すべき文章の部分と言えなくもない」、とギリギリ思うことは出来そう
エラーの起きる条件
こちらに今回使うサンプルを配置した。といってもほとんど基本テンプレをts化した程度のものになる
- source: https://github.com/terrierscript/example-range-error
- demo: https://example-range-error.vercel.app/api/hello
ローカルで動かしてみる
これをまずローカルで動かしてみる。これは問題なく動く
$ curl http://localhost:3000/api/hello
{"name":"John Doe"}
次にRangeヘッダをつける。これも当然問題ない
$ curl http://localhost:3000/api/hello -H "Range: foo=0/1"
{"name":"John Doe"}
Vercel上で動かす
まずは普通に動かす。動く
$ curl https://example-range-error.vercel.app/api/hello
{"name":"John Doe"}
次に問題のRangeヘッダ
$ curl https://example-range-error.vercel.app/api/hello -H "Range: foo=0/1"
A server error has occurred
INTERNAL_SERVER_ERROR
コケた。ちなみにFunctionsのログにも何もログが出ず、その手前でコケている可能性が高い
おそらくだがVercel側が処理しようとしてコケているものと思われる。
取り急ぎの対策どうする？
ra-data-json-serverの方であればRangeヘッダを利用してないので、ひとまずこちらを使えば回避できる
追記: Vercel社の回答
下記のような回答を頂いた
I can see that your usage of the Rangeheader is actually incorrect and was able to get a successful response by adjusting the syntax of the header as documented by MDN.
Notice that I get only 10 bytes back in my response when I issue the following request for the byte range of 0 - 10 and don't run into any errors:
「それはRangeヘッダの使い方が正しくないから下記みたいにすれば動くよ。とのこと。
で、ですよね。
$ curl https://example-range-error.vercel.app/api/hello -H "Range: bytes=0-10"
{name: "John Doe"}
Rangeヘッダのunitが正しくない場合は無視してくれると期待してたがそうでない実装はありえそうだ。
幸いReact AdminのDataProviderは選べるので、やはり「Rangeヘッダを利用するData Providerを避ける」というのが無難であろう。
Discussion