RFC: Replace getErrorMessage with {cause} or better message extractor

[fregante]

I think getErrorMessage should be used sparingly, we should review most usage in the extension. For example:

• Extracting the message to create a new Error
  This loses the original stack and possible nested causes. Solution: Use {cause}
  

  pixiebrix-extension/src/background/partnerIntegrations.ts

  Lines 146 to 149 in 6c49ab5

  	throw new Error(
  	`Control Room rejected login. Verify you are a user in the Control Room, and/or verify the Control Room SAML and AuthConfig App configuration.
  	Error: ${getErrorMessage(error)}`,
  	);

• Showing the error to the user
  • We can also show the cause, which can add more information (Error saving spreadsheet. \n Google API request failed. \n No internet connection)
    • We already have getErrorMessageWithCauses
    • The notification code is already set up for this, showing details on successive lines
  • Have a single React component take care of displaying an Error instance/object instead of passing strings around. This can potentially also include the stack on DEV builds
    • <ErrorDetails error={error} stack/>
    • <ErrorDetails error={error} showDetailsButton/>
    • There are actually already several of these components, each doing things a bit differently
• Changing the error type
  

  pixiebrix-extension/src/utils/enrichAxiosErrors.ts

  Line 69 in 6c49ab5

  throw new RemoteServiceError(getErrorMessage(error), { cause: error });

• Wrapping errors with inline error objects
  

  pixiebrix-extension/src/pageEditor/tabs/effect/useDocumentPreviewRunBlock.ts

  Lines 126 to 131 in 6c49ab5

  	error: {
  	name: "BlockRegistryError",
  	message: `Error loading brick from registry\n${getErrorMessage(
  	blockError,
  	)}`,
  	},

Related

• RFC: standardize error handling in React components #2937
• Review error handling in RTK #4032
• Error improvements #3372

Previous work on this

• #3372: Show full error cause list in page editor Log #3614

[fregante]

Here's another use case for a standardized error displayed component: automatic linkification of URLs.

Seen in #4775

[fregante]

Also often error states are not tested so they end up without proper padding. There are at least 3 ways to show errors in the sidebar:

• pixiebrix-extension/src/sidebar/PanelBody.tsx

  Lines 287 to 292 in 7ea0c52

  	{isRootPanel ? (
  	<RootCancelledPanel error={cancelError} />
  	) : (
  	<div className="text-muted">
  	This panel is not available: {getErrorMessage(state.error)}
  	</div>

• pixiebrix-extension/src/sidebar/SidebarErrorBoundary.tsx

  Line 25 in 7ea0c52

  class SidebarErrorBoundary extends ErrorBoundary {

---

---

Seen in #7469 and #7514

[github-actions]

This issue will be closed in 7 days unless the stale label is removed, or a comment is added to the issue.

[github-actions]

This issue was closed because it has been stale for 7 days with no activity.