Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: error boundary in layout to handle application errors / crashes #1108

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+69 −18
Open

feat: error boundary in layout to handle application errors / crashes #1108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
03cc946
error boundary added
catosaurusrex2003 Nov 13, 2024
0f7fcaa
Merge branch 'master' of https://github.com/catosaurusrex2003/asyncap…
catosaurusrex2003 Nov 13, 2024
338df63
removed console.log
catosaurusrex2003 Nov 13, 2024
305eca0
linting
catosaurusrex2003 Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions library/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@
"isomorphic-dompurify": "^2.14.0",
"marked": "^4.0.14",
"openapi-sampler": "^1.2.1",
"react-error-boundary": "^4.1.2",
"use-resize-observer": "^9.1.0"
},
"peerDependencies": {
Expand Down
31 changes: 31 additions & 0 deletions library/src/containers/ApplicationErrorHandler/ErrorBoundary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from 'react';
import { ReactNode } from 'react';
import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
import { ErrorObject } from '../../types';
import { Error } from '../Error/Error';

interface Props {
children: ReactNode;
}

function fallbackRender({ error }: FallbackProps) {
const ErrorObject: ErrorObject = {
title: 'Something went wrong',
type: 'application-error',
validationErrors: [
{
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
title: error?.message,
},
],
};
return <Error error={ErrorObject} />;
}

const AsyncApiErrorBoundary = ({ children }: Props) => {
return (
<ErrorBoundary fallbackRender={fallbackRender}>{children}</ErrorBoundary>
);
};

export default AsyncApiErrorBoundary;
35 changes: 19 additions & 16 deletions library/src/containers/AsyncApi/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { Error } from '../Error/Error';
import { ConfigInterface } from '../../config';
import { SpecificationContext, ConfigContext } from '../../contexts';
import { ErrorObject } from '../../types';
import AsyncApiErrorBoundary from '../ApplicationErrorHandler/ErrorBoundary';

interface Props {
asyncapi: AsyncAPIDocumentInterface;
Expand Down Expand Up @@ -48,24 +49,26 @@ const AsyncApiLayout: React.FunctionComponent<Props> = ({
<ConfigContext.Provider value={config}>
<SpecificationContext.Provider value={asyncapi}>
<section className="aui-root">
<div
className={`${observerClassName} relative md:flex bg-white leading-normal`}
id={config.schemaID ?? undefined}
ref={ref}
>
{configShow.sidebar && <Sidebar />}
<div className="panel--center relative py-8 flex-1">
<div className="relative z-10">
{configShow.errors && error && <Error error={error} />}
{configShow.info && <Info />}
{configShow.servers && <Servers />}
{configShow.operations && <Operations />}
{configShow.messages && <Messages />}
{configShow.schemas && <Schemas />}
<AsyncApiErrorBoundary>
<div
className={`${observerClassName} relative md:flex bg-white leading-normal`}
id={config.schemaID ?? undefined}
ref={ref}
>
{configShow.sidebar && <Sidebar />}
<div className="panel--center relative py-8 flex-1">
<div className="relative z-10">
{configShow.errors && error && <Error error={error} />}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this line still relevant? i mean since you've imported the error boundary in the layout container and it already includes the error component.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes it is important.

This line handles the errors in our document when parsing it. The errors are in turn diagnostics with severity 0. Introduced in this PR: https://github.com/asyncapi/asyncapi-react/pull/1082/files

The error boundary, on the other hand, is used to catch unexpected application errors, such as a recursion error, and is a separate concern.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line handles the errors in our document when parsing it. The errors are in turn diagnostics with severity 0.

Aren't we already handling these errors here

asyncapi-react/library/src/containers/AsyncApi/Standalone.tsx

Line 79 in afd5e8c

concatenatedConfig.show?.errors && (
?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The error boundary, on the other hand, is used to catch unexpected application errors, such as a recursion error, and is a separate concern.

I agree with you 👍🏾

my question now is if {configShow.errors && error && <Error error={error} />} is relevant if we are already handling it in the standalone code, don't you think?

{configShow.info && <Info />}
{configShow.servers && <Servers />}
{configShow.operations && <Operations />}
{configShow.messages && <Messages />}
{configShow.schemas && <Schemas />}
</div>
<div className="panel--right absolute top-0 right-0 h-full bg-gray-800" />
</div>
<div className="panel--right absolute top-0 right-0 h-full bg-gray-800" />
</div>
</div>
</AsyncApiErrorBoundary>
</section>
</SpecificationContext.Provider>
</ConfigContext.Provider>
Expand Down
5 changes: 4 additions & 1 deletion library/src/containers/Error/Error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ const renderErrors = (errors: ValidationError[]): React.ReactNode => {
}
return (
<div key={index} className="flex gap-2">
<span>{`line ${singleError?.location?.startLine + singleError?.location?.startOffset}:`}</span>
{(singleError?.location?.startLine ??
singleError?.location?.startOffset) && (
<span>{`line ${singleError?.location?.startLine + singleError?.location?.startOffset}:`}</span>
)}
<code className="whitespace-pre-wrap break-all ml-2">
{singleError.title}
</code>
Expand Down
2 changes: 1 addition & 1 deletion library/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export interface MessageExample {

export interface ValidationError {
title: string;
location: {
location?: {
jsonPointer: string;
startLine: number;
startColumn: number;
Expand Down
13 changes: 13 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading