diff --git a/services/web/frontend/extracted-translation-keys.json b/services/web/frontend/extracted-translation-keys.json
index 2b66f41da2..9e17e67058 100644
--- a/services/web/frontend/extracted-translation-keys.json
+++ b/services/web/frontend/extracted-translation-keys.json
@@ -1,4 +1,8 @@
[
+ "n_warnings",
+ "n_warnings_plural",
+ "n_errors",
+ "n_errors_plural",
"file_outline",
"the_file_outline_is_a_new_feature_click_the_icon_to_learn_more",
"we_cant_find_any_sections_or_subsections_in_this_file",
diff --git a/services/web/frontend/js/features/preview/components/preview-pane.js b/services/web/frontend/js/features/preview/components/preview-pane.js
index 6a7c12ab9e..31cc0aa1e8 100644
--- a/services/web/frontend/js/features/preview/components/preview-pane.js
+++ b/services/web/frontend/js/features/preview/components/preview-pane.js
@@ -2,6 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types'
import PreviewToolbar from './preview-toolbar'
import PreviewLogsPane from './preview-logs-pane'
+import { useTranslation } from 'react-i18next'
function PreviewPane({
compilerState,
@@ -13,6 +14,8 @@ function PreviewPane({
onToggleLogs,
showLogs
}) {
+ const { t } = useTranslation()
+
const nErrors =
compilerState.logEntries && compilerState.logEntries.errors
? compilerState.logEntries.errors.length
@@ -39,6 +42,12 @@ function PreviewPane({
onSetSyntaxCheck={onSetSyntaxCheck}
onToggleLogs={onToggleLogs}
/>
+
+ {nErrors ? t('n_errors', { count: nErrors }) : ''}
+
+
+ {nWarnings ? t('n_warnings', { count: nWarnings }) : ''}
+
{showLogs ? (
) : null}
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index 03a4269bd4..732c34fa3d 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -1,4 +1,8 @@
{
+ "n_warnings": "__count__ warning",
+ "n_warnings_plural": "__count__ warnings",
+ "n_errors": "__count__ error",
+ "n_errors_plural": "__count__ errors",
"view_pdf": "View PDF",
"your_project_has_errors": "Your project has errors",
"view_warnings": "View warnings",