Error Handling error in app router in nextJS14

Question

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 .

Codetheft · Accepted Answer · 2024-05-30 06:27:49Z

0

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

Reference

answered May 30, 2024 at 6:27

Codetheft

364 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Error Handling error in app router in nextJS14

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related