Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEATURE REQUEST] Window Data Inject #50

Open
ariel-frischer opened this issue Mar 22, 2021 · 11 comments
Open

[FEATURE REQUEST] Window Data Inject #50

ariel-frischer opened this issue Mar 22, 2021 · 11 comments
Labels
enhancement New feature or request

Comments

@ariel-frischer
Copy link

ariel-frischer commented Mar 22, 2021

Is your feature request related to a problem? Please describe.
I want to inject data into the window as described here: https://stackoverflow.com/a/56318041/1715153
I've tried this with the regular puppeteer package using page.evaluate() method and it works.
Example:

await page.evaluate(data => {
        window.renderData = {};
        window.renderData = data;
      }, renderData)

However, if I try to inject window data with timecut's preparePage or navigatePageToURL, neither seems to work. I need to pass this data object into the window so my frontend website can pick up the data. I tried to pass the data as an encoded url but that doesn't work because it gets too long and causes chromium 431 error.
Example of what I've tried with timecut:

preparePage: function (page) {
          return page.evaluate(function () {
              window.renderData = {};
              window.renderData = renderData;
            }
          );
        }

Describe the solution you'd like
Some way to inject data into the window before the page loads!

Describe alternatives you've considered
Using puppeteer instead which is not ideal.

P.S. I'm not sure if this is a bug or a feature request, I just need access to the puppeteer window during page.evaluate().

@tungs
Copy link
Owner

tungs commented Mar 22, 2021

There isn't currently an explicit configuration for page before it navigates, but you can get the same effect by supplying a custom config.navigatePageToURL function that uses page.evaluateOnNewDocument before navigating. It could look something like this:

var data = 'sample data';
timecut({
  // ...
  async navigatePageToURL({ page, url, log}) {
    log('Adding custom code');
    await page.evaluateOnNewDocument(data => {
      window.myData = data;
    }, data);
    log('Going to ' + url + '...');
    return await page.goto(url, { waitUntil: 'networkidle0' });
  }
});

Note that page.evaluateOnNewDocument runs the function on the parent frame and its child frames (and their child frames, etc.), so if there are cases where the data is substantial and you load a bunch of frames (for example, if the web page has a lot of nested iframes), you may be adding some significant overhead.

@ariel-frischer
Copy link
Author

ariel-frischer commented Mar 22, 2021

@tungs This did not seem to work, I didn't even see the log triggering...

Also tried writing it like this, which didn't work either:

timecut({
//...
        navigatePageToURL: async ({ page, url, log }) => {
          log('Adding custom code');
          await page.evaluateOnNewDocument(data => {
            log(`window`, window);
            log(`data`, data);
            window.renderData = {};
            window.renderData = data;
          }, renderData);
          log('Going to ' + url + '...');
          return await page.goto(url, { waitUntil: 'networkidle0' });
        }
});

@tungs
Copy link
Owner

tungs commented Mar 22, 2021

page.evaluateOnNewDocument evaluates its function inside the page context, so log by itself won't be available. If you need to log, you can use console.log instead, just for that function.

timecut should be logging 'Adding custom code'. If it's logging anything, can you paste it here?

@ariel-frischer
Copy link
Author

ariel-frischer commented Mar 22, 2021

So yea, this renders the error page given by react, the TS/React error shown is a result of window.renderData not being injected with data.

CONSOLE LOGS

