🔧 Improve WebGL not supported message

This commit is contained in:
Elena Torro 2026-03-23 16:21:39 +01:00
parent 57be1428b3
commit 64019f2deb
5 changed files with 70 additions and 16 deletions

View File

@ -154,7 +154,8 @@
(ex/print-throwable cause)
(let [code (get error :code)]
(if (or (= code :panic)
(= code :webgl-context-lost))
(= code :webgl-context-lost)
(= code :webgl-not-supported))
(st/emit! (rt/assign-exception error))
(flash :type :handled :cause cause)))))

View File

@ -316,6 +316,24 @@
[:> button* {:variant "primary" :on-click on-reload}
(tr "labels.reload-page")]]]))
(def ^:const webgl-support-guide-url "https://example.com/TODO")
(mf/defc webgl-not-supported*
[]
(let [on-dashboard (mf/use-fn
(fn []
(st/emit! (rt/assign-exception nil))
(st/emit! (dcm/go-to-dashboard-recent))))]
[:> error-container* {}
[:div {:class (stl/css :main-message)} (tr "errors.webgl-not-supported.main-message")]
[:div {:class (stl/css :desc-message)} (tr "errors.webgl-not-supported.desc-message")]
[:div {:class (stl/css :buttons-container)}
(when (seq webgl-support-guide-url)
[:> button* {:variant "primary" :to webgl-support-guide-url :target "_blank"}
(tr "errors.webgl-not-supported.troubleshooting-link")])
[:> button* {:variant "secondary" :on-click on-dashboard}
(tr "labels.go-back")]]]))
(defn- generate-report
[data]
(try
@ -482,6 +500,9 @@
:webgl-context-lost
[:> webgl-context-lost*]
:webgl-not-supported
[:> webgl-not-supported*]
[:> internal-error* props])
[:> internal-error* props])))

View File

@ -16,11 +16,11 @@
[app.common.types.path :as path]
[app.common.types.shape :as cts]
[app.common.types.shape.layout :as ctl]
[app.main.data.common :as dcm]
[app.main.data.workspace.transforms :as dwt]
[app.main.data.workspace.variants :as dwv]
[app.main.features :as features]
[app.main.refs :as refs]
[app.main.router :as rt]
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.flex-controls :as mfc]
@ -310,20 +310,28 @@
(->> wasm.api/module
(p/fmap (fn [ready?]
(when ready?
(let [init? (try
(wasm.api/init-canvas-context canvas)
(catch :default e
(js/console.error "Error initializing canvas context:" e)
false))]
(reset! canvas-init? init?)
(when init?
;; Restore previous canvas pixels immediately after context initialization
;; This happens before initialize-viewport is called
(wasm.api/apply-canvas-blur)
(wasm.api/restore-previous-canvas-pixels))
(when-not init?
(js/alert "WebGL not supported")
(st/emit! (dcm/go-to-dashboard-recent))))))))
(let [try-init
(fn try-init [retries]
(let [init? (try
(wasm.api/init-canvas-context canvas)
(catch :default e
(js/console.error "Error initializing canvas context:" e)
false))]
(cond
init?
(do
(reset! canvas-init? true)
(wasm.api/apply-canvas-blur)
(wasm.api/restore-previous-canvas-pixels))
(pos? retries)
(js/setTimeout #(try-init (dec retries)) 500)
:else
(st/emit! (rt/assign-exception
{:type :wasm-error
:code :webgl-not-supported})))))]
(try-init 3))))))
(fn []
(wasm.api/clear-canvas))))

View File

@ -1609,6 +1609,18 @@ msgstr "WebGL has stopped working. Please reload the page to reset it"
msgid "errors.webgl-context-lost.main-message"
msgstr "Oops! The canvas context was lost"
#: src/app/main/ui/static.cljs
msgid "errors.webgl-not-supported.desc-message"
msgstr "WebGL is not available, which is required for Penpot to work. Please, check your browser settings or close heavy applications."
#: src/app/main/ui/static.cljs
msgid "errors.webgl-not-supported.main-message"
msgstr "Oops! WebGL is not available"
#: src/app/main/ui/static.cljs
msgid "errors.webgl-not-supported.troubleshooting-link"
msgstr "Read the troubleshooting guide"
#: src/app/main/ui/dashboard/team.cljs:1051
msgid "errors.webhooks.connection"
msgstr "Connection error, URL not reacheable"

View File

@ -1582,6 +1582,18 @@ msgstr "WebGL ha dejado de funcionar. Por favor, recarga la página para restaur
msgid "errors.webgl-context-lost.main-message"
msgstr "Ups! Se ha perdido el contexto del canvas"
#: src/app/main/ui/static.cljs
msgid "errors.webgl-not-supported.desc-message"
msgstr "WebGL no está disponible, y es necesario para que Penpot funcione. Cierra otras aplicaciones o comprueba los ajustes de tu navegador."
#: src/app/main/ui/static.cljs
msgid "errors.webgl-not-supported.main-message"
msgstr "¡Vaya! WebGL no está soportado"
#: src/app/main/ui/static.cljs
msgid "errors.webgl-not-supported.troubleshooting-link"
msgstr "Consulta la guía"
#: src/app/main/ui/dashboard/team.cljs:1051
msgid "errors.webhooks.connection"
msgstr "Error de conexion, la url no es alcanzable"