Error page improvements. #1259
Error page improvements. #1259
Conversation
alongoni
added
Enhancement
|
| @@ -70,6 +87,9 @@ export default class ErrorBoundary extends React.Component<unknown, ErrorBoundar | |||
| const encodedBody = encodeURIComponent(issueBody(error)) | |||
| return ( | |||
| <FallbackWrapper> | |||
| <HeaderWrapper> | |||
There was a problem hiding this comment.
@anxolin As you anticipated, I have some problems with the header links. Maybe because the header is inside the ErrorBoundary.
Can we try to fix that or maybe we can show only the CowSwap logo to go back to the home.
There was a problem hiding this comment.
I would simplify as u suggest. An alternative header, with just a Logo suffices.
The less logic we add there, the less chances we break it. So I would add only HTML Markup, not logics that can fail
There was a problem hiding this comment.
HAha, nice meme :)
Looks good to me. I like the header with just the logo. 👌
uberniting, when you reduce the window, there's some points where the title size feels way smaller proportionally to the other text. It looks okeish
💥 IMPORTANT: Don't forget to remove that throw Error before merging.
|
Hey @alongoni , great changes!
I mean, something like this on screens with less than 1140 px width
Thanks =) |
|
Hey @alongoni , Also, still there is no padding in the error log section from the right. And it was removed from the left: as a result, section value is not fully visible in an iPhone device (Android looks good): Could you please take a look at it? |
hey @elena-zh. Can you mention your iOS and browser version? It seems like is a CSS problem on iOS with the |
|
@alongoni , I tested on iPhone 12 mini with 14.6 iOS in Chrome browser. In Safari the issue is reproducible either. |
| <CodeBlockWrapper> | ||
| <code> | ||
| <TYPE.main fontSize={10} color={'text1'}> | ||
| {error.stack} | ||
| <StyledParagraph>{error.stack}</StyledParagraph> | ||
| </TYPE.main> |
There was a problem hiding this comment.
After a review along with @matextrem, we came to the conclusion that it is not a CSS problem.
It is related how the error is interpreted and rendered on iOS (Safari and Chrome). The complete message is not stored directly in the error, as it happens in other platforms and devices.
For example on Safari we get:
GI@https://pr1259--gpswapui.review.gnosisdev.com/static/js/main.1856fc78.chunk.js:1:585424 ro@https://pr1259--gpswapui.review.gnosisdev.com/static/js/4.262e7757.chunk.js:2:2473681 Js@https://pr1259--gpswapui.review.gnosisdev.com/static/js/4.262e7757.chunk.js:2:2526140 Su@https://pr1259--gpswapui.review.gnosisdev.com/static/js/4.262e7757.chunk.js:2:2513314 Eu@https://pr1259--gpswapui.review.gnosisdev.com/static/js/4.262e7757.chunk.js:2:2513242 Tu@https://pr1259--gpswapui.review.gnosisdev.com/static/js/4.262e7757.chunk.js:2:2513105 mu@https://pr1259--gpswapui.review.gnosisdev.com/static/js/4.262e7757.chunk.js:2:2510071 mu@[native code] https://pr1259--gpswapui.review.gnosisdev.com/static/js/4.262e7757.chunk.js:2:2459449 https://pr1259--gpswapui.review.gnosisdev.com/static/js/4.262e7757.chunk.js:2:2536868 Gi@https://pr1259--gpswapui.review.gnosisdev.com/static/js/4.262e7757.chunk.js:2:2459395 Ji@https://pr1259--gpswapui.review.gnosisdev.com/static/js/4.262e7757.chunk.js:2:2459330 fu@https://pr1259--gpswapui.review.gnosisdev.com/static/js/4.262e7757.chunk.js:2:2507440 Oo@https://pr1259--gpswapui.review.gnosisdev.com/static/js/4.262e7757.chunk.js:2:2479007 Oo@[native code] https://pr1259--gpswapui.review.gnosisdev.com/static/js/4.262e7757.chunk.js:2:281441 promiseReactionJob@[native code]
Instead of:
Error: This cow is dropping some serious milk 🥛!!
at CowGamePage (http://localhost:3000/static/js/main.chunk.js:43233:11)
at renderWithHooks (http://localhost:3000/static/js/vendors~main.chunk.js:236075:22)
at mountIndeterminateComponent (http://localhost:3000/static/js/vendors~main.chunk.js:238837:17)
at beginWork (http://localhost:3000/static/js/vendors~main.chunk.js:240036:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/vendors~main.chunk.js:225025:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/vendors~main.chunk.js:225074:20)
at invokeGuardedCallback (http://localhost:3000/static/js/vendors~main.chunk.js:225134:35)
at beginWork$1 (http://localhost:3000/static/js/vendors~main.chunk.js:244876:11)
at performUnitOfWork (http://localhost:3000/static/js/vendors~main.chunk.js:243712:16)
at workLoopSync (http://localhost:3000/static/js/vendors~main.chunk.js:243649:9)
at renderRootSync (http://localhost:3000/static/js/vendors~main.chunk.js:243615:11)
at performSyncWorkOnRoot (http://localhost:3000/static/js/vendors~main.chunk.js:243232:22)
at http://localhost:3000/static/js/vendors~main.chunk.js:232485:30
at unstable_runWithPriority (http://localhost:3000/static/js/vendors~main.chunk.js:307490:16)
at runWithPriority$1 (http://localhost:3000/static/js/vendors~main.chunk.js:232431:14)
at flushSyncCallbackQueueImpl (http://localhost:3000/static/js/vendors~main.chunk.js:232480:13)
at flushSyncCallbackQueue (http://localhost:3000/static/js/vendors~main.chunk.js:232468:7)
at discreteUpdates$1 (http://localhost:3000/static/js/vendors~main.chunk.js:243360:13)
at discreteUpdates (http://localhost:3000/static/js/vendors~main.chunk.js:224835:16)
at dispatchDiscreteEvent (http://localhost:3000/static/js/vendors~main.chunk.js:227017:7)
Summary
Work in progress
Closes #1255
Improvements to the layout and styles of the Error page.
To Test
Open the page "Cow Game" to throw an error so we can see the app crashing.