Merge pull request #2691 from overleaf/ta-4xx-error-page

Enhance 4xx HTML Response Page

GitOrigin-RevId: 620f84cd6cdc0571bd68bbd2c3164b08f7fe5598

services/web/app/src/Features/Errors/HttpErrorController.js

@@ -10,7 +10,10 @@ function renderHTMLError(statusCode, publicInfo, res) {
   } else if (statusCode === 403) {
     res.render('user/restricted', { title: 'restricted' })
   } else if (statusCode >= 400 && statusCode < 500) {
-    res.render('general/500', { title: 'Client Error' })
+    res.render('general/400', {
+      title: 'Client Error',
+      message: publicInfo.message
+    })
   } else {
     res.render('general/500', { title: 'Server Error' })
   }

services/web/app/views/general/400.pug

@@ -0,0 +1,28 @@
+doctype html
+html.full-height(itemscope, itemtype='http://schema.org/Product')
+	head
+		title Something went wrong
+		link(rel="icon", href="/" + settings.brandPrefix + "favicon.ico")
+		if buildCssPath
+			link(rel="stylesheet", href=buildCssPath(null, { hashedPath: true }))
+
+	body.full-height
+		.content.content-alt.full-height
+			.container.full-height
+				.error-container.full-height
+					.error-details
+						p.error-status I'm sorry, Dave. I'm afraid I can't do that.
+						p.error-description(ng-non-bindable) There was a problem with your latest request
+							if(message)
+								|: #{message}
+							|.
+							br
+							| Please go back and try again.
+						p.error-description(ng-non-bindable)
+							| If the problem persists, please contact us at
+							|
+							a(href="mailto:" + settings.adminEmail) #{settings.adminEmail}
+							| .
+						a.error-btn(href="javascript:history.back()") Back
+						|  
+						a.btn.btn-default(href="/") Home

services/web/app/views/general/404.pug

@@ -4,12 +4,7 @@ block content
 	.content.content-alt
 		.container
 			.error-container
-				.error-figure
-					img.error-img(
-						src="/img/brand/404-visual.svg"
-						alt="Not found"
-					)
 				.error-details
 					p.error-status Not found
 					p.error-description #{translate("cant_find_page")}
-					a.error-btn(href="/") Home
+					a.error-btn(href="/") Home

services/web/app/views/general/500.pug

@@ -10,11 +10,6 @@ html.full-height(itemscope, itemtype='http://schema.org/Product')
 		.content.content-alt.full-height
 			.container.full-height
 				.error-container.full-height
-					.error-figure.error-figure-500
-						img.error-img(
-							src="/img/brand/500-visual-socket.svg"
-							alt="Error"
-						)
 					.error-details
 						p.error-status Something went wrong, sorry.
 						p.error-description(ng-non-bindable) Our staff are probably looking into this, but if it continues, please check our status page at
@@ -26,4 +21,4 @@ html.full-height(itemscope, itemtype='http://schema.org/Product')
 							|
 							a(href="mailto:" + settings.adminEmail) #{settings.adminEmail}
 							| .
-						a.error-btn(href="/") Home
+						a.error-btn(href="/") Home

services/web/frontend/stylesheets/app/error-pages.less

@@ -12,56 +12,6 @@
   margin-top: -(@header-height + @content-margin-vertical) / 2;
 }
 
-.error-figure {
-  display: none;
-  flex: 0 0 50%;
-  padding: @line-height-computed * 2;
-  @media (min-width: @screen-sm-min) {
-    display: block;
-  }
-}
-
-.error-figure when (@is-overleaf = true) {
-  display: none;
-}
-
-.error-figure-500 {
-  &::before {
-    content: '';
-    display: block;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 80%;
-    background-image: url(/img/brand/500-visual-plug.svg);
-    background-size: 400px;
-    background-repeat: no-repeat;
-    background-position: right 70%;
-    pointer-events: none;
-  }
-  &::after {
-    content: '';
-    display: block;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 50%;
-    background-image: url(/img/brand/500-visual-tail.svg);
-    background-size: 100px;
-    background-repeat: no-repeat;
-    background-position: 90% bottom;
-    pointer-events: none;
-  }
-}
-.error-img {
-  display: block;
-  max-width: 380px;
-  height: auto;
-  margin: 0 auto;
-}
-
 .error-details {
   flex: 0 1 50%;
   padding: @line-height-computed * 2;

services/web/test/acceptance/src/BodyParserErrorsTest.js

@@ -38,7 +38,7 @@ describe('BodyParserErrors', function() {
               return done(error)
             }
             response.statusCode.should.equal(413)
-            body.should.match(/Something went wrong, sorry/)
+            body.should.match(/I'm afraid I can't do that./)
             done()
           }
         )

services/web/test/unit/src/Errors/HttpErrorControllerTests.js

@@ -94,14 +94,17 @@ describe('HttpErrorController', function() {
 
     it('renders HTML with info', function() {
       let cause = new Errors.SubscriptionAdminDeletionError()
-      let error = new HttpErrors.UnprocessableEntityError({}).withCause(cause)
+      let error = new HttpErrors.UnprocessableEntityError({
+        info: { public: { message: 'some public message' } }
+      }).withCause(cause)
       this.req.accepts = () => 'html'
 
       this.ErrorController.handleError(error, this.req, this.res)
       expect(this.res.statusCode).to.equal(422)
-      expect(this.res.renderedTemplate).to.equal('general/500')
+      expect(this.res.renderedTemplate).to.equal('general/400')
       expect(this.res.renderedVariables).to.deep.equal({
-        title: 'Client Error'
+        title: 'Client Error',
+        message: 'some public message'
       })
     })
   })