diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json
index 9e9e9dda7f..a02a213a7a 100644
--- a/services/web/frontend/extracted-translations.json
+++ b/services/web/frontend/extracted-translations.json
@@ -203,6 +203,11 @@
   "no_messages": "",
   "no_new_commits_in_github": "",
   "no_other_projects_found": "",
+  "no_pdf_error_explanation": "",
+  "no_pdf_error_reason_unrecoverable_error": "",
+  "no_pdf_error_reason_no_content": "",
+  "no_pdf_error_reason_output_pdf_already_exists": "",
+  "no_pdf_error_title": "",
   "no_preview_available": "",
   "no_search_results": "",
   "no_symbols_found": "",
@@ -339,4 +344,4 @@
   "zotero_reference_loading_error_expired": "",
   "zotero_reference_loading_error_forbidden": "",
   "zotero_sync_description": ""
-}
+}
\ No newline at end of file
diff --git a/services/web/frontend/js/features/preview/components/preview-error.js b/services/web/frontend/js/features/preview/components/preview-error.js
index a72fca2fb1..3536554e61 100644
--- a/services/web/frontend/js/features/preview/components/preview-error.js
+++ b/services/web/frontend/js/features/preview/components/preview-error.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import { useTranslation } from 'react-i18next'
+import { useTranslation, Trans } from 'react-i18next'
 import PreviewLogsPaneEntry from './preview-logs-pane-entry'
 import Icon from '../../../shared/components/icon'
 import { useEditorContext } from '../../../shared/context/editor-context'
