52 lines
1.2 KiB
JavaScript
52 lines
1.2 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import { ErrorBoundary } from '@ohif/ui';
|
||
|
|
import { servicesManager } from './../../App';
|
||
|
|
|
||
|
|
const { UIModalService } = servicesManager.services;
|
||
|
|
|
||
|
|
const ErrorBoundaryDialog = ({ context, children }) => {
|
||
|
|
const handleOnError = (error, componentStack) => {
|
||
|
|
const ErrorDialog = () => (
|
||
|
|
<div className="ErrorFallback" role="alert">
|
||
|
|
<div>
|
||
|
|
<h3>
|
||
|
|
{context}: <span>{error.message}</span>
|
||
|
|
</h3>
|
||
|
|
</div>
|
||
|
|
<pre>{componentStack}</pre>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
UIModalService.show({
|
||
|
|
content: ErrorDialog,
|
||
|
|
title: `${context}: ${error.message}`,
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const fallbackComponent = () => (
|
||
|
|
<div className="ErrorFallback" role="alert">
|
||
|
|
<p>
|
||
|
|
Error rendering {context}. <br /> Check the browser console for more
|
||
|
|
details.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ErrorBoundary
|
||
|
|
fallbackComponent={fallbackComponent}
|
||
|
|
context={context}
|
||
|
|
onError={handleOnError}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</ErrorBoundary>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
ErrorBoundaryDialog.propTypes = {
|
||
|
|
context: PropTypes.string.isRequired,
|
||
|
|
children: PropTypes.node.isRequired,
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ErrorBoundaryDialog;
|