<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Error-Action on Tarragon</title><link>https://tarrragon.github.io/blog/tags/error-action/</link><description>Recent content in Error-Action on Tarragon</description><generator>Hugo -- gohugo.io</generator><language>zh-TW</language><copyright>Tarragon (CC BY 4.0)</copyright><lastBuildDate>Fri, 17 Jul 2026 00:00:00 +0800</lastBuildDate><atom:link href="https://tarrragon.github.io/blog/tags/error-action/index.xml" rel="self" type="application/rss+xml"/><item><title>U.C13 匯入錯誤卡片出現「重新載入擴充功能」— 錯誤行動與層級不對位</title><link>https://tarrragon.github.io/blog/ux-design/cases/import-error-reload-extension-mismatch/</link><pubDate>Fri, 17 Jul 2026 00:00:00 +0800</pubDate><guid>https://tarrragon.github.io/blog/ux-design/cases/import-error-reload-extension-mismatch/</guid><description>&lt;p>錯誤 UI 提供的行動，解決問題的層級要等於錯誤發生的層級 — 資料層的錯誤配上執行環境層的行動（重載擴充功能），既不解決問題、又放大破壞半徑。這張卡記錄這條對位原則被通用錯誤容器打破、由使用者回饋抓回來的過程。&lt;/p>
&lt;h2 id="觀察">觀察&lt;/h2>
&lt;p>電子書庫總覽 Chrome 擴充功能（book_overview_v1）的匯入功能出錯時（檔案格式錯誤、內容不合法），錯誤顯示複用了 popup 的通用 &lt;code>errorContainer&lt;/code> — 這個容器是為擴充功能執行層錯誤設計的，帶「重新載入擴充功能」按鈕。使用者回饋指出：Chrome Web Store 上架版對「匯入錯誤」不該出現 reload extension 按鈕（commit &lt;code>72cd5f370&lt;/code>）。&lt;/p>
&lt;p>修復：建匯入專屬的 &lt;code>importErrorContainer&lt;/code>，只有「關閉」按鈕（沒有 retry / reload）— 匯入錯誤的正確下一步是換一個檔案再試，不是重載執行環境；同時把文案集中到 &lt;code>IMPORT_MESSAGES&lt;/code> 常數、移除對通用錯誤處理器的依賴。&lt;/p>
&lt;h2 id="判讀">判讀&lt;/h2>
&lt;ol>
&lt;li>
&lt;p>&lt;strong>錯誤有層級、行動也有層級&lt;/strong>。檔案格式錯誤是資料層、訊息通道斷線是通訊層、service worker 崩潰是執行環境層。行動同樣分層：換檔案重試（資料層）、重新連線（通訊層）、重載擴充功能（執行環境層）。對位原則：行動解決的層級 = 錯誤發生的層級。層級過重的行動不解決問題（重載擴充功能不會讓壞檔案變好）、還附帶代價（狀態遺失、流程中斷）。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>通用錯誤容器是不對位的結構性來源&lt;/strong>。為最嚴重錯誤設計的容器（帶最重的行動）被所有錯誤複用時，輕錯誤自動繼承重行動。錯誤 UI 的複用要以「行動相容」為邊界、不是以「都是錯誤」為邊界。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>使用者會照著按鈕走&lt;/strong>。錯誤畫面上的按鈕是系統給的行動建議，使用者傾向直接採納 — 不對位的按鈕等於系統主動引導使用者做無效且有代價的操作。&lt;/p>
&lt;/li>
&lt;/ol>
&lt;h2 id="策略">策略&lt;/h2>
&lt;ol>
&lt;li>
&lt;p>&lt;strong>對每個錯誤 UI 的行動清單問一句&lt;/strong>：這個行動解決的層級，等於這個錯誤發生的層級嗎？過重（重載 / 重啟 / 重裝出現在資料層錯誤）與過輕（執行環境崩潰只給「關閉」）都是缺口。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>錯誤容器按行動分組&lt;/strong>：行動集合不同的錯誤用不同容器 / 元件，避免複用時行動一起被繼承。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>文案與行動集中管理&lt;/strong>：錯誤訊息散在 HTML 各處時，行動不對位很難被掃描發現；集中成常數表後「哪類錯誤配哪些行動」一眼可查。&lt;/p>
&lt;/li>
&lt;/ol>
&lt;h2 id="下一步路由">下一步路由&lt;/h2>
&lt;ul>
&lt;li>錯誤訊息的診斷與行動職責 → &lt;a href="https://tarrragon.github.io/blog/ux-design/04-error-recovery/error-message-principles/" data-link-title="錯誤訊息撰寫原則" data-link-desc="錯誤訊息的兩個職責：使用者能讀懂發生什麼、使用者能決定下一步做什麼">錯誤訊息撰寫原則&lt;/a>&lt;/li>
&lt;li>重試行動的設計 → &lt;a href="https://tarrragon.github.io/blog/ux-design/04-error-recovery/retry-mechanism-ux/" data-link-title="Retry 機制 UX" data-link-desc="自動 vs 手動重試、指數退避 vs 立即重試 — 重試策略的選擇取決於失敗的可恢復性和使用者的等待意願">Retry 機制 UX&lt;/a>&lt;/li>
&lt;li>對照案例（行動缺失 — 只有重試沒有退路）→ &lt;a href="https://tarrragon.github.io/blog/ux-design/cases/five-states-zero-exits/" data-link-title="U.C1 Terminal 畫面五個狀態零個退出路徑" data-link-desc="Flutter app 的 Terminal 畫面有 idle/connecting/connected/error/disconnected 五個 enum 狀態，每個狀態都沒有 back 或 disconnect 按鈕 — 使用者一旦進入就出不去">U.C1 五個狀態零個退出路徑&lt;/a>&lt;/li>
&lt;/ul></description><content:encoded><![CDATA[<p>錯誤 UI 提供的行動，解決問題的層級要等於錯誤發生的層級 — 資料層的錯誤配上執行環境層的行動（重載擴充功能），既不解決問題、又放大破壞半徑。這張卡記錄這條對位原則被通用錯誤容器打破、由使用者回饋抓回來的過程。</p>
<h2 id="觀察">觀察</h2>
<p>電子書庫總覽 Chrome 擴充功能（book_overview_v1）的匯入功能出錯時（檔案格式錯誤、內容不合法），錯誤顯示複用了 popup 的通用 <code>errorContainer</code> — 這個容器是為擴充功能執行層錯誤設計的，帶「重新載入擴充功能」按鈕。使用者回饋指出：Chrome Web Store 上架版對「匯入錯誤」不該出現 reload extension 按鈕（commit <code>72cd5f370</code>）。</p>
<p>修復：建匯入專屬的 <code>importErrorContainer</code>，只有「關閉」按鈕（沒有 retry / reload）— 匯入錯誤的正確下一步是換一個檔案再試，不是重載執行環境；同時把文案集中到 <code>IMPORT_MESSAGES</code> 常數、移除對通用錯誤處理器的依賴。</p>
<h2 id="判讀">判讀</h2>
<ol>
<li>
<p><strong>錯誤有層級、行動也有層級</strong>。檔案格式錯誤是資料層、訊息通道斷線是通訊層、service worker 崩潰是執行環境層。行動同樣分層：換檔案重試（資料層）、重新連線（通訊層）、重載擴充功能（執行環境層）。對位原則：行動解決的層級 = 錯誤發生的層級。層級過重的行動不解決問題（重載擴充功能不會讓壞檔案變好）、還附帶代價（狀態遺失、流程中斷）。</p>
</li>
<li>
<p><strong>通用錯誤容器是不對位的結構性來源</strong>。為最嚴重錯誤設計的容器（帶最重的行動）被所有錯誤複用時，輕錯誤自動繼承重行動。錯誤 UI 的複用要以「行動相容」為邊界、不是以「都是錯誤」為邊界。</p>
</li>
<li>
<p><strong>使用者會照著按鈕走</strong>。錯誤畫面上的按鈕是系統給的行動建議，使用者傾向直接採納 — 不對位的按鈕等於系統主動引導使用者做無效且有代價的操作。</p>
</li>
</ol>
<h2 id="策略">策略</h2>
<ol>
<li>
<p><strong>對每個錯誤 UI 的行動清單問一句</strong>：這個行動解決的層級，等於這個錯誤發生的層級嗎？過重（重載 / 重啟 / 重裝出現在資料層錯誤）與過輕（執行環境崩潰只給「關閉」）都是缺口。</p>
</li>
<li>
<p><strong>錯誤容器按行動分組</strong>：行動集合不同的錯誤用不同容器 / 元件，避免複用時行動一起被繼承。</p>
</li>
<li>
<p><strong>文案與行動集中管理</strong>：錯誤訊息散在 HTML 各處時，行動不對位很難被掃描發現；集中成常數表後「哪類錯誤配哪些行動」一眼可查。</p>
</li>
</ol>
<h2 id="下一步路由">下一步路由</h2>
<ul>
<li>錯誤訊息的診斷與行動職責 → <a href="/blog/ux-design/04-error-recovery/error-message-principles/" data-link-title="錯誤訊息撰寫原則" data-link-desc="錯誤訊息的兩個職責：使用者能讀懂發生什麼、使用者能決定下一步做什麼">錯誤訊息撰寫原則</a></li>
<li>重試行動的設計 → <a href="/blog/ux-design/04-error-recovery/retry-mechanism-ux/" data-link-title="Retry 機制 UX" data-link-desc="自動 vs 手動重試、指數退避 vs 立即重試 — 重試策略的選擇取決於失敗的可恢復性和使用者的等待意願">Retry 機制 UX</a></li>
<li>對照案例（行動缺失 — 只有重試沒有退路）→ <a href="/blog/ux-design/cases/five-states-zero-exits/" data-link-title="U.C1 Terminal 畫面五個狀態零個退出路徑" data-link-desc="Flutter app 的 Terminal 畫面有 idle/connecting/connected/error/disconnected 五個 enum 狀態，每個狀態都沒有 back 或 disconnect 按鈕 — 使用者一旦進入就出不去">U.C1 五個狀態零個退出路徑</a></li>
</ul>
]]></content:encoded></item></channel></rss>