@@ -59,6 +59,30 @@ function PreviewError({ name }) {
   } else if (name === 'projectTooLarge') {
     errorTitle = t('project_too_large')
     errorContent = <>{t('project_too_much_editable_text')}</>
+  } else if (name === 'failure') {
+    errorTitle = t('no_pdf_error_title')
+    errorContent = (
+      <>
+        <Trans i18nKey="no_pdf_error_explanation" />
+        <ul className="log-entry-formatted-content-list">
+          <li>
+            <Trans i18nKey="no_pdf_error_reason_unrecoverable_error" />
+          </li>
+          <li>
+            <Trans
+              i18nKey="no_pdf_error_reason_no_content"
+              components={{ code: <code /> }}
+            />
+          </li>
+          <li>
+            <Trans
+              i18nKey="no_pdf_error_reason_output_pdf_already_exists"
+              components={{ code: <code /> }}
+            />
+          </li>
+        </ul>
+      </>
+    )
   }
 
   return errorTitle ? (
diff --git a/services/web/frontend/js/ide/pdf/controllers/PdfController.js b/services/web/frontend/js/ide/pdf/controllers/PdfController.js
index 960c60f585..58953365d6 100644
--- a/services/web/frontend/js/ide/pdf/controllers/PdfController.js
+++ b/services/web/frontend/js/ide/pdf/controllers/PdfController.js
@@ -490,6 +490,7 @@ App.controller(
       } else if (response.status === 'failure') {
         $scope.pdf.view = 'errors'
         $scope.pdf.failure = true
+        $scope.pdf.downloadUrl = null
         $scope.shouldShowLogs = true
         fetchLogs(fileByPath, { pdfDownloadDomain })
       } else if (response.status === 'clsi-maintenance') {
@@ -515,31 +516,38 @@ App.controller(
       }
 
       if (window.showNewLogsUI) {
-        $scope.pdf.compileFailed = false
-        // `$scope.clsiErrors` stores the error states nested within `$scope.pdf`
-        // for use with React's <PreviewPane errors={$scope.clsiErrors}/>
-        $scope.clsiErrors = Object.assign(
-          {},
-          $scope.pdf.error ? { error: true } : null,
-          $scope.pdf.renderingError ? { renderingError: true } : null,
-          $scope.pdf.clsiMaintenance ? { clsiMaintenance: true } : null,
-          $scope.pdf.clsiUnavailable ? { clsiUnavailable: true } : null,
-          $scope.pdf.tooRecentlyCompiled ? { tooRecentlyCompiled: true } : null,
-          $scope.pdf.compileTerminated ? { compileTerminated: true } : null,
-          $scope.pdf.rateLimited ? { rateLimited: true } : null,
-          $scope.pdf.compileInProgress ? { compileInProgress: true } : null,
-          $scope.pdf.timedout ? { timedout: true } : null,
-          $scope.pdf.projectTooLarge ? { projectTooLarge: true } : null,
-          $scope.pdf.autoCompileDisabled ? { autoCompileDisabled: true } : null
-        )
+        $scope.$applyAsync(() => {
+          $scope.pdf.compileFailed = false
+          // `$scope.clsiErrors` stores the error states nested within `$scope.pdf`
+          // for use with React's <PreviewPane errors={$scope.clsiErrors}/>
+          $scope.clsiErrors = Object.assign(
+            {},
+            $scope.pdf.error ? { error: true } : null,
+            $scope.pdf.renderingError ? { renderingError: true } : null,
+            $scope.pdf.clsiMaintenance ? { clsiMaintenance: true } : null,
+            $scope.pdf.clsiUnavailable ? { clsiUnavailable: true } : null,
+            $scope.pdf.tooRecentlyCompiled
+              ? { tooRecentlyCompiled: true }
+              : null,
+            $scope.pdf.compileTerminated ? { compileTerminated: true } : null,
+            $scope.pdf.rateLimited ? { rateLimited: true } : null,
+            $scope.pdf.compileInProgress ? { compileInProgress: true } : null,
+            $scope.pdf.timedout ? { timedout: true } : null,
+            $scope.pdf.projectTooLarge ? { projectTooLarge: true } : null,
+            $scope.pdf.autoCompileDisabled
+              ? { autoCompileDisabled: true }
+              : null,
+            $scope.pdf.failure ? { failure: true } : null
+          )
 
-        if (
-          $scope.pdf.view === 'errors' ||
-          $scope.pdf.view === 'validation-problems'
-        ) {
-          $scope.shouldShowLogs = true
-          $scope.pdf.compileFailed = true
-        }
+          if (
+            $scope.pdf.view === 'errors' ||
+            $scope.pdf.view === 'validation-problems'
+          ) {
+            $scope.shouldShowLogs = true
+            $scope.pdf.compileFailed = true
+          }
+        })
       }
 
       const IGNORE_FILES = ['output.fls', 'output.fdb_latexmk']
diff --git a/services/web/frontend/stylesheets/app/editor/logs.less b/services/web/frontend/stylesheets/app/editor/logs.less
index 8573b5f117..90eda75052 100644
--- a/services/web/frontend/stylesheets/app/editor/logs.less
+++ b/services/web/frontend/stylesheets/app/editor/logs.less
@@ -175,6 +175,11 @@
   }
 }
 
+.log-entry-formatted-content-list {
+  margin: @margin-xs 0;
+  padding-left: @padding-md;
+}
+
 .first-error-popup {
   position: absolute;
   z-index: 1;
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index b9e8296e9f..9d06715843 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -1,6 +1,11 @@
 {
   "chat_error": "Could not load chat messages, please try again.",
   "reconnect": "Try again",
+  "no_pdf_error_title": "No PDF",
+  "no_pdf_error_explanation": "This compile didn't produce a PDF. This can happen if:",
+  "no_pdf_error_reason_unrecoverable_error": "There is an unrecoverable LaTeX error. If there are LaTeX errors shown below or in the raw logs, please try to fix them and compile again.",
+  "no_pdf_error_reason_no_content": "The <code>document</code> environment contains no content. If it's empty, please add some content and compile again.",
+  "no_pdf_error_reason_output_pdf_already_exists": "This project contains a file called <code>output.pdf</code>. If that file exists, please rename it and compile again.",
   "logs_pane_info_message": "We are testing a new logs pane",
   "logs_pane_info_message_popup": "We are testing a new logs pane. Click here to give feedback.",
   "github_symlink_error": "Your Github repository contains symbolic link files, which are not currently supported by Overleaf. Please remove these and try again.",
@@ -1467,4 +1472,4 @@
   "page_current": "Page __page__, Current Page",
   "go_page": "Go to page __page__",
   "pagination_navigation": "Pagination Navigation"
-}
+}
\ No newline at end of file