fix: show stack trace in error page #137

marlonkeating · 2026-01-14T22:05:42Z

This pull request enhances the ErrorPage component to display additional error details, specifically the stack trace, when available. It also updates the error handling logic and associated tests to support this new functionality.

Stage Devstack Testing Instructions

Check out this change
Trigger an error in code. Example: git apply diff.txt (sample diff.txt)
run npm run start:stage
Navigate to https://localhost.stage.edx.org:1989/plan-details
Clear local React errors to view Error page
Verify error page shows stack trace

Copilot

Pull request overview

This pull request adds functionality to display stack traces on the error page to aid debugging during development. The changes include modifying the ErrorPage component to accept and display stack traces from route errors, refactoring error handling logic to extract the route error outside the custom hook, and updating tests to verify stack trace display.

Changes:

Modified ErrorPage component to display stack traces when available
Refactored useRouteErrorDerivedMessage to accept route error as parameter instead of calling useRouteError internally
Updated test to verify stack trace rendering

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

File	Description
src/components/ErrorPage/ErrorPage.tsx	Added stack trace display functionality, created new interfaces for error types, and refactored error handling logic
src/components/ErrorPage/tests/ErrorPage.test.tsx	Updated test to verify stack trace display and changed mock implementation from throwing to returning an error

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/components/ErrorPage/ErrorPage.tsx

Copilot · 2026-01-14T22:08:50Z

src/components/ErrorPage/ErrorPage.tsx

      <Image className="mb-3" src={ErrorIllustration} fluid alt="Something went wrong error page image" />
      <h2>{intl.formatMessage(errorPageMessages.errorHeader)}</h2>
      {message && (<p className="mb-0">{message}</p>)}
+      {stack && (<p className="mb-0">{stack}</p>)}


Stack traces typically contain newline characters and can be quite long. Rendering the entire stack trace as plain text within a paragraph tag may result in poor formatting and readability. Consider wrapping the stack trace in a <pre> or <code> element, adding CSS classes for proper formatting (e.g., monospace font, overflow handling), or truncating/collapsing long stack traces.

Suggested change

{stack && (<p className="mb-0">{stack}</p>)}

{stack && (<pre className="mb-0">{stack}</pre>)}

src/components/ErrorPage/ErrorPage.tsx

src/components/ErrorPage/tests/ErrorPage.test.tsx

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/components/ErrorPage/tests/ErrorPage.test.tsx

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-15T15:45:14Z

src/components/ErrorPage/ErrorPage.tsx

+interface UnknownError {
+  stack?: string;
+}


The interface name 'UnknownError' is misleading since it only contains a stack property. This interface is used to type route errors that may or may not be Error objects. Consider renaming to 'RouteErrorWithStack' or 'ErrorLike' to better reflect its purpose.

src/components/ErrorPage/tests/ErrorPage.test.tsx

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-15T16:00:36Z

src/components/ErrorPage/ErrorPage.tsx

+interface UnknownError {
+  stack?: string;
+}


The UnknownError interface only includes the stack property, but the routeError is cast to this type and then passed to getErrorMessage which expects properties like status, statusText, data, and message. This type casting could mask type safety issues. Consider making UnknownError extend or include all properties that might be needed, or use a union type that includes Error and other potential error types.

src/components/ErrorPage/tests/ErrorPage.test.tsx

src/components/ErrorPage/ErrorPage.tsx

brobro10000

Just a comment on switching the HTML tag to pre from p

brobro10000 · 2026-01-15T17:05:58Z

src/components/ErrorPage/ErrorPage.tsx

      <Image className="mb-3" src={ErrorIllustration} fluid alt="Something went wrong error page image" />
      <h2>{intl.formatMessage(errorPageMessages.errorHeader)}</h2>
      {message && (<p className="mb-0">{message}</p>)}
+      {stack && (<p className="mb-0">{stack}</p>)}


I would follow this suggestion from co-pilot to allow the stacktrace to be formatted correctly.
https://github.com/edx/frontend-app-enterprise-checkout/pull/137/changes#r2692239949

It is also what is currently done in the learner portal.
https://github.com/openedx/frontend-app-learner-portal-enterprise/blob/0a20f3252fcfdae585b453e31856ffd36029890e/src/components/app/AppErrorBoundary.tsx#L196C39-L196C42

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.

Comments suppressed due to low confidence (1)

src/components/ErrorPage/tests/ErrorPage.test.tsx:129

Consider adding a test case to verify that the stack trace is not displayed when the error object doesn't have a stack property (e.g., when routeError is a Response object, string, or other type). This ensures the optional chaining on line 109 of ErrorPage.tsx works correctly and doesn't attempt to display undefined values.

  it('displays default error message when useRouteError returns an unknown type', () => {
    (useRouteError as jest.Mock).mockReturnValue(12345);
    renderComponent();
    validateText("We're sorry, something went wrong");
  });

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-16T00:33:34Z

