이전편(블로그 ISR 적용 트러블 슈팅기(1)

블로그 ISR 적용 트러블 슈팅기(1)

블로그에 ISR을 적용하면서 겪은 트러블 슈팅기 첫번째 이야기

)을 보지 않았다면 꼭 보고 오길 바란다!!

원인

request body와 ‘no-cors’의 관계

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);
	}

		
	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;
	}

왜 병목이 생기는거지?

const result = (isRetriableMethod ? ky._retry(function_) : function_())
	.finally(async () => {
		// Now that we know a retry is not needed, close the ReadableStream of the cloned request.
		if (!ky.request.bodyUsed) {
			await ky.request.body?.cancel(); // -> 병목 발생 지점!!
		}
	}) as ResponsePromise;

protected async _fetch(): Promise<Response> {
	// ...
	// Cloning is done here to prepare in advance for retries
	this.request = mainRequest.clone();

// 실제 구현부분
function cloneBody (body) {
  // 현재 body의 stream에 대해 tee() 메서드 호출중!!
  const { 0: out1, 1: out2 } = body.stream.tee()

  // 현재 body의 stream은 out1로 설정
  body.stream = out1

  // 복제된 stream과 기타 정보들을 함께 반환
  return {
    stream: out2,
    length: body.length,
    source: body.source
  }
}

const result = (isRetriableMethod ? ky._retry(function_) : function_())
	.finally(async () => {
		// Now that we know a retry is not needed, close the ReadableStream of the cloned request.
		if (!ky.request.bodyUsed) {
			await ky.request.body?.cancel();
		}
	}) as ResponsePromise;

해결책

		.finally(async () => {
			const originalRequest = ky._originalRequest;

			// Cancel both the original and cloned request bodies to prevent hanging.
			if (originalRequest && !originalRequest.bodyUsed && !ky.request.bodyUsed) {
				await Promise.all([
					originalRequest.body?.cancel(), ky.request.body?.cancel(),
				]);
			}
		}) as ResponsePromise;

MDN Web DocsReadableStream: tee() method - Web APIs | MDN

ReadableStream: tee() method - Web APIs | MDN

The tee() method of the ReadableStream interface tees the current readable stream, returning a two-element array containing the two resulting branches as new ReadableStream instances.

MDN Web Docs

Request - Fetch Standard

Fetch Standard

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

cancel 사용법 - Streams Standard

Streams Standard

This specification provides APIs for creating, composing, and consuming streams of data that map efficiently to low-level I/O primitives.

결론