bruno
8c665fb568
CI / lint (push) Failing after 10s
CI / test (push) Has been skipped
CI / build (push) Has been skipped
CI / e2e (push) Has been skipped
CI / security (push) Successful in 23s
Desktop Build / build-windows (push) Has been cancelled
Desktop Build / build-linux (push) Has been cancelled
90 lines
2.9 KiB
HTML
90 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head><meta charset="UTF-8">
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
|
|
<meta http-equiv="Pragma" content="no-cache">
|
|
<meta http-equiv="Expires" content="0"><title>Excalidraw Error Capture</title>
|
|
<style>
|
|
body { font-family:monospace; background:#1e1e1e; color:#ddd; padding:20px; }
|
|
.pass { color:#4caf50; } .fail { color:#f44336; }
|
|
pre { background:#2d2d2d; padding:10px; border-radius:4px; }
|
|
#app { margin-top:20px; border:1px dashed #555; min-height:100px; padding:10px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>Excalidraw Error Boundary Test</h2>
|
|
<pre id="log"></pre>
|
|
<div id="app"></div>
|
|
|
|
<script type="module">
|
|
import React from "https://esm.sh/[email protected]";
|
|
import ReactDOM from "https://esm.sh/[email protected]/client";
|
|
const log = document.getElementById('log');
|
|
function add(msg, cls='') { log.innerHTML += `<span class="${cls}">${msg}</span>\n`; }
|
|
|
|
// Error boundary to catch rendering errors
|
|
class ErrorBoundary extends React.Component {
|
|
constructor(props) { super(props); this.state = { error: null }; }
|
|
static getDerivedStateFromError(error) { return { error }; }
|
|
componentDidCatch(error, info) {
|
|
add(`✗ REACT ERROR CAUGHT: ${error.message}`, 'fail');
|
|
add(` Stack: ${(error.stack||'').split('\n').slice(0,5).join('\n')}`, 'info');
|
|
}
|
|
render() {
|
|
if (this.state.error) {
|
|
return React.createElement('div', { style: {color:'red',padding:'20px'} },
|
|
`Error: ${this.state.error.message}`
|
|
);
|
|
}
|
|
return this.props.children;
|
|
}
|
|
}
|
|
|
|
add('Loading Excalidraw...');
|
|
try {
|
|
window.EXCALIDRAW_ASSET_PATH = 'https://esm.sh/@excalidraw/[email protected]/dist/prod/';
|
|
const ExcalidrawLib = await import('https://esm.sh/@excalidraw/[email protected]');
|
|
const { Excalidraw } = ExcalidrawLib;
|
|
|
|
add(`Excalidraw keys: ${Object.keys(ExcalidrawLib).slice(0,8).join(', ')}`, 'info');
|
|
add(`Excalidraw itself: ${typeof Excalidraw}`, 'info');
|
|
if (typeof Excalidraw === 'function') {
|
|
add(` .displayName: ${Excalidraw.displayName || 'none'}`, 'info');
|
|
add(` .name: ${Excalidraw.name || 'none'}`, 'info');
|
|
}
|
|
|
|
// Try rendering with error boundary
|
|
const root = ReactDOM.createRoot(document.getElementById('app'));
|
|
|
|
try {
|
|
root.render(
|
|
React.createElement(ErrorBoundary, null,
|
|
React.createElement(Excalidraw, {
|
|
theme: 'dark',
|
|
excalidrawRef: (api) => {
|
|
add('✓ excalidrawRef CALLBACK FIRED!', 'pass');
|
|
},
|
|
onChange: () => {
|
|
add(' onChange called', 'info');
|
|
},
|
|
onPointerUpdate: () => {
|
|
// noisy, skip
|
|
}
|
|
})
|
|
)
|
|
);
|
|
add('render() executed - waiting...', 'info');
|
|
} catch(e) {
|
|
add(`✗ RENDER CRASH: ${e.message}`, 'fail');
|
|
add(` ${e.stack}`, 'info');
|
|
}
|
|
} catch(e) {
|
|
add(`✗ IMPORT ERROR: ${e.message}`, 'fail');
|
|
add(` ${e.stack}`, 'info');
|
|
}
|
|
|
|
add('\nOpen browser console (F12) for more errors.', 'info');
|
|
</script>
|
|
</body>
|
|
</html>
|