Feat/UI error observability #6169
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
![codescene-delta-analysis[bot]](https://avatars.githubusercontent.com/in/53921?s=60&v=4){kind=small}
There was a problem hiding this comment.
✅ Code Health Quality Gates: OK
- Declining Code Health: 1 findings(s) 🚩
- Improving Code Health: 0 findings(s) ✅
- Affected Hotspots: 0 files(s) 🔥
Recommended Review Level: Lightweight sanity check
View detailed results in CodeScene
🚩 Declining Code Health (highest to lowest):
- Large Method index.ts: AdminApi.constructor
| <QueryParamProvider adapter={ReactRouter6Adapter}> | ||
| <ThemeProvider> | ||
| <AnnouncerProvider> | ||
| <ErrorBoundary |
There was a problem hiding this comment.
This error boundary is higher up than the one in App.tsx and is identical
There was a problem hiding this comment.
✅ Code Health Quality Gates: OK
- Declining Code Health: 1 findings(s) 🚩
- Improving Code Health: 0 findings(s) ✅
- Affected Hotspots: 0 files(s) 🔥
Recommended Review Level: Lightweight sanity check
View detailed results in CodeScene
🚩 Declining Code Health (highest to lowest):
- Large Method index.ts: AdminApi.constructor
|
|
||
| window.global ||= window; | ||
|
|
||
| ReactDOM.render( | ||
| <UIProviderContainer> |
There was a problem hiding this comment.
Move this into a component to use a hook to get the recordError call to leverage automatic basepath
| @@ -51,66 +49,64 @@ export const App = () => { | |||
| }, [authDetails, user]); | |||
|
|
|||
| return ( | |||
| <ErrorBoundary FallbackComponent={LayoutError}> | |||
There was a problem hiding this comment.
We already have this ErrorBoundary further up in the tree, removed it from here.
| } | ||
| /> | ||
| ))} | ||
| <SWRProvider> |
There was a problem hiding this comment.
Result of removing the outermost component layer, nothing really changed here except removing the error boundary
There was a problem hiding this comment.
✅ Code Health Quality Gates: OK
- Declining Code Health: 1 findings(s) 🚩
- Improving Code Health: 0 findings(s) ✅
- Affected Hotspots: 0 files(s) 🔥
Recommended Review Level: Lightweight sanity check
View detailed results in CodeScene
🚩 Declining Code Health (highest to lowest):
- Large Method index.ts: AdminApi.constructor
There was a problem hiding this comment.
✅ Code Health Quality Gates: OK
- Declining Code Health: 1 findings(s) 🚩
- Improving Code Health: 0 findings(s) ✅
- Affected Hotspots: 0 files(s) 🔥
Recommended Review Level: Lightweight sanity check
View detailed results in CodeScene
🚩 Declining Code Health (highest to lowest):
- Large Method index.ts: AdminApi.constructor
There was a problem hiding this comment.
✅ Code Health Quality Gates: OK
- Declining Code Health: 1 findings(s) 🚩
- Improving Code Health: 0 findings(s) ✅
- Affected Hotspots: 0 files(s) 🔥
Recommended Review Level: Lightweight sanity check
View detailed results in CodeScene
🚩 Declining Code Health (highest to lowest):
- Large Method index.ts: AdminApi.constructor
|
|
||
| this.app.use( | ||
| '/record-ui-error', | ||
| new UiObservabilityController(config, services).router, | ||
| ); |
There was a problem hiding this comment.
❌ Getting worse: Large Method
AdminApi.constructor increases from 121 to 125 lines of code, threshold = 70
Why does this problem occur?
Large functions with many lines of code are generally harder to understand and lower the code health. Avoid adding more lines to this function. Read more.
To ignore this warning click here.
This PR adds an endpoint to Unleash that accepts an error message and option error stack and logs it as an error. This allows us to leverage errors in logs observability to catch UI errors consistently.
Considered a test, but this endpoint only accepts and logs input, so I'm not sure how useful it would be.