From 64019f2debec3e3793a1bd21bfdd8080b278f9e7 Mon Sep 17 00:00:00 2001 From: Elena Torro Date: Mon, 23 Mar 2026 16:21:39 +0100 Subject: [PATCH] :wrench: Improve WebGL not supported message --- frontend/src/app/main/errors.cljs | 3 +- frontend/src/app/main/ui/static.cljs | 21 ++++++++++ .../app/main/ui/workspace/viewport_wasm.cljs | 38 +++++++++++-------- frontend/translations/en.po | 12 ++++++ frontend/translations/es.po | 12 ++++++ 5 files changed, 70 insertions(+), 16 deletions(-) diff --git a/frontend/src/app/main/errors.cljs b/frontend/src/app/main/errors.cljs index 2327911e6f..239c4ac72e 100644 --- a/frontend/src/app/main/errors.cljs +++ b/frontend/src/app/main/errors.cljs @@ -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))))) diff --git a/frontend/src/app/main/ui/static.cljs b/frontend/src/app/main/ui/static.cljs index 3eb44668d0..e1929416de 100644 --- a/frontend/src/app/main/ui/static.cljs +++ b/frontend/src/app/main/ui/static.cljs @@ -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]))) diff --git a/frontend/src/app/main/ui/workspace/viewport_wasm.cljs b/frontend/src/app/main/ui/workspace/viewport_wasm.cljs index 89fe0459fe..09dfd5b6c9 100644 --- a/frontend/src/app/main/ui/workspace/viewport_wasm.cljs +++ b/frontend/src/app/main/ui/workspace/viewport_wasm.cljs @@ -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)))) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 4e52ddd5ee..923a4c5fd5 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -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" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index a2d6277640..da05555502 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -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"