src/components/ErrorPage/ErrorPage.tsx


 const ErrorPage = ({ message }: ErrorPageProps) => {
-  const derivedErrorMessage = useRouteErrorDerivedMessage();
+  const routeError = useRouteError() as UnknownError;


The type assertion as UnknownError on line 101 is unsafe because useRouteError() can return various types (Error, Response, string, number, etc.). The UnknownError interface only has an optional stack property, which means accessing routeError?.stack might incorrectly assume a stack exists. Consider using a type guard to check if the error is an Error instance before accessing the stack property.

Copilot · 2026-01-16T00:33:34Z

src/components/ErrorPage/ErrorPage.tsx

+const getRouteErrorDerivedMessage = (routeError: UnknownError): string | undefined => {
  try {
-    const routeError = useRouteError();
    return routeError ? getErrorMessage(routeError) : undefined;
  } catch {
    return undefined;
  }
 };


The refactoring of useRouteErrorDerivedMessage to getRouteErrorDerivedMessage with an explicit parameter is good for testability. However, the try-catch block in this function may now be unnecessary since the error handling is moved upstream. The catch block will never be reached in normal circumstances because getErrorMessage doesn't throw errors. Consider removing the try-catch or adding a comment explaining what errors it's intended to catch.

Copilot · 2026-01-16T00:33:34Z

src/components/ErrorPage/tests/ErrorPage.test.tsx

+  it('displays error message and stack trace from useRouteError if it is an Error object', () => {
+    (useRouteError as jest.Mock).mockImplementation(() => {
+      const error = new Error('Hook failed');
+      error.stack = 'Insert stack trace here';
+      return error;
+    });
+    renderComponent();
+    validateText("We're sorry, something went wrong");
+    validateText('Hook failed');
+    validateText('Insert stack trace here');
+  });


The new test case validates that both the error message and stack trace are displayed, but it doesn't verify that they are rendered in separate pre elements as expected. Consider checking that the stack trace is actually displayed in its own element separate from the error message to ensure the UI structure is correct.

Copilot · 2026-01-16T00:33:35Z

src/components/ErrorPage/tests/ErrorPage.test.tsx

    validateText('500 Internal Server Error');
  });


The removed test case 'handles useRouteError throwing an error' was testing a scenario where useRouteError itself throws during execution. With the refactored code, if useRouteError throws on line 101, it will not be caught since the try-catch is now only in getRouteErrorDerivedMessage around getErrorMessage, not around the useRouteError call. Consider either restoring this test case or adding error boundary handling for the case where useRouteError might throw.

Copilot · 2026-01-16T00:33:35Z

src/components/ErrorPage/ErrorPage.tsx

 };

-const useRouteErrorDerivedMessage = (): string | undefined => {
+const getRouteErrorDerivedMessage = (routeError: UnknownError): string | undefined => {


The parameter type for getRouteErrorDerivedMessage is UnknownError, but it passes this to getErrorMessage which expects unknown. This type mismatch creates unnecessary type narrowing. Since getErrorMessage is designed to handle any unknown type and has its own type guards, getRouteErrorDerivedMessage should accept unknown as well rather than UnknownError.

Suggested change

const getRouteErrorDerivedMessage = (routeError: UnknownError): string | undefined => {

const getRouteErrorDerivedMessage = (routeError: unknown): string | undefined => {

fix: show stack trace in error page

1d2db54

Copilot AI review requested due to automatic review settings January 14, 2026 22:05

Copilot started reviewing on behalf of marlonkeating January 14, 2026 22:06 View session

Copilot AI reviewed Jan 14, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings January 15, 2026 00:10

Copilot started reviewing on behalf of marlonkeating January 15, 2026 00:10 View session

Copilot AI reviewed Jan 15, 2026

View reviewed changes

src/components/ErrorPage/tests/ErrorPage.test.tsx Outdated Show resolved Hide resolved

chore: update test description

e2055bc

marlonkeating force-pushed the mkeating/ENT-11060 branch from b8fd9dc to e2055bc Compare January 15, 2026 15:29

test: add non stack trace test case

7289b4e

Copilot AI review requested due to automatic review settings January 15, 2026 15:41

Copilot started reviewing on behalf of marlonkeating January 15, 2026 15:42 View session

Copilot AI reviewed Jan 15, 2026

View reviewed changes

marlonkeating added 2 commits January 15, 2026 15:47

chore: lint errors

772953b

chore: update function name

9ce18c5

Copilot AI review requested due to automatic review settings January 15, 2026 15:55

Copilot started reviewing on behalf of marlonkeating January 15, 2026 15:56 View session

Copilot AI reviewed Jan 15, 2026

View reviewed changes

pwnage101 approved these changes Jan 15, 2026

View reviewed changes

src/components/ErrorPage/ErrorPage.tsx Outdated Show resolved Hide resolved

brobro10000 approved these changes Jan 15, 2026

View reviewed changes

brobro10000 reviewed Jan 15, 2026

View reviewed changes

marlonkeating added 2 commits January 16, 2026 00:26

fix: update with pre tags

ddea104

test: remove redundant test

fb60d4b

Copilot AI review requested due to automatic review settings January 16, 2026 00:29

Copilot started reviewing on behalf of marlonkeating January 16, 2026 00:29 View session

Merge branch 'main' into mkeating/ENT-11060

4ac475d

Copilot AI reviewed Jan 16, 2026

View reviewed changes

marlonkeating merged commit d907dbb into main Jan 16, 2026
5 checks passed

marlonkeating deleted the mkeating/ENT-11060 branch January 16, 2026 00:34

	{stack && (<p className="mb-0">{stack}</p>)}
	{stack && (<pre className="mb-0">{stack}</pre>)}

	const getRouteErrorDerivedMessage = (routeError: UnknownError): string \| undefined => {
	const getRouteErrorDerivedMessage = (routeError: unknown): string \| undefined => {

fix: show stack trace in error page #137

fix: show stack trace in error page #137

Conversation

marlonkeating commented Jan 14, 2026 • edited by atlassian bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Stage Devstack Testing Instructions

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

brobro10000 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brobro10000 Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

marlonkeating commented Jan 14, 2026 •

edited by atlassian bot

Loading

brobro10000 left a comment •

edited

Loading