simonallen 技術部落格

Sign in Subscribe

React.js

錯誤處理：開發 Client 別忘了實作 Error View 錯誤畫面

錯誤處理：開發 Client 別忘了實作 Error View 錯誤畫面

在 Web 前端中，若 JS Runtime 發生錯誤（例如存取 undefined 的屬性），頁面往往會直接變成一片空白，沒有任何提示，讓使用者以為網頁整個掛了。雖然這對效能沒有幫助，但對使用者體驗來說卻非常關鍵。很多 Web 網站並未針對錯誤做處理。常見情境當 Web JS 拋出錯誤或後端 API 欄位漏給資訊，JavaScript 取用 response 不存在的物件 null 、undefined下另個不存在的值，就會拋出錯誤，若是沒實作 try-catch 或拋出的錯誤在元件樹層層傳遞都沒被接住，瀏覽器就會一片空白。這在產品開發上是不太能接受的，通常會有個「something went wrong」的錯誤畫面，提醒使用者網頁壞囉。例如 2020年 youtube 有爆掉過一次，大家就看猴子一個下午。面對預料外的錯誤，Client

Next.js 入門：由 CRA 至 Gatsby 與 Next.js

此文不會講解為什麼 SSR 對 SEO 和 LCP 有幫助的原因如果不懂 LCP 是什麼，可見 Google 關於 LCP 指標的說明如果連 SPA 和 SSR 是什麼都不太懂，可以參考 Huli 大大寫的跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR 前言前陣子的 React 生態圈可謂是振奮人心，官方在今年 6 月初公布了 18 版的計畫，其中基於 Suspense 的 Server Side Rendering 架構另許多開發者眼睛一亮，畢竟從 Client Side Rendering (以下簡稱 CSR)跨到

Next.js 入門：使用 next export 輸出 static file

此篇以 Next.js 11.0.1 版為主，內容僅供參考。若要使用 Next.js SSG 額外輸出 static HTML，不打算把 SSG 的內容置於 Next.js 的 Node.js Server 上的話，光靠目前 package.json 的 scripts 指令是不夠的，我們需要使用 next export。修改 package.json scripts 使用 create-next-app 建立好預設 Next 專案後，到 package.json 修改 scripts，在 "

Next.js 入門：Error: Image Optimization using Next.js' default loader is not compatible with next export.

前陣子使用 Next.js SSG 靜態頁面遇到問題，記錄一下： SSG build time 時報錯 log 如下： Error: Image Optimization using Next.js' default loader is not compatible with `next export`. Possible solutions: - Use `next start` to run a server, which includes the Image Optimization API. - Use any provider which supports Image

用 HTML br 替換 ↵ 換行前先想一想

這篇算是一個隨手紀錄，不要輕易用 <br/> 替換換行 ↵，先想想有沒有其他的方式。起因前陣子在處理前人的 Legacy code，有個情境是使用者在後台頁面輸入文章，前端把其 show 在前台頁面上。當然後端會在需顯示的前台頁面 API 將其(字串)發過來，這個字串不包含 HTML 標籤，可能包含換行符號，為了處理這個狀況，前人寫了個共用 function 來將換行符號替換成 HTML <br/> 標籤，例如： const setTextLineFeed = text => text.replace(/\n/g,'<br/>'); 將後端傳來包含換行符號的字串，先丟進這個 function

自幹 React Img LazyLoad 元件

為什麼要使用圖片 LazyLoad？ 1. 減少頻寬浪費圖片與影片是網站中最吃資源的元素之一，尤其在行動網路環境下，過度 PreLoad 預載會導致頻寬浪費。LazyLoad 可延遲非可視範圍內的圖片載入，只在使用者滑動到該區域時才載入圖片。 2. 提升首次載入速度圖片載入不只是下載，還會耗用瀏覽器 CPU 解析與渲染時間。 LazyLoad 可避免瀏覽器在首次載入時就忙著處理整頁圖片，提升 First Paint 時間，讓內容更快顯示。 3. 強化使用者體驗使用者更快看到畫面上可見的內容，自然會覺得「這網頁好快」。反之，如果等圖卡住了頁面，體驗就會大打折扣。各大網站 LazyLoad 的應用範例 PChome 先顯示灰底圖片，等圖片載入後才替換。 ETtoday 有 loading 動畫的底圖，載入圖片後再替換。 Medium 的高級做法：漸進式圖片置換 Medium 的做法分成三階段： 1.

React v14 和 v16 Style 行內樣式的雷

昨天在公司遇到 React Style 行內樣式的雷，害我 dubug 了老半天。是這樣的我們公司有兩個 B2C 的網站平台長得很像，差異只在顏色與風格不同，一個網站前端是 React v14，另一個相對新是用 React v16，而兩個網站很多功能都要一樣，所以一個前端元件寫好後要想辦法讓 React 的 14 版和 16 版共用，要到各自不同的專案複製貼上元件程式碼接著微調。通常是舊的不支援新的，於是先改 React v14 的網站，按照該元件既有寫法，行內樣是這樣寫： <div style={{ width: "820", height: "360" }} ></div> 改完後將這個元件貼給 React