releasebird-javascript-sdk 1.0.49 → 1.0.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/settings.local.json +2 -1
- package/build/index.js +1 -1
- package/package.json +1 -1
- package/published/1.0.50/index.js +1 -0
- package/published/1.0.51/index.js +1 -0
- package/published/1.0.52/index.js +1 -0
- package/published/latest/index.js +1 -1
- package/src/RbirdScreenshotManager.js +171 -39
- package/webpack.config.js +2 -2
|
@@ -110,33 +110,17 @@ export default class RbirdScreenshotManager {
|
|
|
110
110
|
|
|
111
111
|
// Use requestAnimationFrame to ensure the changes are applied before screenshot
|
|
112
112
|
requestAnimationFrame(() => {
|
|
113
|
-
//
|
|
114
|
-
|
|
115
|
-
const stylesheets = document.querySelectorAll('link[rel="stylesheet"]');
|
|
116
|
-
stylesheets.forEach((stylesheet) => {
|
|
117
|
-
const href = stylesheet.getAttribute('href');
|
|
118
|
-
// Check if it's an external stylesheet (different domain)
|
|
119
|
-
if (href && (href.startsWith('http://') || href.startsWith('https://')) &&
|
|
120
|
-
!href.includes(window.location.hostname)) {
|
|
121
|
-
externalStylesheets.push({
|
|
122
|
-
element: stylesheet,
|
|
123
|
-
disabled: stylesheet.disabled,
|
|
124
|
-
parent: stylesheet.parentNode
|
|
125
|
-
});
|
|
126
|
-
stylesheet.disabled = true;
|
|
127
|
-
console.log('[Screenshot] Temporarily disabling external stylesheet:', href);
|
|
128
|
-
}
|
|
129
|
-
});
|
|
113
|
+
// First attempt: Normal screenshot without disabling stylesheets
|
|
114
|
+
console.log('[Screenshot] Attempting normal screenshot...');
|
|
130
115
|
|
|
131
|
-
// Use html-to-image's toJpeg method with higher resolution
|
|
132
|
-
// Capture only the visible viewport
|
|
133
116
|
htmlToImage.toJpeg(document.body, {
|
|
134
117
|
quality: 0.95,
|
|
135
118
|
pixelRatio: 2, // Higher resolution (2x)
|
|
136
|
-
cacheBust:
|
|
119
|
+
cacheBust: false, // Disable cache bust to avoid CORS issues
|
|
137
120
|
width: window.innerWidth,
|
|
138
121
|
height: window.innerHeight,
|
|
139
122
|
skipFonts: true, // Skip web fonts to avoid CORS issues
|
|
123
|
+
preferCanvas: true, // Use canvas rendering when possible
|
|
140
124
|
style: {
|
|
141
125
|
margin: '0',
|
|
142
126
|
padding: '0'
|
|
@@ -150,6 +134,13 @@ export default class RbirdScreenshotManager {
|
|
|
150
134
|
if (node.classList && node.classList.contains('menu')) {
|
|
151
135
|
return false;
|
|
152
136
|
}
|
|
137
|
+
// Filter out problematic iframes
|
|
138
|
+
if (node.tagName === 'IFRAME') {
|
|
139
|
+
const src = node.getAttribute('src');
|
|
140
|
+
if (src && (src.includes('cookiehub') || src.includes('google') || src.includes('facebook'))) {
|
|
141
|
+
return false;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
153
144
|
return true;
|
|
154
145
|
},
|
|
155
146
|
onclone: (clonedDocument) => {
|
|
@@ -173,12 +164,15 @@ export default class RbirdScreenshotManager {
|
|
|
173
164
|
style.remove();
|
|
174
165
|
}
|
|
175
166
|
});
|
|
167
|
+
|
|
168
|
+
// Add crossOrigin to all images
|
|
169
|
+
const images = clonedDocument.querySelectorAll('img');
|
|
170
|
+
images.forEach((img) => {
|
|
171
|
+
img.crossOrigin = 'anonymous';
|
|
172
|
+
});
|
|
176
173
|
}
|
|
177
174
|
}).then(function (dataUrl) {
|
|
178
|
-
|
|
179
|
-
externalStylesheets.forEach(({element, disabled}) => {
|
|
180
|
-
element.disabled = disabled;
|
|
181
|
-
});
|
|
175
|
+
console.log('[Screenshot] Normal screenshot succeeded!');
|
|
182
176
|
|
|
183
177
|
// Restore visibility
|
|
184
178
|
loader.style.visibility = 'visible';
|
|
@@ -202,22 +196,125 @@ export default class RbirdScreenshotManager {
|
|
|
202
196
|
that.deactivateMarker();
|
|
203
197
|
|
|
204
198
|
}).catch((e) => {
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
199
|
+
console.error('[Screenshot] Normal screenshot failed:', e);
|
|
200
|
+
console.error('Error details:', {
|
|
201
|
+
type: e?.type,
|
|
202
|
+
target: e?.target,
|
|
203
|
+
message: e?.message,
|
|
204
|
+
stack: e?.stack
|
|
205
|
+
});
|
|
206
|
+
|
|
207
|
+
// Fallback 1: Try again with disabled external stylesheets
|
|
208
|
+
console.log('[Screenshot] Trying again with disabled external stylesheets...');
|
|
209
|
+
|
|
210
|
+
// Temporarily disable external stylesheets to avoid CORS errors
|
|
211
|
+
const externalStylesheets = [];
|
|
212
|
+
const stylesheets = document.querySelectorAll('link[rel="stylesheet"]');
|
|
213
|
+
stylesheets.forEach((stylesheet) => {
|
|
214
|
+
const href = stylesheet.getAttribute('href');
|
|
215
|
+
// Check if it's an external stylesheet (different domain)
|
|
216
|
+
if (href && (href.startsWith('http://') || href.startsWith('https://')) &&
|
|
217
|
+
!href.includes(window.location.hostname)) {
|
|
218
|
+
externalStylesheets.push({
|
|
219
|
+
element: stylesheet,
|
|
220
|
+
disabled: stylesheet.disabled,
|
|
221
|
+
parent: stylesheet.parentNode
|
|
222
|
+
});
|
|
223
|
+
stylesheet.disabled = true;
|
|
224
|
+
console.log('[Screenshot] Temporarily disabling external stylesheet:', href);
|
|
225
|
+
}
|
|
208
226
|
});
|
|
209
|
-
console.error('Screenshot error with toJpeg:', e);
|
|
210
227
|
|
|
211
|
-
// Try
|
|
212
|
-
|
|
213
|
-
|
|
228
|
+
// Try toJpeg again with disabled stylesheets
|
|
229
|
+
htmlToImage.toJpeg(document.body, {
|
|
230
|
+
quality: 0.95,
|
|
231
|
+
pixelRatio: 2,
|
|
232
|
+
cacheBust: false,
|
|
233
|
+
width: window.innerWidth,
|
|
234
|
+
height: window.innerHeight,
|
|
235
|
+
skipFonts: true,
|
|
236
|
+
preferCanvas: true,
|
|
237
|
+
style: {
|
|
238
|
+
margin: '0',
|
|
239
|
+
padding: '0'
|
|
240
|
+
},
|
|
241
|
+
filter: (node) => {
|
|
242
|
+
if (node.id === 'rbirdScreenshotLoader') {
|
|
243
|
+
return false;
|
|
244
|
+
}
|
|
245
|
+
if (node.classList && node.classList.contains('menu')) {
|
|
246
|
+
return false;
|
|
247
|
+
}
|
|
248
|
+
if (node.tagName === 'IFRAME') {
|
|
249
|
+
const src = node.getAttribute('src');
|
|
250
|
+
if (src && (src.includes('cookiehub') || src.includes('google') || src.includes('facebook'))) {
|
|
251
|
+
return false;
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
return true;
|
|
255
|
+
}
|
|
256
|
+
}).then(function (dataUrl) {
|
|
257
|
+
console.log('[Screenshot] Screenshot with disabled stylesheets succeeded!');
|
|
258
|
+
|
|
259
|
+
// Re-enable external stylesheets
|
|
260
|
+
externalStylesheets.forEach(({element, disabled}) => {
|
|
261
|
+
element.disabled = disabled;
|
|
262
|
+
});
|
|
263
|
+
|
|
264
|
+
// Restore visibility
|
|
265
|
+
loader.style.visibility = 'visible';
|
|
266
|
+
if (closeButton) {
|
|
267
|
+
closeButton.style.visibility = originalCloseButtonVisibility;
|
|
268
|
+
}
|
|
269
|
+
if (toolbar) {
|
|
270
|
+
toolbar.style.visibility = originalToolbarVisibility;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
that.hideLoader();
|
|
274
|
+
|
|
275
|
+
const widgetInstance = that.getRbirdWebsiteWidget().getInstance();
|
|
276
|
+
if (widgetInstance.iframe) {
|
|
277
|
+
widgetInstance.iframe.contentWindow?.postMessage({
|
|
278
|
+
type: 'screenshot',
|
|
279
|
+
screenshot: dataUrl
|
|
280
|
+
}, '*');
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
that.deactivateMarker();
|
|
284
|
+
}).catch((e2) => {
|
|
285
|
+
console.error('[Screenshot] Screenshot with disabled stylesheets also failed:', e2);
|
|
286
|
+
|
|
287
|
+
// Re-enable external stylesheets
|
|
288
|
+
externalStylesheets.forEach(({element, disabled}) => {
|
|
289
|
+
element.disabled = disabled;
|
|
290
|
+
});
|
|
291
|
+
|
|
292
|
+
// Fallback 2: Try PNG with more aggressive filtering
|
|
293
|
+
console.log('[Screenshot] Trying final fallback with PNG...');
|
|
294
|
+
|
|
295
|
+
// Disable external stylesheets again for PNG attempt
|
|
296
|
+
const externalStylesheets2 = [];
|
|
297
|
+
const stylesheets2 = document.querySelectorAll('link[rel="stylesheet"]');
|
|
298
|
+
stylesheets2.forEach((stylesheet) => {
|
|
299
|
+
const href = stylesheet.getAttribute('href');
|
|
300
|
+
if (href && (href.startsWith('http://') || href.startsWith('https://')) &&
|
|
301
|
+
!href.includes(window.location.hostname)) {
|
|
302
|
+
externalStylesheets2.push({
|
|
303
|
+
element: stylesheet,
|
|
304
|
+
disabled: stylesheet.disabled
|
|
305
|
+
});
|
|
306
|
+
stylesheet.disabled = true;
|
|
307
|
+
}
|
|
308
|
+
});
|
|
309
|
+
|
|
310
|
+
htmlToImage.toPng(document.body, {
|
|
214
311
|
quality: 0.95,
|
|
215
312
|
pixelRatio: 1, // Lower resolution for fallback
|
|
216
|
-
cacheBust:
|
|
313
|
+
cacheBust: false, // Disable cache bust to avoid CORS issues
|
|
217
314
|
width: window.innerWidth,
|
|
218
315
|
height: window.innerHeight,
|
|
219
316
|
skipFonts: true,
|
|
220
|
-
|
|
317
|
+
preferCanvas: true,
|
|
221
318
|
style: {
|
|
222
319
|
margin: '0',
|
|
223
320
|
padding: '0'
|
|
@@ -233,6 +330,14 @@ export default class RbirdScreenshotManager {
|
|
|
233
330
|
if (node.tagName === 'IFRAME' || node.tagName === 'OBJECT' || node.tagName === 'EMBED') {
|
|
234
331
|
return false;
|
|
235
332
|
}
|
|
333
|
+
// Filter out images with external sources that might cause CORS issues
|
|
334
|
+
if (node.tagName === 'IMG') {
|
|
335
|
+
const src = node.getAttribute('src');
|
|
336
|
+
if (src && src.startsWith('http') && !src.includes(window.location.hostname)) {
|
|
337
|
+
console.log('[Screenshot] Filtering out external image:', src);
|
|
338
|
+
// Don't completely remove, but we'll handle it in onclone
|
|
339
|
+
}
|
|
340
|
+
}
|
|
236
341
|
return true;
|
|
237
342
|
},
|
|
238
343
|
onclone: (clonedDocument) => {
|
|
@@ -263,10 +368,26 @@ export default class RbirdScreenshotManager {
|
|
|
263
368
|
style.remove();
|
|
264
369
|
}
|
|
265
370
|
});
|
|
371
|
+
|
|
372
|
+
// Handle images with CORS
|
|
373
|
+
const images = clonedDocument.querySelectorAll('img');
|
|
374
|
+
images.forEach((img) => {
|
|
375
|
+
const src = img.getAttribute('src');
|
|
376
|
+
if (src && src.startsWith('http') && !src.includes(window.location.hostname)) {
|
|
377
|
+
// For external images, try to use a placeholder or remove them
|
|
378
|
+
img.style.visibility = 'hidden'; // Hide but keep layout
|
|
379
|
+
} else {
|
|
380
|
+
img.crossOrigin = 'anonymous';
|
|
381
|
+
}
|
|
382
|
+
});
|
|
266
383
|
}
|
|
267
384
|
}).then(function (dataUrl) {
|
|
268
|
-
|
|
269
|
-
|
|
385
|
+
console.log('[Screenshot] PNG fallback succeeded!');
|
|
386
|
+
|
|
387
|
+
// Re-enable external stylesheets
|
|
388
|
+
externalStylesheets2.forEach(({element, disabled}) => {
|
|
389
|
+
element.disabled = disabled;
|
|
390
|
+
});
|
|
270
391
|
|
|
271
392
|
// Restore visibility
|
|
272
393
|
loader.style.visibility = 'visible';
|
|
@@ -289,8 +410,12 @@ export default class RbirdScreenshotManager {
|
|
|
289
410
|
|
|
290
411
|
that.deactivateMarker();
|
|
291
412
|
}).catch((fallbackError) => {
|
|
292
|
-
|
|
293
|
-
|
|
413
|
+
console.error('[Screenshot] PNG fallback also failed:', fallbackError);
|
|
414
|
+
|
|
415
|
+
// Re-enable external stylesheets
|
|
416
|
+
externalStylesheets2.forEach(({element, disabled}) => {
|
|
417
|
+
element.disabled = disabled;
|
|
418
|
+
});
|
|
294
419
|
|
|
295
420
|
// Restore visibility on final error
|
|
296
421
|
loader.style.visibility = 'visible';
|
|
@@ -301,8 +426,15 @@ export default class RbirdScreenshotManager {
|
|
|
301
426
|
toolbar.style.visibility = originalToolbarVisibility;
|
|
302
427
|
}
|
|
303
428
|
that.hideLoader();
|
|
304
|
-
console.error('Screenshot failed with
|
|
305
|
-
|
|
429
|
+
console.error('Screenshot failed with all methods');
|
|
430
|
+
console.error('Final error details:', {
|
|
431
|
+
type: fallbackError?.type,
|
|
432
|
+
target: fallbackError?.target,
|
|
433
|
+
message: fallbackError?.message,
|
|
434
|
+
stack: fallbackError?.stack
|
|
435
|
+
});
|
|
436
|
+
alert('Screenshot failed. This page has external resources that prevent screenshots from being captured. Please try on a different page or contact support.');
|
|
437
|
+
});
|
|
306
438
|
});
|
|
307
439
|
});
|
|
308
440
|
});
|
package/webpack.config.js
CHANGED
|
@@ -65,8 +65,8 @@ module.exports = {
|
|
|
65
65
|
plugins: [
|
|
66
66
|
new webpack.DefinePlugin({
|
|
67
67
|
PRODUCTION: 'true',
|
|
68
|
-
|
|
69
|
-
|
|
68
|
+
API: JSON.stringify("https://api.releasebird.com/papi"),
|
|
69
|
+
CONTENT_URL: JSON.stringify("https://wcontent.releasebird.net"),
|
|
70
70
|
}),
|
|
71
71
|
{
|
|
72
72
|
apply: (compiler) => {
|