![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@os-design/error-boundary
Advanced tools
Readme
The Error Boundary component. Fully supports Relay (useQueryLoader/loadQuery, useLazyLoadQuery).
Error Boundary allows you to catch JS errors that occur in the UI. This package is a wrapper that allows you to wrap your components to catch UI errors that may occur inside them.
Install the package using the following command:
yarn add @os-design/error-boundary
Let's assume that we have a component that sometimes throw the error.
import React, { useState } from 'react';
const BadComponent: React.FC = () => {
const [hasError, setHasError] = useState(false);
if (hasError) {
throw new Error('Something happened');
}
return (
<>
<p>I am working!</p>
<button onClick={() => setHasError(true)}>Throw the error</button>
</>
);
};
export default BadComponent;
To catch errors that may occur inside the BadComponent
, wrap it with the ErrorBoundary
as follows:
import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';
const App: React.FC = () => (
<ErrorBoundary fallback={<h1>An error occured</h1>}>
<BadComponent />
</ErrorBoundary>
);
export default App;
Most likely, you want to print an error message or render the fallback component, depending on the error type (for example, render some component, if there is no network connection).
In this case, you can pass a function to the fallback and get an error like this:
import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';
const App: React.FC = () => (
<ErrorBoundary fallback={({ error }) => <h1>{error.message}</h1>}>
<BadComponent />
</ErrorBoundary>
);
export default App;
Let's assume that you have a component that throws the «No error connection» error. You successfully render another component with the error message, but what if the user has already restored the Internet connection?
In this case, you also need to render the retry button. When you click on it, the component will try to render again. You can do it in the following way:
import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';
const App: React.FC = () => (
<ErrorBoundary
fallback={({ error, retry }) => (
<div>
<h1>{error.message}</h1>
<button onClick={retry}>Retry</button>
</div>
)}
>
<BadComponent />
</ErrorBoundary>
);
export default App;
useQueryLoader
/ loadQuery
As Relay documentation says:
When using
useQueryLoader
/loadQuery
to fetch a query, in order to retry after an error has occurred, you can callloadQuery
again and pass the new query reference tousePreloadedQuery
.
You can do it as follows:
import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';
const App: React.FC = ({ initialQueryRef }) => {
const [queryRef, loadQuery] = useQueryLoader(query, initialQueryRef);
return (
<ErrorBoundary
fallback={({ error, retry }) => (
<div>
<h1>{error.message}</h1>
<button
onClick={() => {
loadQuery(/* ... */);
retry();
}}
>
Retry
</button>
</div>
)}
>
<MainContent queryRef={queryRef} />
</ErrorBoundary>
);
};
export default App;
useLazyLoadQuery
As Relay documentation says:
When using
useLazyLoadQuery
to fetch a query, in order to retry after an error has occurred, you can attempt to re-mount and re-evaluate the query component by passing it a newfetchKey
.
You can do it as follows:
import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';
const App: React.FC = ({ initialQueryRef }) => {
const [queryRef, loadQuery] = useQueryLoader(query, initialQueryRef);
return (
<ErrorBoundary
fallback={({ error, retry }) => (
<div>
<h1>{error.message}</h1>
<button onClick={retry}>Retry</button>
</div>
)}
>
{(fetchKey) => <MainContent fetchKey={fetchKey} />}
</ErrorBoundary>
);
};
export default App;
FAQs
The Error Boundary component. Fully supports Relay (useQueryLoader/loadQuery, useLazyLoadQuery).
The npm package @os-design/error-boundary receives a total of 12 weekly downloads. As such, @os-design/error-boundary popularity was classified as not popular.
We found that @os-design/error-boundary demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.