From 03e241bfbd9c5af478a04215f006aaeaed552bcf Mon Sep 17 00:00:00 2001
From: Pablo Brasero <pablo@pablobm.com>
Date: Thu, 28 May 2026 17:18:56 +0100
Subject: [PATCH] Display error message if note creation fails

Co-authored-by: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com>
---
 app/assets/javascripts/index/new_note.js | 42 ++++++++++++++++--------
 app/views/notes/new.html.erb             |  6 ++++
 config/locales/en.yml                    |  1 +
 test/system/create_note_test.rb          | 20 +++++++++++
 4 files changed, 55 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js
index ab1caba93..ee1ce9d84 100644
--- a/app/assets/javascripts/index/new_note.js
+++ b/app/assets/javascripts/index/new_note.js
@@ -16,10 +16,12 @@ OSM.NewNote = function (map) {
         control = $(".control-note"),
         addNoteButton = control.find(".control-button");
   let newNoteMarker,
-      halo;
+      halo,
+      errorPanel,
+      errorPanelDetail;
 
-  function createNote(location, text, callback) {
-    fetch("/api/0.6/notes.json", {
+  function createNote(location, text) {
+    return fetch("/api/0.6/notes.json", {
       method: "POST",
       headers: { ...OSM.oauth },
       body: new URLSearchParams({
@@ -28,8 +30,10 @@ OSM.NewNote = function (map) {
         text
       })
     })
-      .then(response => response.json())
-      .then(callback);
+      .then(resp => {
+        if (resp.ok) return resp.json();
+        throw new Error(`Got response with status ${resp.status} ${resp.statusText}`);
+      });
   }
 
   function addCreatedNoteMarker(feature) {
@@ -141,20 +145,30 @@ OSM.NewNote = function (map) {
       const location = newNoteMarker.getLatLng().wrap();
       const text = content.find("textarea").val();
 
+      errorPanel = content.find(".new-note-error");
+      errorPanel.addClass("d-none");
+      errorPanelDetail = errorPanel.find(".new-note-error-detail");
+
       e.preventDefault();
       $(this).prop("disabled", true);
       newNoteMarker.options.draggable = false;
       newNoteMarker.dragging.disable();
 
-      createNote(location, text, (feature) => {
-        if (typeof OSM.user === "undefined") {
-          const anonymousNotesCount = Number(OSM.cookies.get("_osm_anonymous_notes_count")) || 0;
-          OSM.cookies.set("_osm_anonymous_notes_count", anonymousNotesCount + 1, { expires: 14 });
-        }
-        content.find("textarea").val("");
-        addCreatedNoteMarker(feature);
-        OSM.router.route("/note/" + feature.properties.id);
-      });
+      createNote(location, text)
+        .then(feature => {
+          if (typeof OSM.user === "undefined") {
+            const anonymousNotesCount = Number(OSM.cookies.get("_osm_anonymous_notes_count")) || 0;
+            OSM.cookies.set("_osm_anonymous_notes_count", anonymousNotesCount + 1, { expires: 14 });
+          }
+          content.find("textarea").val("");
+          addCreatedNoteMarker(feature);
+          OSM.router.route("/note/" + feature.properties.id);
+        })
+        .catch(err => {
+          errorPanel.removeClass("d-none");
+          errorPanelDetail.text(err.message || err);
+          updateControls();
+        });
     });
 
     map.on("click", moveNewNoteMarkerToClick);
diff --git a/app/views/notes/new.html.erb b/app/views/notes/new.html.erb
index 15cd4ae96..7031d97d1 100644
--- a/app/views/notes/new.html.erb
+++ b/app/views/notes/new.html.erb
@@ -24,6 +24,12 @@
     <div class="mb-3">
       <%= text_area_tag "text", "", :class => "form-control", :size => "40x10", :maxlength => "2000", :placeholder => t(".advice") %>
     </div>
+    <div class="new-note-error alert alert-danger d-none">
+      <details>
+        <summary><%= t(".error") %></summary>
+        <p class="new-note-error-detail"></p>
+      </details>
+    </div>
     <div>
       <%= submit_tag t(".add"), :name => "add", :disabled => 1, :class => "btn btn-primary" %>
     </div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index b01000444..d502fab2b 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -3568,6 +3568,7 @@ en:
         url: https://community.openstreetmap.org/
       advice: "Your note is public and may be used to update the map, so don't enter personal information, or information from copyrighted maps or directory listings."
       add: Add Note
+      error: "There was an error when creating the note"
     new_readonly:
       title: "New Note"
       warning: "New notes cannot be created because the OpenStreetMap API is currently in read-only mode."
diff --git a/test/system/create_note_test.rb b/test/system/create_note_test.rb
index f74b1a64c..0527b5f38 100644
--- a/test/system/create_note_test.rb
+++ b/test/system/create_note_test.rb
@@ -132,6 +132,26 @@ class CreateNoteTest < ApplicationSystemTestCase
     check_no_encouragement_while_logging_out
   end
 
+  test "shows a message when there is an error creating a note" do
+    visit new_note_path(:anchor => "map=18/0/0")
+
+    execute_script <<~SCRIPT
+      window.fetch = (...args) => {
+        return Promise.reject("The test injected a forced error");
+      }
+    SCRIPT
+
+    within_sidebar do
+      fill_in "text", :with => "Some newly added note description"
+      click_on "Add Note"
+
+      assert_content "There was an error when creating the note"
+      find(".new-note-error summary").click
+      assert_content "The test injected a forced error"
+      assert_button "Add Note", :disabled => false
+    end
+  end
+
   private
 
   def check_encouragement_while_creating_notes(encouragement_threshold)
-- 
2.47.3