puppeteer evaluate results in context destroyed - node.js

Question

Trying to wait for DOM mutations to stop but ends with Execution context was destroyed., any suggestion is welcome
page.evaluate(() => {
return new Promise((resolve,reject) => {
var timerId;
function resetTimer() {
clearInterval(timerId);
timerId = setTimeout(() => {
resolve(true);
}, 3000)
}
new MutationObserver(
() => {
resetTimer();
}
).observe(document.getElementById('root'), {
attributes: true, childList: true
});
resetTimer();
})
})
})
Protocol error (Runtime.callFunctionOn): Execution context was destroyed. undefined
at Promise (node_modules/puppeteer/lib/Connection.js:198:56)
at CDPSession.send (node_modules/puppeteer/lib/Connection.js:197:12)
at ExecutionContext.evaluateHandle (node_modules/puppeteer/lib/ExecutionContext.js:71:75)
at ExecutionContext.evaluate (node_modules/puppeteer/lib/ExecutionContext.js:46:31)
at Frame.evaluate (node_modules/puppeteer/lib/FrameManager.js:299:20)

Answer 1

The above snippet was run before getting a navigating lock on a page. Running the page.evaluate between navigation can throw this error.
Found this from,
Error: Protocol error (Runtime.callFunctionOn): Execution context was destroyed.
No page navigation lock ?
Fix was (at least in my case) to wait till URL changed and then page.evaluate.

Answer 2

Notes:
Are you using async/await in your code? If you have a promise but don't use any chain or async/await, then it should throw up errors like that.
Also you are firing the resetTimer out of observer callback too.
If not, then you are probably not monitoring the correct changes of that dom element.
Here is a a simple react app which changes state after 2 seconds.
class App extends Component {
constructor() {
super();
this.state = { bar: "foo" };
}
componentDidMount() {
setTimeout(() => this.setState({ bar: "not foo" }), 2000);
}
render() {
return <div className="App">{this.state.bar}</div>;
}
}
Here is the modified code for the above snippet.
await page.evaluate(() => { // wait for it to resolve
return new Promise((resolve, reject) => {
var timerId;
function resetTimer() {
clearInterval(timerId);
timerId = setTimeout(() => {
resolve(true);
}, 5000); // resolves after some time
}
const observer = new MutationObserver((mutations) => {
// show me the changes
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
// reset timer etc.
resetTimer();
});
// observe a lot of changes
observer.observe(document.getElementById("root"), {
attributes: true,
characterData: true,
childList: true,
subtree: true,
attributeOldValue: true,
characterDataOldValue: true
});
});
});
Here is the result: