fix(warn): Optimize console warnings to prevent excessive output in development #2661
Conversation
Co-authored-by: ed <[email protected]>
🦋 Changeset detectedLatest commit: c4bd514 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
""" Walkthrough이 변경사항은 Changes
Sequence Diagram(s)sequenceDiagram
participant Component as Button/Banner/SectionLabel
participant WarnUtil as warn()
participant Console as console.warn
Component->>WarnUtil: warn("deprecation message", "ScopeName")
alt 개발 환경 & Scope 미사용
WarnUtil->>Console: console.warn("deprecation message")
else 개발 환경 & Scope 최초 호출
WarnUtil->>Console: console.warn("deprecation message")
WarnUtil->>WarnUtil: 스코프 기록
else 개발 환경 & Scope 재호출
WarnUtil-->>Console: (출력 없음)
else 프로덕션 환경
WarnUtil-->>Console: (출력 없음)
end
Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
Poem
""" 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
sungik-choi
changed the title
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #2661 +/- ##
==========================================
+ Coverage 79.22% 79.26% +0.04%
==========================================
Files 145 145
Lines 2869 2875 +6
Branches 920 923 +3
==========================================
+ Hits 2273 2279 +6
Misses 562 562
Partials 34 34 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
packages/bezier-react/src/utils/assert.ts (1)
5-5: 메모리 누수 가능성을 고려해주세요.
devWarningScopesSet이 무한정 증가할 수 있어 장기간 실행되는 개발 환경에서 메모리 누수가 발생할 수 있습니다. 개발 환경에서만 사용되므로 실제 프로덕션에는 영향이 없지만, 매우 긴 개발 세션에서는 문제가 될 수 있습니다.WeakSet 사용을 고려하거나 주기적으로 Set을 정리하는 메커니즘을 추가할 수 있습니다:
-const devWarningScopes = new Set<string>() +const devWarningScopes = new Set<string>() + +// Optional: Clear scopes periodically in very long dev sessions +if (typeof window !== 'undefined') { + setInterval(() => { + if (devWarningScopes.size > 1000) { + devWarningScopes.clear() + } + }, 300000) // 5 minutes +}.changeset/warn-scope-optimization.md (2)
2-2: 따옴표 스타일을 통일해주세요
Changeset YAML에서 패키지 이름은 보통 이스케이프를 위해 큰따옴표(")를 사용합니다. 사소하지만 기존 파일들과 스타일을 맞추면 가독성이 좋아집니다.-'@channel.io/bezier-react': patch +"@channel.io/bezier-react": patch
5-11: 요약 본문 길이·형식을 간결하게 다듬으면 좋겠습니다
Changeset 첫 문장은 1-라인 요약으로만 두고, 상세 내용은 빈 줄 이후 구체적으로 적는 방식이 권장됩니다. 현재는 1-라인 요약(5행) 뒤에 다시 bullet 목록이 이어지지만, 5행 문장이 다소 길어 80자를 넘을 수 있습니다.
예)Optimize warn function to prevent duplicate console logs - Add `scope` parameter … - Apply scope to …
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
.changeset/warn-scope-optimization.md(1 hunks)packages/bezier-react/src/components/Banner/Banner.tsx(1 hunks)packages/bezier-react/src/components/Button/Button.tsx(1 hunks)packages/bezier-react/src/components/SectionLabel/SectionLabel.tsx(2 hunks)packages/bezier-react/src/utils/assert.test.ts(1 hunks)packages/bezier-react/src/utils/assert.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/bezier-react/src/utils/assert.test.ts (1)
packages/bezier-react/src/utils/assert.ts (1)
warn(9-22)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Chromatic
- GitHub Check: CI
🔇 Additional comments (9)
packages/bezier-react/src/utils/assert.ts (2)
7-9: 함수 오버로딩이 올바르게 구현되었습니다.TypeScript 함수 오버로딩을 통해 scope 매개변수의 선택적 사용을 명확하게 정의했습니다. 이는 기존 코드와의 호환성을 유지하면서 새로운 기능을 추가하는 좋은 방법입니다.
10-22: 스코프 기반 경고 중복 제거 로직이 정확합니다.구현된 로직이 올바르게 작동합니다:
- 스코프가 제공된 경우에만 중복 제거를 수행
- 개발 환경에서만 동작
- 스코프별로 한 번만 경고 출력
react-window 라이브러리에서 영감을 받은 접근 방식이 적절하게 적용되었습니다.
packages/bezier-react/src/components/Button/Button.tsx (1)
66-69: 스코프 네이밍이 명확하고 일관성 있습니다.
'Button.IconName'스코프 식별자가 컴포넌트와 경고 유형을 명확하게 나타냅니다. 이는 다른 컴포넌트들과 일관된 네이밍 패턴을 따르고 있어 디버깅과 유지보수에 도움이 됩니다.packages/bezier-react/src/components/Banner/Banner.tsx (1)
79-82: 스코프 적용이 올바르고 일관성 있습니다.Banner 컴포넌트에서도 동일한 스코프 네이밍 패턴(
'Banner.IconName')을 적용하여 Button 컴포넌트와 일관성을 유지했습니다. 레거시 아이콘 사용에 대한 경고가 적절하게 스코프화되었습니다.packages/bezier-react/src/components/SectionLabel/SectionLabel.tsx (2)
42-45: 세밀한 스코프 구분이 적절합니다.SectionLabel 컴포넌트의 복잡성을 고려하여
'SectionLabel.LeftContent.IconName'으로 좌측 콘텐츠와 우측 콘텐츠를 구분한 것이 적절합니다. 이는 개발자가 경고의 출처를 정확히 파악할 수 있게 도움을 줍니다.
79-82: 일관된 스코프 네이밍 패턴을 유지했습니다.우측 콘텐츠에 대해서도
'SectionLabel.RightContent.IconName'으로 명확하게 구분하여, 전체 컴포넌트에서 일관된 스코프 네이밍 패턴을 유지했습니다.packages/bezier-react/src/utils/assert.test.ts (3)
90-103: 스코프별 중복 제거 동작을 정확히 테스트합니다.동일한 스코프에서 여러 번 호출해도 한 번만 경고가 출력되는지 확인하는 테스트가 정확합니다.
toHaveBeenCalledTimes(1)로 정확한 호출 횟수를 검증하고 있습니다.
105-119: 서로 다른 스코프의 독립적 처리를 잘 검증합니다.각각의 스코프가 독립적으로 처리되어 서로 다른 메시지가 모두 출력되는지 확인하는 테스트입니다.
toHaveBeenNthCalledWith를 사용하여 호출 순서와 내용을 정확히 검증하고 있습니다.
121-131: 프로덕션 환경에서의 동작을 적절히 검증합니다.스코프가 제공되어도 프로덕션 환경에서는 경고가 출력되지 않음을 확인하는 중요한 테스트입니다. 이는 성능과 보안 측면에서 필수적인 검증입니다.
sungik-choi
added
the
enhancement
Chromatic Report🚀 Congratulations! Your build was successful! |
Co-authored-by: ed <[email protected]>
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
.changeset/warn-scope-optimization.md (1)
5-11: changeset 설명 톤 · 형식 통일 필요
- 첫 번째 본문 문장(라인 5)은 Changeset 가이드라인에 따라
명령형 · 현재 시제(예: “Optimize warn…” → “Optimize warn to…” 또는 “Optimize the warn…”)로 유지하되, 마침표를 제거하면 더욱 일관됩니다.- Bullet(라인 7-9)의 첫 단어 대·소문자 및 띄어쓰기를 맞추면 가독성이 좋아집니다.
예시 diff:- Add `scope` parameter to warn function to show warnings only once per scope - Apply scope to legacy icon deprecation warnings in Button, Banner, and SectionLabel components - Add comprehensive test coverage for the new warn function behavior + Add `scope` parameter to `warn` so each message logs only once per scope + Apply the scoped warning to legacy-icon deprecation in Button, Banner, SectionLabel + Add comprehensive tests for the new `warn` behavior
- 마지막 문단(라인 11)은 bullet 리스트로 함께 묶거나 문장부호를 통일하면 좋겠습니다.
작은 문구 수정이지만 릴리스 노트 가독성과 일관성을 높이는 데 도움이 됩니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
.changeset/warn-scope-optimization.md(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Chromatic
Co-authored-by: ed <[email protected]>
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @channel.io/[email protected] ### Patch Changes - Optimize warn function to prevent duplicate console logs ([#2661](#2661)) by @sungik-choi - Add `scope` parameter to `warn` so each message logs only once per scope - Apply the scoped warning to legacy-icon deprecation in Button, Banner, SectionLabel - Add comprehensive tests for the new `warn` behavior - Prevent UI blocking and developer tool freezing when using legacy icons with virtual lists ## [email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **버그 수정** * 레거시 아이콘이 사용된 Button, Banner, SectionLabel 컴포넌트에서 중복 경고 메시지가 콘솔에 여러 번 출력되는 현상이 개선되었습니다. 이제 각 경고 메시지는 지정된 범위(scope) 내에서 한 번만 표시되어 개발자 도구의 성능 저하 및 UI 멈춤 현상이 방지됩니다. * **기타** * bezier-figma-plugin 및 @channel.io/bezier-react 패키지의 버전이 업데이트되었습니다. <!-- end of auto-generated comment: release notes by coderabbit.ai --> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Self Checklist
Related Issue
Summary
Optimizes the
warnutility function to prevent excessive console warnings in development mode, specifically addressing performance issues when many components trigger the same warning (e.g., legacy icon deprecation).Details
This PR introduces a
scopeparameter to thewarnfunction. When ascopeis provided, the warning message for that specific scope will only be logged to the console once per development session.This change was made to:
Key Changes:
packages/bezier-react/src/utils/assert.ts:warnfunction overloaded to accept an optionalscopestring.Set(devWarningScopes) to track and ensure each scoped warning is logged only once.scopeparameter to existing legacy icon deprecation warnings inButton,Banner, andSectionLabelcomponents.warnfunction to verify that warnings are logged only once per scope and that different scopes are handled independently.Breaking change? (Yes/No)
No. This is an internal utility improvement that only affects development-mode console output.
References
react-window's warning mechanism:Summary by CodeRabbit
Summary by CodeRabbit
신규 기능
버그 수정
테스트