2017-05-05 5 views
0

私は単一のページアプリケーションで要求を処理する2つの単純なラッパーを持っています。一つはfetchをラップし、応答が(ない200〜300の範囲で)OKでない場合は、エラーがスローされます。シングルページアプリケーションにフェッチエラーがスタックトレースを持たないのはなぜですか?

const fetchy = (...args) => 
    fetch(...args).then(response => { 
    if (response.ok) { 
     return response 
    } 

    throw new Error(response.statusText) 
    }) 

export default fetchy 

そして、もう一つはfetchyラップし、GET要求に使用されます。

const get = endpoint => { 
    const headers = new Headers({ Authorization: `Bearer ${TOKEN}` }) 
    const init = { method: 'GET', headers } 

    return fetchy(endpoint, init) 
} 

今私は、

export const fetchArticles =() => dispatch => { 
    dispatch({ type: types.FETCH_ARTICLES }) 

    return get(endpoints.ARTICLES) 
    .then(response => response.json()) 
    .then(data => normalize(data.items, [schemas.articles])) 
    .then(normalized => dispatch(fetchArticlesSuccess(normalized))) 
    // fetch errors caught here do not have error.stack 
    .catch(error => dispatch(fetchArticlesFail(error))) 
} 

だから私は自分自身をフェッチ(ネットワークエラー)の両方でエラーをキャッチしていて、エラーが012から返された:「(これはredux-thunkアクションの作成者である)ので、のようなアクションでそれらを使用してメートルラッパー(APIエラー)。問題は、fetchArticlesで捕捉されたfetchのネットワークエラーにスタックトレースが含まれていないことです。したがってerror.stackは存在しません。どちらが私のエラー報告を台無しにしているのですか?

有効なエラーです。error instanceof Error === trueerror.message === 'Failed to fetch'です。では、なぜこのエラーにスタックトレースがないのですか?どうすれば修正できますか?多分、私はfetchyにエラーコールバックを追加し、そこにエラーを投げなおすことができるようですが、それは私にとっては奇妙なことです(しかし、私は間違っているかもしれません)。

+0

明らかに、error.stackは非標準です(https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Error/stack)。しかし、error.stackをサポートしているブラウザ(Chrome 57)でエラーがスローされたため、フェッチにスタックトレースが含まれていないと思われます。それは同じErrorコンストラクタを使用しませんか? – vsjn3290ckjnaoij2jikndckjb

答えて

3

フェッチエラーは、JavaScriptの特定の行に直接関連しない非同期的に&に作成されます。フェッチコールの行が含まれていれば役立つと私は同意しますが。私はあなたが、スタックには番号がない場合は、エラーを取得し、新しいエラーを投げるキャッチでき、回避策としてこのhttps://bugs.chromium.org/p/chromium/issues/detail?id=718760

ためにバグを提出してきました。ここで

function fetchy(...args) { 
    return fetch(...args).catch(err => { 
    if (!err.stack.match(/\d/)) throw TypeError(err.message); 
    throw err; 
    }).then(response => { 
    if (response.ok) return response; 
    throw Error(response.statusText); 
    }); 
} 

がその例です実行中http://jsbin.com/qijabi/edit?js,console

+0

バグレポートを提出してくれてありがとう。また素晴らしい回避策として、同様の修正がありましたが、チェーンの最後に '.catch'を付けましたが、これは修正プログラムほど効率的ではありません。ありがとう! – vsjn3290ckjnaoij2jikndckjb

+1

ええ、最後にキャッチすることもできますが、できるだけフェッチに近づけると、後にある行に近い行番号が得られます。 –

関連する問題