strapi-nextgen-framework
Version:
Production-ready, type-safe framework bridging Strapi v4 CMS and Next.js 14+ App Router with automatic cache management, Error Boundaries, and SEO optimization
75 lines • 3.28 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
/**
* Error Boundary for individual Strapi components
* Prevents single component failure from crashing entire page
*/
import { Component } from 'react';
/**
* Error Boundary that wraps each dynamic component
*
* Features:
* - Catches React errors in child components
* - Logs errors in development mode
* - Shows fallback UI or hides component in production
* - Calls optional onError callback
*/
export class ComponentErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = {
hasError: false,
error: null,
};
}
static getDerivedStateFromError(error) {
return {
hasError: true,
error,
};
}
componentDidCatch(error, errorInfo) {
const { componentType, onError } = this.props;
// Log error in development
if (process.env.NODE_ENV === 'development') {
console.error(`[StrapiRenderer] Error in component: ${componentType}`, '\nError:', error, '\nComponent Stack:', errorInfo.componentStack);
}
else {
// Log minimal info in production
console.error(`[StrapiRenderer] Component error: ${componentType}`, error.message);
}
// Call optional error callback
if (onError) {
onError(error, errorInfo, componentType);
}
}
render() {
const { hasError, error } = this.state;
const { children, componentType, fallback } = this.props;
if (hasError) {
// Development mode: show detailed error
if (process.env.NODE_ENV === 'development') {
return (_jsxs("div", { style: {
border: '2px solid #ef4444',
borderRadius: '8px',
padding: '16px',
margin: '16px 0',
backgroundColor: '#fef2f2',
color: '#991b1b',
}, children: [_jsxs("h3", { style: { margin: '0 0 8px 0', fontSize: '16px', fontWeight: 'bold' }, children: ["\u26A0\uFE0F Component Error: ", componentType] }), _jsxs("p", { style: { margin: '0 0 8px 0', fontSize: '14px' }, children: [_jsx("strong", { children: "Error:" }), " ", error?.message || 'Unknown error'] }), _jsxs("details", { style: { fontSize: '12px', fontFamily: 'monospace' }, children: [_jsx("summary", { style: { cursor: 'pointer', marginBottom: '8px' }, children: "Stack Trace" }), _jsx("pre", { style: {
overflow: 'auto',
padding: '8px',
backgroundColor: '#fff',
border: '1px solid #fca5a5',
borderRadius: '4px',
}, children: error?.stack })] })] }));
}
// Production mode: show fallback or hide component
if (fallback) {
return _jsx(_Fragment, { children: fallback });
}
return null;
}
return children;
}
}
//# sourceMappingURL=error-boundary.js.map