transform icon indicating copy to clipboard operation
transform copied to clipboard

Error page centre issue

Open ritz078 opened this issue 4 years ago • 7 comments

Screenshot 2021-02-12 at 12 17 30 PM

In the error page, things are not properly aligned.

ritz078 avatar Feb 12 '21 06:02 ritz078

Would like to pick up this issue.

agent515 avatar Feb 12 '21 07:02 agent515

@agent515 assigned this to you.

ritz078 avatar Feb 12 '21 11:02 ritz078

@ritz078 To check the layout of Erro 500, I inserted this check status === 500 and found the layout to be fine. But got error is shown in the following image. I am guessing it is related to updating webpack, do you want me to test this or even recreate the error in any different way?

image

agent515 avatar Feb 16 '21 07:02 agent515

This isn't webpack. The webpack prefix is there because it was used to build it.

You should check the CSS on production and compare it with what you get locally. This will help you narrow down the exact location of error.

ritz078 avatar Feb 16 '21 08:02 ritz078

If I compare just CSS files, I don't find anything wrong there. But noticed that instead of <Error404> <Error500> is loading in the production even though the status code is 404. And as I researched to find where exactly _error.tsx file is used, came across _error.js file. As I have not used webpack before, I am not exactly sure how to go about resolving the error. I now have started to learn webpack. Is that the right way to go?

agent515 avatar Feb 16 '21 10:02 agent515

In https://github.com/ritz078/transform/blob/707f15f6f26fcddf0a2d4f3324dea1f18225d2c1/pages/_error.tsx#L11

replace statusCode === 404 with false and open a route that does not exist.

for eg: http://localhost:3000/a

ritz078 avatar Feb 17 '21 11:02 ritz078

In

https://github.com/ritz078/transform/blob/707f15f6f26fcddf0a2d4f3324dea1f18225d2c1/pages/_error.tsx#L11

replace statusCode === 404 with false and open a route that does not exist.

for eg: http://localhost:3000/a

I already did that and it worked fine (in the center) as shown in the snapshot shared before. And, I could not find the alignment error that is shown in the snapshot shared by you.

And about what I said in the previous comment was that on the production https://transform.tools/a shows Error500 component. I thought that itself should be a bug and traced it to _error.js static file but as I am not familiar with webpack I thought I should start learning about it to understand build.

agent515 avatar Feb 17 '21 12:02 agent515