Introduce error boundary mechanism and exception capture with Baselime and Sentry
Deleted the ErrorBoundary component from the makerkit package and introduced new exception capture mechanisms for Baselime and Sentry monitoring providers. The code now captures all exceptions thrown within components and sends them to the configured monitoring provider, which in turn logs the errors for debugging purposes. Updated packages and environment variables accordingly to support this feature.
This commit is contained in:
39
packages/monitoring/src/components/error-boundary.tsx
Normal file
39
packages/monitoring/src/components/error-boundary.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import type { ErrorInfo, ReactNode } from 'react';
|
||||
import { Component } from 'react';
|
||||
|
||||
import { captureException } from '../capture-exception';
|
||||
|
||||
interface Props {
|
||||
onError?: (error: Error, info: ErrorInfo) => void;
|
||||
fallback: ReactNode;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export class ErrorBoundary extends Component<Props> {
|
||||
readonly state = { hasError: false, error: null };
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error: unknown) {
|
||||
return {
|
||||
hasError: true,
|
||||
error,
|
||||
};
|
||||
}
|
||||
|
||||
async componentDidCatch(error: Error, info: ErrorInfo) {
|
||||
this.props.onError?.(error, info);
|
||||
|
||||
await captureException(error);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return this.props.fallback;
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
1
packages/monitoring/src/components/index.ts
Normal file
1
packages/monitoring/src/components/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './error-boundary';
|
||||
Reference in New Issue
Block a user