mirror of
https://gitlab.com/soapbox-pub/mkstack.git
synced 2025-08-27 04:59:22 +00:00
remove iframe postmessage
This commit is contained in:
parent
d17fc5ddd7
commit
68959e0e77
@ -11,17 +11,7 @@ interface ErrorBoundaryProps {
|
|||||||
fallback?: ReactNode;
|
fallback?: ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ErrorMessage {
|
|
||||||
type: 'mkstack-error';
|
|
||||||
error: {
|
|
||||||
message: string;
|
|
||||||
stack?: string;
|
|
||||||
componentStack?: string;
|
|
||||||
url: string;
|
|
||||||
timestamp: string;
|
|
||||||
userAgent: string;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
||||||
constructor(props: ErrorBoundaryProps) {
|
constructor(props: ErrorBoundaryProps) {
|
||||||
@ -43,26 +33,6 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
|
|||||||
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||||||
console.error('Error caught by ErrorBoundary:', error, errorInfo);
|
console.error('Error caught by ErrorBoundary:', error, errorInfo);
|
||||||
|
|
||||||
// Send error details via postMessage for iframe embedding
|
|
||||||
const errorMessage: ErrorMessage = {
|
|
||||||
type: 'mkstack-error',
|
|
||||||
error: {
|
|
||||||
message: error.message,
|
|
||||||
stack: error.stack || undefined,
|
|
||||||
componentStack: errorInfo.componentStack || undefined,
|
|
||||||
url: window.location.href,
|
|
||||||
timestamp: new Date().toISOString(),
|
|
||||||
userAgent: navigator.userAgent,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
// Send to parent window if in iframe, or broadcast to all
|
|
||||||
if (window.parent !== window) {
|
|
||||||
window.parent.postMessage(errorMessage, '*');
|
|
||||||
} else {
|
|
||||||
window.postMessage(errorMessage, '*');
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
error,
|
error,
|
||||||
errorInfo,
|
errorInfo,
|
||||||
|
@ -2,11 +2,7 @@ import { render, screen } from '@testing-library/react';
|
|||||||
import { describe, it, expect, vi } from 'vitest';
|
import { describe, it, expect, vi } from 'vitest';
|
||||||
import { ErrorBoundary } from '@/components/ErrorBoundary';
|
import { ErrorBoundary } from '@/components/ErrorBoundary';
|
||||||
|
|
||||||
// Mock window.postMessage
|
|
||||||
const postMessageMock = vi.fn();
|
|
||||||
Object.defineProperty(window, 'postMessage', {
|
|
||||||
value: postMessageMock,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Test component that throws an error
|
// Test component that throws an error
|
||||||
const ThrowError = ({ shouldThrow }: { shouldThrow: boolean }) => {
|
const ThrowError = ({ shouldThrow }: { shouldThrow: boolean }) => {
|
||||||
@ -43,33 +39,7 @@ describe('ErrorBoundary', () => {
|
|||||||
consoleSpy.mockRestore();
|
consoleSpy.mockRestore();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('sends error details via postMessage', () => {
|
|
||||||
// Suppress console.error for this test
|
|
||||||
const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
|
|
||||||
postMessageMock.mockClear();
|
|
||||||
|
|
||||||
render(
|
|
||||||
<ErrorBoundary>
|
|
||||||
<ThrowError shouldThrow={true} />
|
|
||||||
</ErrorBoundary>
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(postMessageMock).toHaveBeenCalledWith(
|
|
||||||
expect.objectContaining({
|
|
||||||
type: 'mkstack-error',
|
|
||||||
error: expect.objectContaining({
|
|
||||||
message: 'Test error',
|
|
||||||
stack: expect.any(String),
|
|
||||||
url: expect.any(String),
|
|
||||||
timestamp: expect.any(String),
|
|
||||||
userAgent: expect.any(String),
|
|
||||||
}),
|
|
||||||
}),
|
|
||||||
'*'
|
|
||||||
);
|
|
||||||
|
|
||||||
consoleSpy.mockRestore();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('uses custom fallback when provided', () => {
|
it('uses custom fallback when provided', () => {
|
||||||
const customFallback = <div>Custom error message</div>;
|
const customFallback = <div>Custom error message</div>;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user