CODEWITHSUNDEEP
next.jserror-handlingreact-error-boundarynextjs14
Sammonnay Sarcar
Sammonnay Sarcar

Reputation: 1

Error Handling error in app router in nextJS14

Tried to use the error boundary handling feature of nextJS in this project. While it redirects to the error component, I get errors on the console. This is my test component where I force an error.

const session = null;

export default function Home() {
  if (!session) {
    throw new Error("NOT FUCKING WORKING");
  }
  return <main>THIS IS THE MAIN PAGE</main>;
}

This is my error.tsx code

"use client";
import React from "react";

const error = ({}) => {
  return <div>error</div>;
};
export default error;

Now, I am getting the error.tsx UI but getting errors in the console.

redirect-boundary.js:57 Uncaught Error: NOT WORKING at Home (webpack-internal:///(rsc)/./app/test/page.tsx:11:15) at e_ (D:\Cherche-Next\cherche\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:264092) at e (D:\Cherche-Next\cherche\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:268224) at eF (D:\Cherche-Next\cherche\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:268712) at eq (D:\Cherche-Next\cherche\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:274676) at ej (D:\Cherche-Next\cherche\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:264920) at e_ (D:\Cherche-Next\cherche\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:263962) at e (D:\Cherche-Next\cherche\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:268224) at eF (D:\Cherche-Next\cherche\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:268712) at D:\Cherche-Next\cherche\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:265943 at Array.toJSON (D:\Cherche-Next\cherche\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:266407) at stringify () at eq (D:\Cherche-Next\cherche\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:274775) at eJ (D:\Cherche-Next\cherche\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:275293) at Timeout._onTimeout (D:\Cherche-Next\cherche\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:265080) at listOnTimeout (node:internal/timers:573:17) at process.processTimers (node:internal/timers:514:7) app-index.js:33 The above error occurred in the component:

at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:243:11)
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:348:11)
at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:153:9)
at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:228:11)
at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:369:11)
at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:243:11)
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:348:11)
at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:153:9)
at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:228:11)
at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:369:11)
at div
at body
at html
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)
at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:11)
at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11)
at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:577:13)
at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27)
at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)
at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundaryHandler.

OR IS THIS SUPPOSED TO HAPPEN AND I AM JUST OVERTHINKING.

Tried using useEffect, useState, Custom Hook, try-catch, promise-resolve, then-catch .

Upvotes: 0

Views: 1166

Answers (1)

Codetheft
Codetheft

Reputation: 36

Test your app in build, you may not get the UI from the development mode.

Reference

Upvotes: 0

Related Questions