Skip to content

Commit 7df219c

Browse files
catarakcatarak
committed
Render index.html using blobUrl, update error stack printing
1 parent c0def07 commit 7df219c

File tree

5 files changed

+237
-148
lines changed

5 files changed

+237
-148
lines changed

‎client/modules/Preview/EmbedFrame.jsx

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,9 @@ function injectLocalFiles(files, htmlFile, basePath) {
226226
resolveStyles(sketchDoc, resolvedFiles);
227227

228228
const previewScripts = sketchDoc.createElement('script');
229-
previewScripts.src = getConfig('PREVIEW_SCRIPTS_URL');
229+
previewScripts.src = `${window.location.origin}${getConfig(
230+
'PREVIEW_SCRIPTS_URL'
231+
)}`;
230232
sketchDoc.head.appendChild(previewScripts);
231233

232234
const sketchDocString = `<!DOCTYPE HTML>\n${sketchDoc.documentElement.outerHTML}`;
@@ -266,13 +268,22 @@ function EmbedFrame({ files, isPlaying, basePath }) {
266268
const doc = iframe.current;
267269
if (isPlaying) {
268270
const htmlDoc = injectLocalFiles(files, htmlFile, basePath);
269-
// BRO FOR SOME REASON YOU HAVE TO DO THIS TO GET IT TO WORK ON SAFARI
271+
const generatedHtmlFile = {
272+
name: 'index.html',
273+
content: htmlDoc
274+
};
275+
const htmlUrl = createBlobUrl(generatedHtmlFile);
270276
setTimeout(() => {
271-
srcDoc.set(doc, htmlDoc);
277+
doc.src = htmlUrl;
272278
}, 0);
279+
// BRO FOR SOME REASON YOU HAVE TO DO THIS TO GET IT TO WORK ON SAFARI
280+
// setTimeout(() => {
281+
// srcDoc.set(doc, htmlDoc);
282+
// }, 0);
273283
} else {
274-
doc.srcdoc = '';
275-
srcDoc.set(doc, ' ');
284+
doc.src = '';
285+
// doc.srcdoc = '';
286+
// srcDoc.set(doc, ' ');
276287
}
277288
}
278289

‎client/modules/Preview/filesReducer.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useMemo } from 'react';
22
import objectID from 'bson-objectid';
33
import blobUtil from 'blob-util';
4+
import mime from 'mime-types';
45
import { PLAINTEXT_FILE_REGEX } from '../../../server/utils/fileUtils';
56

67
const defaultSketch = `function setup() {
@@ -109,7 +110,8 @@ export function createBlobUrl(file) {
109110
blobUtil.revokeObjectURL(file.blobUrl);
110111
}
111112

112-
const fileBlob = blobUtil.createBlob([file.content], { type: 'text/plain' });
113+
const mimeType = mime.lookup(file.name);
114+
const fileBlob = blobUtil.createBlob([file.content], { type: mimeType });
113115
const blobURL = blobUtil.createObjectURL(fileBlob);
114116
return blobURL;
115117
}

‎client/utils/previewEntry.js

Lines changed: 37 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import loopProtect from 'loop-protect';
22
import { Hook, Decode, Encode } from 'console-feed';
3+
import StackTrace from 'stacktrace-js';
34
import evaluateExpression from './evaluateExpression';
45

56
// should postMessage user the dispatcher? does the parent window need to
@@ -14,6 +15,10 @@ const htmlOffset = 12;
1415
// const editorOrigin = 'http://localhost:8000';
1516
// so this works??
1617
// maybe i have to pass the parent window??? idk man
18+
// console.log(window.location);
19+
window.objectUrls[window.location.href] = '/index.html';
20+
const blobPath = window.location.href.split('/').pop();
21+
window.objectPaths[blobPath] = 'index.html';
1722

1823
window.loopProtect = loopProtect;
1924

@@ -83,8 +88,7 @@ window.onerror = function onError(msg, source, lineNumber, columnNo, error) {
8388
data = error.stack.replaceAll(url, window.objectUrls[url]);
8489
}
8590
});
86-
if (data.match('about:srcdoc')) {
87-
data = data.replaceAll('about:srcdoc', 'index.html');
91+
if (data.match('index.html')) {
8892
data = data.replace(`:${lineNumber}:`, `:${lineNumber - htmlOffset}:`);
8993
}
9094
editor.postMessage(
@@ -109,31 +113,38 @@ window.onerror = function onError(msg, source, lineNumber, columnNo, error) {
109113
// catch rejected promises
110114
window.onunhandledrejection = function onUnhandledRejection(event) {
111115
if (event.reason && event.reason.message && event.reason.stack) {
112-
const urls = Object.keys(window.objectUrls);
113-
let data = event.reason.stack;
114-
urls.forEach((url) => {
115-
if (event.reason.stack.match(url)) {
116-
data = event.reason.stack.replaceAll(url, window.objectUrls[url]);
117-
}
116+
StackTrace.fromError(event.reason).then((stackLines) => {
117+
let data = `${event.reason.name}: ${event.reason.message}`;
118+
stackLines.forEach((stackLine) => {
119+
const { fileName, functionName, lineNumber, columnNumber } = stackLine;
120+
const resolvedFileName = window.objectUrls[fileName] || fileName;
121+
const resolvedFuncName = functionName || '(anonymous function)';
122+
let line;
123+
if (lineNumber && columnNumber) {
124+
line = `\n at ${resolvedFuncName} (${resolvedFileName}:${lineNumber}:${columnNumber})`;
125+
} else {
126+
line = `\n at ${resolvedFuncName} (${resolvedFileName})`;
127+
}
128+
data = data.concat(line);
129+
});
130+
editor.postMessage(
131+
{
132+
source: 'sketch',
133+
messages: [
134+
{
135+
log: [
136+
{
137+
method: 'error',
138+
data: [data],
139+
id: Date.now().toString()
140+
}
141+
]
142+
}
143+
]
144+
},
145+
editorOrigin
146+
);
118147
});
119-
data = data.replaceAll('about:srcdoc', 'index.html');
120-
editor.postMessage(
121-
{
122-
source: 'sketch',
123-
messages: [
124-
{
125-
log: [
126-
{
127-
method: 'error',
128-
data: [data],
129-
id: Date.now().toString()
130-
}
131-
]
132-
}
133-
]
134-
},
135-
editorOrigin
136-
);
137148
}
138149
};
139150

0 commit comments

Comments
 (0)