DevTools listening on ws://127.0.0.1:60571/devtools/browser/ec92a4bc-4538-4a95-b0fb-8b37178bb330
[0] Capture Mode: Screenshot
[0] Going to http://localhost:3000/render-animation...
[0] [0321/205431.882:INFO:CONSOLE(325979)] "[HMR] Waiting for update signal from WDS...", source: http://localhost:3000/static/js/17.chunk.js (325979)
[0] [0321/205432.276:INFO:CONSOLE(317922)] "%c action %cpersist/PERSIST %c@ 20:54:30.712 color: gray; font-weight: lighter; color: inherit; color: gray; font-weigh
t: lighter;", source: http://localhost:3000/static/js/17.chunk.js (317922)
[0] [0321/205432.277:INFO:CONSOLE(317933)] "%c prev state color: #9E9E9E; font-weight: bold [object Object]", source: http://localhost:3000/static/js/17.chunk.js (
317933)
[0] [0321/205432.277:INFO:CONSOLE(317937)] "%c action     color: #03A9F4; font-weight: bold [object Object]", source: http://localhost:3000/static/js/17.chunk.js (
317937)
[0] [0321/205432.277:INFO:CONSOLE(317946)] "%c next state color: #4CAF50; font-weight: bold [object Object]", source: http://localhost:3000/static/js/17.chunk.js (
317946)
[0] [0321/205432.278:INFO:CONSOLE(317951)] "console.groupEnd", source: http://localhost:3000/static/js/17.chunk.js (317951)
[0] [0321/205432.334:INFO:CONSOLE(317922)] "%c action %cpersist/REHYDRATE %c@ 20:54:30.712 color: gray; font-weight: lighter; color: inherit; color: gray; font-wei
ght: lighter;", source: http://localhost:3000/static/js/17.chunk.js (317922)
[0] [0321/205432.334:INFO:CONSOLE(317933)] "%c prev state color: #9E9E9E; font-weight: bold [object Object]", source: http://localhost:3000/static/js/17.chunk.js (
317933)
[0] [0321/205432.334:INFO:CONSOLE(317937)] "%c action     color: #03A9F4; font-weight: bold [object Object]", source: http://localhost:3000/static/js/17.chunk.js (
317937)
[0] [0321/205432.334:INFO:CONSOLE(317946)] "%c next state color: #4CAF50; font-weight: bold [object Object]", source: http://localhost:3000/static/js/17.chunk.js (
317946)
[0] [0321/205432.334:INFO:CONSOLE(317951)] "console.groupEnd", source: http://localhost:3000/static/js/17.chunk.js (317951)
[0] [0321/205432.340:INFO:CONSOLE(317922)] "%c action %c@@router/LOCATION_CHANGE %c@ 20:54:30.712 color: gray; font-weight: lighter; color: inherit; color: gray; f
ont-weight: lighter;", source: http://localhost:3000/static/js/17.chunk.js (317922)
[0] [0321/205432.340:INFO:CONSOLE(317933)] "%c prev state color: #9E9E9E; font-weight: bold [object Object]", source: http://localhost:3000/static/js/17.chunk.js (
317933)
[0] [0321/205432.340:INFO:CONSOLE(317937)] "%c action     color: #03A9F4; font-weight: bold [object Object]", source: http://localhost:3000/static/js/17.chunk.js (
317937)
[0] [0321/205432.341:INFO:CONSOLE(317946)] "%c next state color: #4CAF50; font-weight: bold [object Object]", source: http://localhost:3000/static/js/17.chunk.js (
317946)
[0] [0321/205432.341:INFO:CONSOLE(317951)] "console.groupEnd", source: http://localhost:3000/static/js/17.chunk.js (317951)
[0] [0321/205432.384:INFO:CONSOLE(28992)] "Uncaught TypeError: Cannot read property 'textUnits' of undefined", source: http://localhost:3000/static/js/main.chunk.j
s (28992)
[0] [0321/205432.399:INFO:CONSOLE(302537)] "The above error occurred in the <RenderAnimation> component:
[0]
[0]     at RenderAnimation (http://localhost:3000/static/js/main.chunk.js:28952:93)
[0]     at Route (http://localhost:3000/static/js/17.chunk.js:309134:29)
[0]     at Switch (http://localhost:3000/static/js/17.chunk.js:309336:29)
[0]     at Suspense
[0]     at Routes (http://localhost:3000/static/js/main.chunk.js:20254:5)
[0]     at Connect(Routes) (http://localhost:3000/static/js/17.chunk.js:305182:75)
[0]     at withRouter(Connect(Routes)) (http://localhost:3000/static/js/17.chunk.js:309391:37)
[0]     at SnackbarProvider (http://localhost:3000/static/js/17.chunk.js:254382:24)
[0]     at StyledEngineProvider (http://localhost:3000/static/js/17.chunk.js:186720:5)
[0]     at InnerThemeProvider (http://localhost:3000/static/js/17.chunk.js:175803:74)
[0]     at ThemeProvider (http://localhost:3000/static/js/17.chunk.js:187113:5)
[0]     at ThemeProvider (http://localhost:3000/static/js/17.chunk.js:175822:5)
[0]     at ThemeConfig (http://localhost:3000/static/js/main.chunk.js:21597:3)
[0]     at div
[0]     at Provider (http://localhost:3000/static/js/17.chunk.js:304895:20)
[0]     at App (http://localhost:3000/static/js/17.chunk.js:266849:25)
[0]     at ErrorBoundary (http://localhost:3000/static/js/17.chunk.js:260049:35)
[0]     at DragDropContext (http://localhost:3000/static/js/17.chunk.js:266981:19)
[0]     at App (http://localhost:3000/static/js/main.chunk.js:4284:5)
[0]     at ErrorBoundary (http://localhost:3000/static/js/17.chunk.js:300944:37)
[0]     at Router (http://localhost:3000/static/js/17.chunk.js:308769:30)
[0]     at ConnectedRouter (http://localhost:3000/static/js/17.chunk.js:202338:7)
[0]     at ConnectedRouterWithContext (http://localhost:3000/static/js/17.chunk.js:202461:25)
[0]     at Connect(ConnectedRouterWithContext) (http://localhost:3000/static/js/17.chunk.js:305182:75)
[0]     at PersistGate (http://localhost:3000/static/js/17.chunk.js:318644:5)
[0]     at Provider (http://localhost:3000/static/js/17.chunk.js:304895:20)
[0]
[0] React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.", source: http://localhost:3000/static/js/17.
chunk.js (302537)
[0] [0321/205432.401:INFO:CONSOLE(260110)] "Uncaught TypeError: Cannot read property 'textUnits' of undefined", source: http://localhost:3000/static/js/17.chunk.js
 (260110)
[0] [0321/205432.404:INFO:CONSOLE(302537)] "The above error occurred in the <ErrorBoundary> component:
[0]
[0]     at ErrorBoundary (http://localhost:3000/static/js/17.chunk.js:260049:35)
[0]     at DragDropContext (http://localhost:3000/static/js/17.chunk.js:266981:19)
[0]     at App (http://localhost:3000/static/js/main.chunk.js:4284:5)
[0]     at ErrorBoundary (http://localhost:3000/static/js/17.chunk.js:300944:37)
[0]     at Router (http://localhost:3000/static/js/17.chunk.js:308769:30)
[0]     at ConnectedRouter (http://localhost:3000/static/js/17.chunk.js:202338:7)
[0]     at ConnectedRouterWithContext (http://localhost:3000/static/js/17.chunk.js:202461:25)
[0]     at Connect(ConnectedRouterWithContext) (http://localhost:3000/static/js/17.chunk.js:305182:75)
[0]     at PersistGate (http://localhost:3000/static/js/17.chunk.js:318644:5)
[0]     at Provider (http://localhost:3000/static/js/17.chunk.js:304895:20)
[0]
[0] React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.", source: http://localhost:3000/static/js/17.
chunk.js (302537)
[0] [0321/205432.426:INFO:CONSOLE(302537)] "FRONTEND ERROR! ", source: http://localhost:3000/static/js/17.chunk.js (302537)
[0] [0321/205432.427:INFO:CONSOLE(302537)] "{}", source: http://localhost:3000/static/js/17.chunk.js (302537)
[0] [0321/205432.427:INFO:CONSOLE(302537)] "
[0]     at ErrorBoundary (http://localhost:3000/static/js/17.chunk.js:260049:35)
[0]     at DragDropContext (http://localhost:3000/static/js/17.chunk.js:266981:19)
[0]     at App (http://localhost:3000/static/js/main.chunk.js:4284:5)
[0]     at ErrorBoundary (http://localhost:3000/static/js/17.chunk.js:300944:37)
[0]     at Router (http://localhost:3000/static/js/17.chunk.js:308769:30)
[0]     at ConnectedRouter (http://localhost:3000/static/js/17.chunk.js:202338:7)
[0]     at ConnectedRouterWithContext (http://localhost:3000/static/js/17.chunk.js:202461:25)
[0]     at Connect(ConnectedRouterWithContext) (http://localhost:3000/static/js/17.chunk.js:305182:75)
[0]     at PersistGate (http://localhost:3000/static/js/17.chunk.js:318644:5)
[0]     at Provider (http://localhost:3000/static/js/17.chunk.js:304895:20)", source: http://localhost:3000/static/js/17.chunk.js (302537)
[0] Page loaded
[0] Capturing Frame 1 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000001.png...
[0] Capturing Frame 2 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000002.png...
[0] Capturing Frame 3 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000003.png...
[0] Capturing Frame 4 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000004.png...
[0] Capturing Frame 5 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000005.png...
[0] Capturing Frame 6 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000006.png...
[0] Capturing Frame 7 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000007.png...
[0] Capturing Frame 8 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000008.png...
[0] Capturing Frame 9 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000009.png...
[0] Capturing Frame 10 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000010.png...
[0] Capturing Frame 11 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000011.png...
[0] Capturing Frame 12 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000012.png...
[0] Capturing Frame 13 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000013.png...
[0] Capturing Frame 14 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000014.png...
[0] Capturing Frame 15 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000015.png...
[0] Capturing Frame 16 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000016.png...
[0] Capturing Frame 17 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000017.png...
[0] Capturing Frame 18 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000018.png...
[0] Capturing Frame 19 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000019.png...
[0] Capturing Frame 20 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000020.png...
[0] Capturing Frame 21 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000021.png...
[0] Capturing Frame 22 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000022.png...
[0] Capturing Frame 23 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000023.png...
[0] Capturing Frame 24 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000024.png...
[0] Capturing Frame 25 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000025.png...
[0] Capturing Frame 26 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000026.png...
[0] Capturing Frame 27 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000027.png...
[0] Capturing Frame 28 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000028.png...
[0] Capturing Frame 29 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000029.png...
[0] Capturing Frame 30 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000030.png...
[0] Capturing Frame 31 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000031.png...
[0] Capturing Frame 32 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000032.png...
[0] Capturing Frame 33 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000033.png...
[0] Capturing Frame 34 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000034.png...
[0] Capturing Frame 35 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000035.png...
[0] Capturing Frame 36 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000036.png...
[0] Capturing Frame 37 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000037.png...
[0] Capturing Frame 38 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000038.png...
[0] Capturing Frame 39 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000039.png...
[0] Capturing Frame 40 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000040.png...
[0] Capturing Frame 41 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000041.png...
[0] Capturing Frame 42 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000042.png...
[0] Capturing Frame 43 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000043.png...
[0] Capturing Frame 44 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000044.png...
[0] Capturing Frame 45 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000045.png...
[0] Capturing Frame 46 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000046.png...
[0] Capturing Frame 47 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000047.png...
[0] Capturing Frame 48 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000048.png...
[0] Capturing Frame 49 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000049.png...
[0] Capturing Frame 50 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000050.png...
[0] Capturing Frame 51 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000051.png...
[0] Capturing Frame 52 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000052.png...
[0] Capturing Frame 53 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000053.png...
[0] Capturing Frame 54 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000054.png...
[0] Capturing Frame 55 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000055.png...
[0] Capturing Frame 56 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000056.png...
[0] Capturing Frame 57 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000057.png...
[0] Capturing Frame 58 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000058.png...
[0] Capturing Frame 59 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000059.png...
[0] Capturing Frame 60 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000060.png...
[0] Capturing Frame 61 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000061.png...
[0] Capturing Frame 62 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000062.png...
[0] Capturing Frame 63 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000063.png...
[0] Capturing Frame 64 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000064.png...
[0] Capturing Frame 65 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000065.png...
[0] Capturing Frame 66 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000066.png...
[0] Capturing Frame 67 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000067.png...
[0] Capturing Frame 68 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000068.png...
[0] Capturing Frame 69 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000069.png...
[0] Capturing Frame 70 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000070.png...
[0] Capturing Frame 71 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000071.png...
[0] Capturing Frame 72 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000072.png...
[0] Capturing Frame 73 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000073.png...
[0] Capturing Frame 74 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000074.png...
[0] Capturing Frame 75 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000075.png...
[0] Capturing Frame 76 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000076.png...
[0] Capturing Frame 77 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000077.png...
[0] Capturing Frame 78 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000078.png...
[0] Capturing Frame 79 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000079.png...
[0] Capturing Frame 80 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000080.png...
[0] Capturing Frame 81 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000081.png...
[0] Capturing Frame 82 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000082.png...
[0] Capturing Frame 83 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000083.png...
[0] Capturing Frame 84 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000084.png...
[0] Capturing Frame 85 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000085.png...
[0] Capturing Frame 86 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000086.png...
[0] Capturing Frame 87 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000087.png...
[0] Capturing Frame 88 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000088.png...
[0] Capturing Frame 89 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000089.png...
[0] Capturing Frame 90 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000090.png...
[0] Capturing Frame 91 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000091.png...
[0] Capturing Frame 92 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000092.png...
[0] Capturing Frame 93 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000093.png...
[0] Capturing Frame 94 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000094.png...
[0] Capturing Frame 95 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000095.png...
[0] Capturing Frame 96 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000096.png...
[0] Capturing Frame 97 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000097.png...
[0] Capturing Frame 98 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000098.png...
[0] Capturing Frame 99 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000099.png...
[0] Capturing Frame 100 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000100.png...
[0] Capturing Frame 101 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000101.png...
[0] Capturing Frame 102 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000102.png...
[0] Capturing Frame 103 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000103.png...
[0] Capturing Frame 104 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000104.png...
[0] Capturing Frame 105 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000105.png...
[0] Capturing Frame 106 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000106.png...
[0] Capturing Frame 107 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000107.png...
[0] Capturing Frame 108 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000108.png...
[0] Capturing Frame 109 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000109.png...
[0] Capturing Frame 110 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000110.png...
[0] Capturing Frame 111 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000111.png...
[0] Capturing Frame 112 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000112.png...
[0] Capturing Frame 113 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000113.png...
[0] Capturing Frame 114 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000114.png...
[0] Capturing Frame 115 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000115.png...
[0] Capturing Frame 116 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000116.png...
[0] Capturing Frame 117 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000117.png...
[0] Capturing Frame 118 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000118.png...
[0] Capturing Frame 119 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000119.png...
[0] Capturing Frame 120 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000120.png...
[0] Capturing Frame 121 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000121.png...
[0] Capturing Frame 122 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000122.png...
[0] Capturing Frame 123 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000123.png...
[0] Capturing Frame 124 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000124.png...
[0] Capturing Frame 125 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000125.png...
[0] Capturing Frame 126 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000126.png...
[0] Capturing Frame 127 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000127.png...
[0] Capturing Frame 128 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000128.png...
[0] Capturing Frame 129 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000129.png...
[0] Capturing Frame 130 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000130.png...
[0] Capturing Frame 131 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000131.png...
[0] Capturing Frame 132 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000132.png...
[0] Capturing Frame 133 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000133.png...
[0] Capturing Frame 134 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000134.png...
[0] Capturing Frame 135 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000135.png...
[0] Capturing Frame 136 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000136.png...
[0] Capturing Frame 137 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000137.png...
[0] Capturing Frame 138 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000138.png...
[0] Capturing Frame 139 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000139.png...
[0] Capturing Frame 140 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000140.png...
[0] Capturing Frame 141 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000141.png...
[0] Capturing Frame 142 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000142.png...
[0] Capturing Frame 143 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000143.png...
[0] Capturing Frame 144 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000144.png...
[0] Capturing Frame 145 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000145.png...
[0] Capturing Frame 146 to C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-000000146.png...
[0] Elapsed capture time: 73499
[0] ffmpeg version N-92986-gaceb9131c1 Copyright (c) 2000-2019 the FFmpeg developers
[0]   built with gcc 8.2.1 (GCC) 20181201
[0]   configuration: --enable-gpl --enable-version3 --enable-sdl2 --enable-fontconfig --enable-gnutls --enable-iconv --enable-libass --enable-libbluray --enable-li
bfreetype --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-libopus --enable-libshine --enable-libsnappy --en
able-libsoxr --enable-libtheora --enable-libtwolame --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxml2 --enabl
e-libzimg --enable-lzma --enable-zlib --enable-gmp --enable-libvidstab --enable-libvorbis --enable-libvo-amrwbenc --enable-libmysofa --enable-libspeex --enable-lib
xvid --enable-libaom --enable-libmfx --enable-amf --enable-ffnvcodec --enable-cuvid --enable-d3d11va --enable-nvenc --enable-nvdec --enable-dxva2 --enable-avisynth
 --enable-libopenmpt
[0]
[0]   libavutil      56. 26.100 / 56. 26.100
[0]   libavcodec     58. 44.100 / 58. 44.100
[0]   libavformat    58. 26.100 / 58. 26.100
[0]   libavdevice    58.  6.101 / 58.  6.101
[0]   libavfilter     7. 48.100 /  7. 48.100
[0]   libswscale      5.  4.100 /  5.  4.100
[0]   libswresample   3.  4.100 /  3.  4.100
[0]   libpostproc    55.  4.100 / 55.  4.100
[0]
[0] Input #0, image2, from 'C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616385270109\image-%09d.png':
[0]   Duration: 00:00:04.87, start: 0.000000, bitrate: N/A
[0]     Stream #0:0: Video: png, rgba(pc), 1920x1080,
[0] 30 fps, 30 tbr, 30 tbn, 30 tbc
[0]
[0] Stream mapping:
[0]   Stream #0:0 -> #0:0 (png (native) -> h264 (libx264))
[0] Press [q] to stop, [?] for help
[0]
[0] [libx264 @ 000001c5dd4336c0] using cpu capabilities: MMX2 SSE2Fast SSSE3 SSE4.2 AVX FMA3 BMI2 AVX2
[0]
[0] [libx264 @ 000001c5dd4336c0] profile High, level 4.0, 4:2:0, 8-bit
[0]
[0] [libx264 @ 000001c5dd4336c0] 264 - core 157 r2935 545de2f - H.264/MPEG-4 AVC codec - Copyleft 2003-2018 - http://www.videolan.org/x264.html - options: cabac=1
ref=3 deblock=1:0:0 analyse=0x3:0x113 me=hex subme=7 psy=1 psy_rd=1.00:0.00 mixed_ref=1 me_range=16 chroma_me=1 trellis=1 8x8dct=1 cqm=0 deadzone=21,11 fast_pskip=
1 chroma_qp_offset=-2 threads=24 lookahead_threads=4 sliced_threads=0 nr=0 decimate=1 interlaced=0 bluray_compat=0 constrained_intra=0 bframes=3 b_pyramid=2 b_adap
t=1 b_bias=0 direct=1 weightb=1 open_gop=0 weightp=2 keyint=250 keyint_min=25 scenecut=40 intra_refresh=0 rc_lookahead=40 rc=crf mbtree=1 crf=23.0 qcomp=0.60 qpmin
=0 qpmax=69 qpstep=4 ip_ratio=1.40 aq=1:1.00
[0]
[0] Output #0, mp4, to 'C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\605594a324138d4594a8edce-timecut.mp4':
[0]   Metadata:
[0]     encoder         : Lavf58.26.100
[0]
[0]     Stream #0:0: Video: h264 (libx264) (avc1 / 0x31637661), yuv420p, 1920x1080, q=-1--1, 30 fps, 15360 tbn, 30 tbc
[0]     Metadata:
[0]       encoder         : Lavc58.44.100 libx264
[0]     Side data:
[0]
[0] cpb: bitrate max/min/avg: 0/0/0 buffer size: 0 vbv_delay: -1
[0]
[0] frame=   34 fps=0.0 q=0.0 size=       0kB time=00:00:00.00 bitrate=N/A speed=   0x
[0] frame=   67 fps= 66 q=0.0 size=       0kB time=00:00:00.00 bitrate=N/A speed=   0x
[0] frame=  104 fps= 69 q=29.0 size=       0kB time=00:00:01.10 bitrate=   0.3kbits/s speed=0.726x
[0] frame=  133 fps= 66 q=29.0 size=       0kB time=00:00:02.06 bitrate=   0.2kbits/s speed=1.02x
[0] frame=  146 fps= 63 q=-1.0 Lsize=      41kB time=00:00:04.76 bitrate=  70.2kbits/s speed=2.06x
[0] video:38kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 6.593994%
[0]
[0] [libx264 @ 000001c5dd4336c0] frame I:1     Avg QP:19.96  size: 27818
[0] [libx264 @ 000001c5dd4336c0] frame P:37    Avg QP:10.54  size:    84
[0] [libx264 @ 000001c5dd4336c0]
[0] frame B:108   Avg QP:13.67  size:    71
[0] [libx264 @ 000001c5dd4336c0] consecutive B-frames:  1.4%  0.0%  0.0% 98.6%
[0] [libx264 @ 000001c5dd4336c0] mb I  I16..4: 10.5% 85.2%  4.3%
[0] [libx264 @ 000001c5dd4336c0] mb P  I16..4:  0.0%  0.0%  0.0%  P16..4:  0.1%  0.0%  0.0%  0.0%  0.0%    skip:99.9%
[0] [libx264 @ 000001c5dd4336c0] mb B  I16..4:  0.0%  0.0%  0.0%  B16..8:  0.0%  0.0%  0.0%  direct: 0.0%  skip:100.0%  L0:72.0% L1:28.0% BI: 0.0%
[0] [libx264 @ 000001c5dd4336c0] 8x8 transform intra:85.2% inter:3.8%
[0] [libx264 @ 000001c5dd4336c0] coded y,uvDC,uvAC intra: 3.4% 1.9% 1.5% inter: 0.0% 0.0% 0.0%
[0] [libx264 @ 000001c5dd4336c0] i16 v,h,dc,p: 67% 19% 14%  0%
[0] [libx264 @ 000001c5dd4336c0] i8 v,h,dc,ddl,ddr,vr,hd,vl,hu: 69%  6% 25%  0%  0%  0%  0%  0%  0%
[0] [libx264 @ 000001c5dd4336c0] i4 v,h,dc,ddl,ddr,vr,hd,vl,hu: 40% 30% 11%  1%  3%  2%  6%  2%  5%
[0] [libx264 @ 000001c5dd4336c0] i8c dc,h,v,p: 95%  4%  1%  0%
[0] [libx264 @ 000001c5dd4336c0] Weighted P-Frames: Y:0.0% UV:0.0%
[0] [libx264 @ 000001c5dd4336c0] ref P L0: 99.1%  0.0%  0.9%
[0] [libx264 @ 000001c5dd4336c0] ref B L0: 27.1% 72.9%
[0] [libx264 @ 000001c5dd4336c0] ref B L1: 98.2%  1.8%
[0] [libx264 @ 000001c5dd4336c0] kb/s:63.41

@ariel-frischer
Copy link
Author

I'll try testing with console.log now.

@OskarAhl
Copy link

A hacky workaround that i'm using is to inside preparePage:
load the data you want for the client into localStorage - and then refresh the page

e.g:

  await page.evaluate((data) => {
      const serializedData = JSON.stringify(data)
      localStorage.setItem(‘data’, serializedData)
  }, data)
  
  await page.evaluate(() => {
    location.reload(true)
})

@ariel-frischer
Copy link
Author

Just realized I wasn't on the latest release, I was v0.1.4, I'll update now and try @OskarAhl method as well.

@ariel-frischer
Copy link
Author

ariel-frischer commented Mar 22, 2021

Updated to timecut v0.2.0
Interesting running the following code suggested by @OskarAhl :

 preparePage: async page => {
          console.log('Running preparePage!');
          console.log(`page`, page);
          await page.evaluate(data => {
            console.log(`data`, data);
            const serializedData = JSON.stringify(data);
            localStorage.setItem('renderData', serializedData);
          }, renderData);

          await page.evaluate(() => {
            console.log(`location`, location);
            location.reload(true);
          });
        },

I get this:

CONSOLE LOGS

[0] DevTools listening on ws://127.0.0.1:63808/devtools/browser/cd671421-4a00-4415-b942-8fbcf9778e15
[0] Capture Mode: Screenshot
[0] Going to http://localhost:3000/render-animation...
[0] [0321/214058.005:INFO:CONSOLE(325979)] "[HMR] Waiting for update signal from WDS...", source: http://localhost:3000/static/js/17.chunk.js (325979)
[0] [0321/214058.417:INFO:CONSOLE(317922)] "%c action %cpersist/PERSIST %c@ 21:40:56.768 color: gray; font-weight: lighter; color: inherit; color: gray; font-weight: lighter;", source: http://localhost:3000/static/js/17.chu
nk.js (317922)
[0] [0321/214058.417:INFO:CONSOLE(317933)] "%c prev state color: #9E9E9E; font-weight: bold [object Object]", source: http://localhost:3000/static/js/17.chunk.js (317933)
[0] [0321/214058.418:INFO:CONSOLE(317937)] "%c action     color: #03A9F4; font-weight: bold [object Object]", source: http://localhost:3000/static/js/17.chunk.js (317937)
[0] [0321/214058.419:INFO:CONSOLE(317946)] "%c next state color: #4CAF50; font-weight: bold [object Object]", source: http://localhost:3000/static/js/17.chunk.js (317946)
[0] [0321/214058.419:INFO:CONSOLE(317951)] "console.groupEnd", source: http://localhost:3000/static/js/17.chunk.js (317951)
[0] [0321/214058.462:INFO:CONSOLE(317922)] "%c action %cpersist/REHYDRATE %c@ 21:40:56.768 color: gray; font-weight: lighter; color: inherit; color: gray; font-weight: lighter;", source: http://localhost:3000/static/js/17.c
hunk.js (317922)
[0] [0321/214058.463:INFO:CONSOLE(317933)] "%c prev state color: #9E9E9E; font-weight: bold [object Object]", source: http://localhost:3000/static/js/17.chunk.js (317933)
[0] [0321/214058.463:INFO:CONSOLE(317937)] "%c action     color: #03A9F4; font-weight: bold [object Object]", source: http://localhost:3000/static/js/17.chunk.js (317937)
[0] [0321/214058.463:INFO:CONSOLE(317946)] "%c next state color: #4CAF50; font-weight: bold [object Object]", source: http://localhost:3000/static/js/17.chunk.js (317946)
[0] [0321/214058.464:INFO:CONSOLE(317951)] "console.groupEnd", source: http://localhost:3000/static/js/17.chunk.js (317951)
[0] [0321/214058.469:INFO:CONSOLE(317922)] "%c action %c@@router/LOCATION_CHANGE %c@ 21:40:56.768 color: gray; font-weight: lighter; color: inherit; color: gray; font-weight: lighter;", source: http://localhost:3000/static/
js/17.chunk.js (317922)
[0] [0321/214058.470:INFO:CONSOLE(317933)] "%c prev state color: #9E9E9E; font-weight: bold [object Object]", source: http://localhost:3000/static/js/17.chunk.js (317933)
[0] [0321/214058.470:INFO:CONSOLE(317937)] "%c action     color: #03A9F4; font-weight: bold [object Object]", source: http://localhost:3000/static/js/17.chunk.js (317937)
[0] [0321/214058.470:INFO:CONSOLE(317946)] "%c next state color: #4CAF50; font-weight: bold [object Object]", source: http://localhost:3000/static/js/17.chunk.js (317946)
[0] [0321/214058.471:INFO:CONSOLE(317951)] "console.groupEnd", source: http://localhost:3000/static/js/17.chunk.js (317951)
[0] [0321/214058.515:INFO:CONSOLE(28993)] "Uncaught TypeError: Cannot read property 'textUnits' of null", source: http://localhost:3000/static/js/main.chunk.js (28993)
[0] [0321/214058.527:INFO:CONSOLE(302537)] "The above error occurred in the <RenderAnimation> component:
[0]
[0]     at RenderAnimation (http://localhost:3000/static/js/main.chunk.js:28952:93)
[0]     at Route (http://localhost:3000/static/js/17.chunk.js:309134:29)
[0]     at Switch (http://localhost:3000/static/js/17.chunk.js:309336:29)
[0]     at Suspense
[0]     at Routes (http://localhost:3000/static/js/main.chunk.js:20254:5)
[0]     at Connect(Routes) (http://localhost:3000/static/js/17.chunk.js:305182:75)
[0]     at withRouter(Connect(Routes)) (http://localhost:3000/static/js/17.chunk.js:309391:37)
[0]     at SnackbarProvider (http://localhost:3000/static/js/17.chunk.js:254382:24)
[0]     at StyledEngineProvider (http://localhost:3000/static/js/17.chunk.js:186720:5)
[0]     at InnerThemeProvider (http://localhost:3000/static/js/17.chunk.js:175803:74)
[0]     at ThemeProvider (http://localhost:3000/static/js/17.chunk.js:187113:5)
[0]     at ThemeProvider (http://localhost:3000/static/js/17.chunk.js:175822:5)
[0]     at ThemeConfig (http://localhost:3000/static/js/main.chunk.js:21597:3)
[0]     at div
[0]     at Provider (http://localhost:3000/static/js/17.chunk.js:304895:20)
[0]     at App (http://localhost:3000/static/js/17.chunk.js:266849:25)
[0]     at ErrorBoundary (http://localhost:3000/static/js/17.chunk.js:260049:35)
[0]     at DragDropContext (http://localhost:3000/static/js/17.chunk.js:266981:19)
[0]     at App (http://localhost:3000/static/js/main.chunk.js:4284:5)
[0]     at ErrorBoundary (http://localhost:3000/static/js/17.chunk.js:300944:37)
[0]     at Router (http://localhost:3000/static/js/17.chunk.js:308769:30)
[0]     at ConnectedRouter (http://localhost:3000/static/js/17.chunk.js:202338:7)
[0]     at ConnectedRouterWithContext (http://localhost:3000/static/js/17.chunk.js:202461:25)
[0]     at Connect(ConnectedRouterWithContext) (http://localhost:3000/static/js/17.chunk.js:305182:75)
[0]     at PersistGate (http://localhost:3000/static/js/17.chunk.js:318644:5)
[0]     at Provider (http://localhost:3000/static/js/17.chunk.js:304895:20)
[0]
[0] React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.", source: http://localhost:3000/static/js/17.chunk.js (302537)
[0] [0321/214058.529:INFO:CONSOLE(260110)] "Uncaught TypeError: Cannot read property 'textUnits' of null", source: http://localhost:3000/static/js/17.chunk.js (260110)
[0] [0321/214058.532:INFO:CONSOLE(302537)] "The above error occurred in the <ErrorBoundary> component:
[0]
[0]     at ErrorBoundary (http://localhost:3000/static/js/17.chunk.js:260049:35)
[0]     at DragDropContext (http://localhost:3000/static/js/17.chunk.js:266981:19)
[0]     at App (http://localhost:3000/static/js/main.chunk.js:4284:5)
[0]     at ErrorBoundary (http://localhost:3000/static/js/17.chunk.js:300944:37)
[0]     at Router (http://localhost:3000/static/js/17.chunk.js:308769:30)
[0]     at ConnectedRouter (http://localhost:3000/static/js/17.chunk.js:202338:7)
[0]     at ConnectedRouterWithContext (http://localhost:3000/static/js/17.chunk.js:202461:25)
[0]     at Connect(ConnectedRouterWithContext) (http://localhost:3000/static/js/17.chunk.js:305182:75)
[0]     at PersistGate (http://localhost:3000/static/js/17.chunk.js:318644:5)
[0]     at Provider (http://localhost:3000/static/js/17.chunk.js:304895:20)
[0]
[0] React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.", source: http://localhost:3000/static/js/17.chunk.js (302537)
[0] [0321/214058.558:INFO:CONSOLE(302537)] "FRONTEND ERROR! ", source: http://localhost:3000/static/js/17.chunk.js (302537)
[0] [0321/214058.558:INFO:CONSOLE(302537)] "{}", source: http://localhost:3000/static/js/17.chunk.js (302537)
[0] [0321/214058.559:INFO:CONSOLE(302537)] "
[0]     at ErrorBoundary (http://localhost:3000/static/js/17.chunk.js:260049:35)
[0]     at DragDropContext (http://localhost:3000/static/js/17.chunk.js:266981:19)
[0]     at App (http://localhost:3000/static/js/main.chunk.js:4284:5)
[0]     at ErrorBoundary (http://localhost:3000/static/js/17.chunk.js:300944:37)
[0]     at Router (http://localhost:3000/static/js/17.chunk.js:308769:30)
[0]     at ConnectedRouter (http://localhost:3000/static/js/17.chunk.js:202338:7)
[0]     at ConnectedRouterWithContext (http://localhost:3000/static/js/17.chunk.js:202461:25)
[0]     at Connect(ConnectedRouterWithContext) (http://localhost:3000/static/js/17.chunk.js:305182:75)
[0]     at PersistGate (http://localhost:3000/static/js/17.chunk.js:318644:5)
[0]     at Provider (http://localhost:3000/static/js/17.chunk.js:304895:20)", source: http://localhost:3000/static/js/17.chunk.js (302537)
[0] Page loaded
[0] Preparing page before screenshots...
[0] Running preparePage!
[0] page Page {
[0]   _events: [Object: null prototype] {},
[0]   _eventsCount: 0,
[0]   _maxListeners: undefined,
[0]   _closed: false,
[0]   _client: CDPSession {
[0]     _events: [Object: null prototype] {
[0]       'Fetch.requestPaused': [Function: bound _onRequestPaused],
[0]       'Fetch.authRequired': [Function: bound _onAuthRequired],
[0]       'Network.requestWillBeSent': [Function: bound _onRequestWillBeSent],
[0]       'Network.requestServedFromCache': [Function: bound _onRequestServedFromCache],
[0]       'Network.responseReceived': [Function: bound _onResponseReceived],
[0]       'Network.loadingFinished': [Function: bound _onLoadingFinished],
[0]       'Network.loadingFailed': [Function: bound _onLoadingFailed],
[0]       'Page.frameAttached': [Function],
[0]       'Page.frameNavigated': [Function],
[0]       'Page.navigatedWithinDocument': [Function],
[0]       'Page.frameDetached': [Function],
[0]       'Page.frameStoppedLoading': [Function],
[0]       'Runtime.executionContextCreated': [Function],
[0]       'Runtime.executionContextDestroyed': [Function],
[0]       'Runtime.executionContextsCleared': [Function],
[0]       'Page.lifecycleEvent': [Function],
[0]       'Target.attachedToTarget': [Function],
[0]       'Target.detachedFromTarget': [Function],
[0]       'Page.domContentEventFired': [Function],
[0]       'Page.loadEventFired': [Function],
[0]       'Runtime.consoleAPICalled': [Function],
[0]       'Runtime.bindingCalled': [Function],
[0]       'Page.javascriptDialogOpening': [Function],
[0]       'Runtime.exceptionThrown': [Function],
[0]       'Inspector.targetCrashed': [Function],
[0]       'Performance.metrics': [Function],
[0]       'Log.entryAdded': [Function],
[0]       'Page.fileChooserOpened': [Function]
[0]     },
[0]     _eventsCount: 28,
[0]     _maxListeners: undefined,
[0]     _callbacks: Map {},
[0]     _connection: Connection {
[0]       _events: [Object: null prototype],
[0]       _eventsCount: 4,
[0]       _maxListeners: undefined,
[0]       _url: 'ws://127.0.0.1:63808/devtools/browser/cd671421-4a00-4415-b942-8fbcf9778e15',
[0]       _lastId: 28,
[0]       _callbacks: Map {},
[0]       _delay: 0,
[0]       _transport: [WebSocketTransport],
[0]       _sessions: [Map],
[0]       _closed: false,
[0]       [Symbol(kCapture)]: false
[0]     },
[0]     _targetType: 'page',
[0]     _sessionId: '6D195BE3407F3936680A77E043ACB0F3',
[0]     [Symbol(kCapture)]: false
[0]   },
[0]   _target: Target {
[0]     _targetInfo: {
[0]       targetId: '539BA84FDDE157C4057AFAEA36D4F324',
[0]       type: 'page',
[0]       title: 'localhost:3000/render-animation',
[0]       url: 'http://localhost:3000/render-animation',
[0]       attached: true,
[0]       browserContextId: '5B1566C87C1269BB24C7A4A31C5BE2AD'
[0]     },
[0]     _browserContext: BrowserContext {
[0]       _events: [Object: null prototype] {},
[0]       _eventsCount: 0,
[0]       _maxListeners: undefined,
[0]       _connection: [Connection],
[0]       _browser: [Browser],
[0]       _id: null,
[0]       [Symbol(kCapture)]: false
[0]     },
[0]     _targetId: '539BA84FDDE157C4057AFAEA36D4F324',
[0]     _sessionFactory: [Function],
[0]     _ignoreHTTPSErrors: false,
[0]     _defaultViewport: { width: 800, height: 600 },
[0]     _screenshotTaskQueue: TaskQueue { _chain: [Promise] },
[0]     _pagePromise: Promise { [Circular] },
[0]     _workerPromise: null,
[0]     _initializedCallback: [Function],
[0]     _initializedPromise: Promise { true },
[0]     _closedCallback: [Function],
[0]     _isClosedPromise: Promise { <pending> },
[0]     _isInitialized: true
[0]   },
[0]   _keyboard: Keyboard {
[0]     _client: CDPSession {
[0]       _events: [Object: null prototype],
[0]       _eventsCount: 28,
[0]       _maxListeners: undefined,
[0]       _callbacks: Map {},
[0]       _connection: [Connection],
[0]       _targetType: 'page',
[0]       _sessionId: '6D195BE3407F3936680A77E043ACB0F3',
[0]       [Symbol(kCapture)]: false
[0]     },
[0]     _modifiers: 0,
[0]     _pressedKeys: Set {}
[0]   },
[0]   _mouse: Mouse {
[0]     _client: CDPSession {
[0]       _events: [Object: null prototype],
[0]       _eventsCount: 28,
[0]       _maxListeners: undefined,
[0]       _callbacks: Map {},
[0]       _connection: [Connection],
[0]       _targetType: 'page',
[0]       _sessionId: '6D195BE3407F3936680A77E043ACB0F3',
[0]       [Symbol(kCapture)]: false
[0]     },
[0]     _keyboard: Keyboard {
[0]       _client: [CDPSession],
[0]       _modifiers: 0,
[0]       _pressedKeys: Set {}
[0]     },
[0]     _x: 0,
[0]     _y: 0,
[0]     _button: 'none'
[0]   },
[0]   _timeoutSettings: TimeoutSettings {
[0]     _defaultTimeout: null,
[0]     _defaultNavigationTimeout: null
[0]   },
[0]   _touchscreen: Touchscreen {
[0]     _client: CDPSession {
[0]       _events: [Object: null prototype],
[0]       _eventsCount: 28,
[0]       _maxListeners: undefined,
[0]       _callbacks: Map {},
[0]       _connection: [Connection],
[0]       _targetType: 'page',
[0]       _sessionId: '6D195BE3407F3936680A77E043ACB0F3',
[0]       [Symbol(kCapture)]: false
[0]     },
[0]     _keyboard: Keyboard {
[0]       _client: [CDPSession],
[0]       _modifiers: 0,
[0]       _pressedKeys: Set {}
[0]     }
[0]   },
[0]   _accessibility: Accessibility {
[0]     _client: CDPSession {
[0]       _events: [Object: null prototype],
[0]       _eventsCount: 28,
[0]       _maxListeners: undefined,
[0]       _callbacks: Map {},
[0]       _connection: [Connection],
[0]       _targetType: 'page',
[0]       _sessionId: '6D195BE3407F3936680A77E043ACB0F3',
[0]       [Symbol(kCapture)]: false
[0]     }
[0]   },
[0]   _frameManager: FrameManager {
[0]     _events: [Object: null prototype] {
[0]       [Symbol(Events.FrameManager.FrameAttached)]: [Function],
[0]       [Symbol(Events.FrameManager.FrameDetached)]: [Function],
[0]       [Symbol(Events.FrameManager.FrameNavigated)]: [Function]
[0]     },
[0]     _eventsCount: 3,
[0]     _maxListeners: undefined,
[0]     _client: CDPSession {
[0]       _events: [Object: null prototype],
[0]       _eventsCount: 28,
[0]       _maxListeners: undefined,
[0]       _callbacks: Map {},
[0]       _connection: [Connection],
[0]       _targetType: 'page',
[0]       _sessionId: '6D195BE3407F3936680A77E043ACB0F3',
[0]       [Symbol(kCapture)]: false
[0]     },
[0]     _page: [Circular],
[0]     _networkManager: NetworkManager {
[0]       _events: [Object: null prototype],
[0]       _eventsCount: 4,
[0]       _maxListeners: undefined,
[0]       _client: [CDPSession],
[0]       _ignoreHTTPSErrors: false,
[0]       _frameManager: [Circular],
[0]       _requestIdToRequest: Map {},
[0]       _requestIdToRequestWillBeSentEvent: Map {},
[0]       _extraHTTPHeaders: {},
[0]       _offline: false,
[0]       _credentials: null,
[0]       _attemptedAuthentications: Set {},
[0]       _userRequestInterceptionEnabled: false,
[0]       _protocolRequestInterceptionEnabled: false,
[0]       _userCacheDisabled: false,
[0]       _requestIdToInterceptionId: Map {},
[0]       [Symbol(kCapture)]: false
[0]     },
[0]     _timeoutSettings: TimeoutSettings {
[0]       _defaultTimeout: null,
[0]       _defaultNavigationTimeout: null
[0]     },
[0]     _frames: Map {
[0]       '539BA84FDDE157C4057AFAEA36D4F324' => [Frame],
[0]       'D5A36AB9B313305B6116672CC1C74F4D' => [Frame],
[0]       'C48973CDA37E28CB4364FC0A9B112CE3' => [Frame],
[0]       '36D0F0B0F8E2640896A4451F3779FD8B' => [Frame]
[0]     },
[0]     _contextIdToContext: Map {
[0]       3 => [ExecutionContext],
[0]       4 => [ExecutionContext],
[0]       5 => [ExecutionContext],
[0]       6 => [ExecutionContext],
[0]       7 => [ExecutionContext],
[0]       8 => [ExecutionContext],
[0]       9 => [ExecutionContext],
[0]       10 => [ExecutionContext]
[0]     },
[0]     _isolatedWorlds: Set { '__puppeteer_utility_world__' },
[0]     _mainFrame: Frame {
[0]       _frameManager: [Circular],
[0]       _client: [CDPSession],
[0]       _parentFrame: null,
[0]       _url: 'http://localhost:3000/render-animation',
[0]       _id: '539BA84FDDE157C4057AFAEA36D4F324',
[0]       _detached: false,
[0]       _loaderId: '1D84FDE92378A6053FCAB94DDC77A34B',
[0]       _lifecycleEvents: [Set],
[0]       _mainWorld: [DOMWorld],
[0]       _secondaryWorld: [DOMWorld],
[0]       _childFrames: [Set],
[0]       _name: undefined,
[0]       _navigationURL: 'http://localhost:3000/render-animation'
[0]     },
[0]     [Symbol(kCapture)]: false
[0]   },
[0]   _emulationManager: EmulationManager {
[0]     _client: CDPSession {
[0]       _events: [Object: null prototype],
[0]       _eventsCount: 28,
[0]       _maxListeners: undefined,
[0]       _callbacks: Map {},
[0]       _connection: [Connection],
[0]       _targetType: 'page',
[0]       _sessionId: '6D195BE3407F3936680A77E043ACB0F3',
[0]       [Symbol(kCapture)]: false
[0]     },
[0]     _emulatingMobile: false,
[0]     _hasTouch: false
[0]   },
[0]   _tracing: Tracing {
[0]     _client: CDPSession {
[0]       _events: [Object: null prototype],
[0]       _eventsCount: 28,
[0]       _maxListeners: undefined,
[0]       _callbacks: Map {},
[0]       _connection: [Connection],
[0]       _targetType: 'page',
[0]       _sessionId: '6D195BE3407F3936680A77E043ACB0F3',
[0]       [Symbol(kCapture)]: false
[0]     },
[0]     _recording: false,
[0]     _path: ''
[0]   },
[0]   _pageBindings: Map {},
[0]   _coverage: Coverage {
[0]     _jsCoverage: JSCoverage {
[0]       _client: [CDPSession],
[0]       _enabled: false,
[0]       _scriptURLs: Map {},
[0]       _scriptSources: Map {},
[0]       _eventListeners: [],
[0]       _resetOnNavigation: false
[0]     },
[0]     _cssCoverage: CSSCoverage {
[0]       _client: [CDPSession],
[0]       _enabled: false,
[0]       _stylesheetURLs: Map {},
[0]       _stylesheetSources: Map {},
[0]       _eventListeners: [],
[0]       _resetOnNavigation: false
[0]     }
[0]   },
[0]   _javascriptEnabled: true,
[0]   _viewport: { width: 1920, height: 1080, deviceScaleFactor: 1 },
[0]   _screenshotTaskQueue: TaskQueue { _chain: Promise { undefined } },
[0]   _workers: Map {},
[0]   _fileChooserInterceptors: Set {},
[0]   [Symbol(kCapture)]: false
[0] }
[0] [0321/214106.225:INFO:CONSOLE(28085)] "data [object Object]", source: http://localhost:3000/static/js/main.chunk.js (28085)
[0] Page prepared
[0] [0321/214106.226:INFO:CONSOLE(28085)] "location [object Location]", source: http://localhost:3000/static/js/main.chunk.js (28085)
[0] Error: Execution context was destroyed, most likely because of a navigation.
[0]     at rewriteError (C:\Users\Ariel\initiate-video\backend\node_modules\timesnap\node_modules\puppeteer\lib\ExecutionContext.js:167:15)
[0]     at processTicksAndRejections (internal/process/task_queues.js:97:5)
[0]     at async ExecutionContext._evaluateInternal (C:\Users\Ariel\initiate-video\backend\node_modules\timesnap\node_modules\puppeteer\lib\ExecutionContext.js:120:56)
[0]     at async ExecutionContext.evaluate (C:\Users\Ariel\initiate-video\backend\node_modules\timesnap\node_modules\puppeteer\lib\ExecutionContext.js:48:12)
[0]     at async Promise.all (index 0)
[0]   -- ASYNC --
[0]     at ExecutionContext.<anonymous> (C:\Users\Ariel\initiate-video\backend\node_modules\timesnap\node_modules\puppeteer\lib\helper.js:111:15)
[0]     at DOMWorld.evaluate (C:\Users\Ariel\initiate-video\backend\node_modules\timesnap\node_modules\puppeteer\lib\DOMWorld.js:112:20)
[0]   -- ASYNC --
[0]     at Frame.<anonymous> (C:\Users\Ariel\initiate-video\backend\node_modules\timesnap\node_modules\puppeteer\lib\helper.js:111:15)
[0]     at C:\Users\Ariel\initiate-video\backend\node_modules\timesnap\lib\overwrite-time.js:55:18
[0]     at Array.map (<anonymous>)
[0]     at Object.goToTimeAndAnimate (C:\Users\Ariel\initiate-video\backend\node_modules\timesnap\lib\overwrite-time.js:54:36)
[0]     at C:\Users\Ariel\initiate-video\backend\node_modules\timesnap\index.js:258:29
[0]     at loop (C:\Users\Ariel\initiate-video\backend\node_modules\timesnap\lib\utils.js:39:14)
[0] Error: Execution context was destroyed, most likely because of a navigation.
[0]     at rewriteError (C:\Users\Ariel\initiate-video\backend\node_modules\timesnap\node_modules\puppeteer\lib\ExecutionContext.js:167:15)
[0]     at processTicksAndRejections (internal/process/task_queues.js:97:5)
[0]     at async ExecutionContext._evaluateInternal (C:\Users\Ariel\initiate-video\backend\node_modules\timesnap\node_modules\puppeteer\lib\ExecutionContext.js:120:56)
[0]     at async ExecutionContext.evaluate (C:\Users\Ariel\initiate-video\backend\node_modules\timesnap\node_modules\puppeteer\lib\ExecutionContext.js:48:12)
[0]     at async Promise.all (index 0)
[0]   -- ASYNC --
[0]     at ExecutionContext.<anonymous> (C:\Users\Ariel\initiate-video\backend\node_modules\timesnap\node_modules\puppeteer\lib\helper.js:111:15)
[0]     at DOMWorld.evaluate (C:\Users\Ariel\initiate-video\backend\node_modules\timesnap\node_modules\puppeteer\lib\DOMWorld.js:112:20)
[0]   -- ASYNC --
[0]     at Frame.<anonymous> (C:\Users\Ariel\initiate-video\backend\node_modules\timesnap\node_modules\puppeteer\lib\helper.js:111:15)
[0]     at C:\Users\Ariel\initiate-video\backend\node_modules\timesnap\lib\overwrite-time.js:55:18
[0]     at Array.map (<anonymous>)
[0]     at Object.goToTimeAndAnimate (C:\Users\Ariel\initiate-video\backend\node_modules\timesnap\lib\overwrite-time.js:54:36)
[0]     at C:\Users\Ariel\initiate-video\backend\node_modules\timesnap\index.js:258:29
[0]     at loop (C:\Users\Ariel\initiate-video\backend\node_modules\timesnap\lib\utils.js:39:14)
[0] Status:  undefined Message:  timecut: Error: ENOENT: no such file or directory, scandir 'C:\Users\Ariel\initiate-video\backend\server\lib\puppeteer\tmp\timecut-temp-1616388056167'

Analysis

  • This log reveals that the page, data, window, and location objects all seem to be logging something (so they at least aren't undefined or null) yet my FE still throws errors, I have updated it to try to load data from localStorage.getItem() OR window.renderData this is how I'm trying to pick it up in my react component:
 const [renderData, setRenderData] = useState<App.renderAnimData>(
    //@ts-ignore
    window.renderData ? window.renderData : JSON.parse(localStorage.getItem('renderData')),
  );

@ariel-frischer
Copy link
Author

ariel-frischer commented Mar 22, 2021

page.evaluateOnNewDocument evaluates its function inside the page context, so log by itself won't be available. If you need to log, you can use console.log instead, just for that function.

timecut should be logging 'Adding custom code'. If it's logging anything, can you paste it here?

@tungs After updating my timecut version I did start to see Adding custom code logs however the window.renderData still did not seem to get loaded in the actual browser window.

@ariel-frischer
Copy link
Author

Update - I've gotten localStorage to work though first going to the page page.goto, then evaluating then reloading + page.goto again:

async navigatePageToURL({ page, url, log }) {
            log('navigatePageToURL()');
            await page.goto(url, { waitUntil: 'networkidle0' });
            await page.evaluate(data => {
              const serializedData = JSON.stringify(data);
              window.localStorage.setItem('renderData', serializedData);

              location.reload(true);
            }, renderData);

            log('Going to ' + url + '...');
            return await page.goto(url, { waitUntil: 'networkidle0' });
          },

@florinvirdol
Copy link

Hi guys,
Could you please provide a full working example with navigatePageToURL?
Thank you very much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants