이전편(블로그 ISR 트러블 슈팅기(1))을 보지 않았다면 꼭 보고 오길 바란다!

request body와 ‘no-cors’의 관계

뜬금없이 request body가 나와서 당황할 수 있다. 그러나 해당 내용은 다음 스펙(Fetch Standard

Fetch Standard

The Fetch standard defines requests, responses, and the process that binds them: fetching.

)에서 확인할 수 있다. 39번을 보면 다음과 같이 적혀있다.

If inputOrInitBody is non-null and inputOrInitBody’s source is null, then: - If initBody is non-null and init["duplex"] does not exist, then throw a TypeError. - If this’s request’s mode is neither "same-origin" nor "cors", then throw a TypeError. - Set this’s request’s use-CORS-preflight flag.

ky를 파헤쳐보자

// index.ts
const createInstance = (defaults?: Partial<Options>): KyInstance => {
	const ky: Partial<Mutable<KyInstance>> = (input: Input, options?: Options) => Ky.create(input, validateAndMerge(defaults, options));

	// ...

	return ky as KyInstance;
};

const ky = createInstance();

export default ky;

export class Ky {
	static create(input: Input, options: Options): ResponsePromise {
		const ky = new Ky(input, options);

		const function_ = async (): Promise<Response> => {
      // ...
			let response = await ky._fetch();
			// ...
		};
		
		// ...
		const result = function_();
		// ...
		return result;
	}

	constructor(input: Input, options: Options = {}) {
		// ...
	}

	protected async _fetch(): Promise<Response> {
		// ...
		
		if (this._options.timeout === false) {
			return this._options.fetch(mainRequest, nonRequestOptions);
		}

		return timeout(mainRequest, nonRequestOptions, this.abortController, this._options as TimeoutOptions);
	}
}

const ky = new Ky(input, options);

constructor(input: Input, options: Options = {}) {
	// ...
	this.request = new globalThis.Request(this._input, this._options);
}

	const function_ = async (): Promise<Response> => {
    // ...
		let response = await ky._fetch();
		// ...
	};

	protected async _fetch(): Promise<Response> {
		// ...
		
		if (this._options.timeout === false) {
			return this._options.fetch(mainRequest, nonRequestOptions);
		}

		return timeout(mainRequest, nonRequestOptions, this.abortController, this._options as TimeoutOptions);
	}

		const result = function_()
		// ...
		return result;

그렇다면 왜? body와 함께 mode: ‘no-cors’를 설정했을때 에러를 호출하지 않고 계속 멈춰있는 걸까??

실제로 fetch를 진행하는 함수인 _fetch()에서 TypeError 에러가 발생해서 던져진다. 그러나 이 TypeError를 받아주는 코드가 존재하지 않기 때문에 여기서 제대로 처리가 되지 않고 멈춰있게 되는 것이다.(WikipediaError hiding

Error hiding

In computer programming, error hiding (or error swallowing) is the practice of catching an error or exception, and then continuing without logging, processing, or reporting the error to other parts of the software. Handling errors in this manner is considered bad practice[1] and an anti-pattern in computer programming. In languages with exception handling support, this practice is called exception swallowing.

Wikipedia

)

	static create(input: Input, options: Options): ResponsePromise {
		const ky = new Ky(input, options);

		const function_ = async (): Promise<Response> => {

			let response = await ky._fetch();
			
			// Http 관련 에러는 throw 중이다.
			if (!response.ok && ky._options.throwHttpErrors) {
				let error = new HTTPError(response, ky.request, ky._options as NormalizedOptions);

				for (const hook of ky._options.hooks.beforeError) {
					// eslint-disable-next-line no-await-in-loop
					error = await hook(error);
				}

				throw error;
			}

			// onDownloadProgress 관련 설정 에러도 throw 중이다.
			if (ky._options.onDownloadProgress) {
				if (typeof ky._options.onDownloadProgress !== 'function') {
					throw new TypeError('The `onDownloadProgress` option must be a function');
				}

				if (!supportsResponseStreams) {
					throw new Error('Streams are not supported in your environment. `ReadableStream` is missing.');
				}

				return streamResponse(response.clone(), ky._options.onDownloadProgress);
			}
			
			// 그 어디에도 TypeError를 다루는 코드가 없다. 따라서 Error Hiding이 발생!

			return response;
		};

// 생성자에서 this.request가 생성된 후...

this.request = new globalThis.Request(this._input, this._options);

// 호출 구성을 확인하기 위한 빠른 검사를 여기에 추가할 수 있다.
if (this.request.mode === 'no-cors' && this.request.body) {
	throw new TypeError(
		'Request with `mode: "no-cors"` cannot have a body. This is a violation of the Fetch specification.'
	);
}

// ... 생성자의 나머지 부분

후기