如何修復 Next.js 中的錯誤“PrismaClient 無法在瀏覽器上運行”

我在 Next.js 網站上遇到了這個錯誤: PrismaClient 無法在瀏覽器上運行 我擁有這個頁面,並且它一切正常,直到我在代碼中註釋了一行,特別是在我的 getStaticProps() 方法中。 在那一行中,我調用了我在頁面文件頂部導入的 Prisma 實例的方法。 基本上,Next.js 會查看我們在 getStaticProps() 中使用的代碼並將其用於後端。它不會將其發送到前端。 當我在 getStaticProps() 中註釋掉使用 Prisma 的那行時,Next.js 將 Prisma 包含在我的前端代碼中,然後我就會收到該錯誤“PrismaClient 無法在瀏覽器上運行”。 解決方法是也註釋(或刪除)Prisma導入。 同時,請記住 getStaticProps() 只在頁面路由中被調用,而不是在其他組件中,所以如果這個錯誤來自一個組件,你必須將邏輯移至頁面路由組件。

如何修復 Next.js 的「找不到模組」錯誤

我在使用 Next.js 時遇到了以下問題: 模組找不到:找不到 ‘fs’ 在 Next.js 頁面中,您可以從加載 Node.js 模組的文件中導入方法。 這是沒問題的,只要您也在 getStaticProps() 中使用被導入的方法。 舉個例子,我有以下程式碼: import { getData } from '../lib/data' //... export async function getStaticProps() { const data = getData() return { props: { data, }, } } 當我把 const data = getData() 註解掉後,Next.js 開始報錯「找不到 ‘fs’ 模組」,因為 fs 是我在 lib/data 中首先導入的模組。 這種情況也可能發生在您導入的任何其他 Node 庫上。 原因是在 getStaticProps() 中的任何內容僅在在服務器環境中運行時才被調用,但如果我們不在其中調用 Node.js 函數,Next.js 就不知道該怎麼辦。

如何處理 PHP 中的錯誤

每位程式設計師都會犯錯。畢竟,我們都是人類。 可能會忘記加上分號,使用錯誤的變數名稱,或者傳遞錯誤的引數給函式。 在 PHP 中有三種主要的錯誤類型: 警告:這些是較輕微的錯誤,不會停止程式的執行。PHP 會輸出一個訊息,然後繼續執行。 注意事項:與警告類似,注意事項也不會停止程式的執行,而只是輸出一個訊息。 錯誤:錯誤會終止程式的執行,並輸出一個告訴你錯誤原因的訊息。 錯誤訊息在哪裡輸出呢?這取決於你的設定。 在開發模式中,將 PHP 的錯誤直接記錄到網頁中很常見,同時也記錄在錯誤日誌中。你希望能夠盡早看到這些錯誤,以便修正它們。 然而,在正式部署環境中,你不希望在網頁中顯示這些錯誤,但你仍然想要知道它們。因此,你需要將它們記錄到錯誤日誌中。 這些設定都在 PHP 的設定檔中決定。 如果你還不熟悉這些,沒關係,你的伺服器配置中有一個檔案決定了 PHP 的運行方式,它就是 php.ini。 php.ini 的確切位置取決於你的設定。要找出自己的設定,最簡單的方法是將以下程式碼添加到一個 PHP 檔案中,然後在瀏覽器中執行它: <?php phpinfo(); ?> 然後你將在 “Loaded Configuration File” 下方看到檔案位置: 在我的例子中是 /Applications/MAMP/bin/php/php8.1.0/conf/php.ini。 注意:phpinfo() 生成的資訊包含了許多其他有用的資訊,記得查看它們。 使用 MAMP,你可以打開 MAMP 應用程式資料夾,然後打開 bin/php,進入你所使用的 PHP 版本(例如我的是 8.1.0),然後進入 conf。在那裡你會找到 php.ini 檔案: 打開這個檔案,裡面有一長串的設定,並提供了對每個設定的詳細解釋。 我們對 display_errors 非常感興趣: 在正式部署環境中,希望設置它的值為 Off,如上方的文件所說。 這將使得錯誤不會再顯示在網頁上,但你仍然可以在這個案例中的 MAMP 的 logs 資料夾中的 php_error.log 檔案中看到它們: 這個檔案的位置取決於你的配置方式。 你可以使用 error_log() 函式將額外的資訊加入錯誤日誌: error_log('test'); 通常會使用錯誤記錄服務(例如 Monolog)來處理錯誤。

如何處理 React 中的錯誤

使用錯誤邊界 (error boundaries) 的最佳實踐來處理 React 中的錯誤 當在組件中發生錯誤時,React 會卸載整個 React 組件樹,渲染出「空白」的頁面。這是 React 處理崩潰的方式。 您不希望錯誤顯示給用戶。React 選擇顯示空白頁面。 然而,這只是默認行為。讓空白頁面出現只比給用戶顯示晦澀的訊息好一點,但您應該找到更好的方式。 如果您處於開發模式,任何錯誤將觸發詳細的堆棧跟踪信息顯示到瀏覽器的開發工具控制台中。但在正式環境中,您不想把錯誤訊息直接印給用戶。 在正式環境中,您應該攔截錯誤,並向用戶顯示某種有用的訊息。 這就是「錯誤邊界」 (error boundaries) 發揮作用的地方。 使用錯誤邊界,您可以分離應用的各個部分並在本地處理錯誤。 錯誤邊界是一個實現了 componentDidCatch() 生命周期事件的 React 組件,並將其他組件封裝在內: class ErrorHandler extends React.Component { constructor(props) { super(props) this.state = { errorOccurred: false } } componentDidCatch(error, info) { this.setState({ errorOccurred: true }) logErrorToMyService(error, info) } render() { return this.state.errorOccurred ? <h1>出現錯誤了!</h1> : this.props.children } } 然後在組件的 JSX 中以以下方式使用它: <ErrorHandler> <SomeOtherComponent /> </ErrorHandler> 當 SomeOtherComponent 或其他子組件中發生錯誤時,以及它們擁有的整個組件子樹中發生的錯誤,ErrorHandler 將攔截並使您能夠優雅地處理錯誤。...

如何解決 React Native 的「unrecognized command run-ios」錯誤

一個快速解決 React Native 錯誤的指南 我正在建立一個新的 React Native 專案,並執行以下指令來啟動: npx react-native run-ios 結果卻出現了一個帶有以下內容的錯誤訊息: unrecognized command "run-ios" 我無法理解這個錯誤,直到我意識到我是在我的主目錄中執行這個指令。 實際上,這個指令需要在專案的目錄中執行。 請先切換到 React Native 專案的目錄中,然後這個錯誤應該會消失,React Native 應用程式也會成功啟動。

當請求失敗時,Axios導致Node.js進程崩潰

我有一段使用axios進行網絡請求的代碼: axios({ method: 'post', url: 'https://...', data: JSON.stringify({ ... }) }) 但是我注意到當請求因某種原因失敗時,它會導致Node.js進程崩潰。 直到我添加了catch()的處理: axios({ method: 'post', url: 'https://...', data: JSON.stringify({ ... }) }).catch((err) => { console.error(err) })