I try to use react-snap but I always this error :
crawled 29 out of 55 (/cours/les-puissances/ecriture-scientifique)
✅ crawled 30 out of 55 (/cours/les-puissances/liens-entre-puissances-et-racines)
✅ crawled 31 out of 55 (/cours/le-theoreme-de-pythagore/reciproque)
error at /cours/le-theoreme-de-pythagore/demonstration: Error: Page crashed!
at Page._onTargetCrashed (/home/jozinho/Projects/git/maths/node_modules/react-snap/node_modules/puppeteer/lib/Page.js:215:24)
at CDPSession.<anonymous> (/home/jozinho/Projects/git/maths/node_modules/react-snap/node_modules/puppeteer/lib/Page.js:123:56)
at CDPSession.emit (node:events:513:28)
at CDPSession._onMessage (/home/jozinho/Projects/git/maths/node_modules/react-snap/node_modules/puppeteer/lib/Connection.js:200:12)
at Connection._onMessage (/home/jozinho/Projects/git/maths/node_modules/react-snap/node_modules/puppeteer/lib/Connection.js:112:17)
at WebSocket.<anonymous> (/home/jozinho/Projects/git/maths/node_modules/react-snap/node_modules/puppeteer/lib/WebSocketTransport.js:44:24)
at WebSocket.onMessage (/home/jozinho/Projects/git/maths/node_modules/react-snap/node_modules/ws/lib/event-target.js:120:16)
at WebSocket.emit (node:events:513:28)
at Receiver.receiverOnMessage (/home/jozinho/Projects/git/maths/node_modules/react-snap/node_modules/ws/lib/websocket.js:789:20)
at Receiver.emit (node:events:513:28)
✅ crawled 32 out of 55 (/cours/le-theoreme-de-pythagore/applications)
✅ crawled 53 out of 55 (/cours/le-nombre-d-or/evolutions-de-lapins)
I downgraded on 1.10.0 like this post advised, but I still got the same result. The problem seems to be a timeout on too big pages.
Is there a way to change the timeout options managed by puppeter ?
Here are my routes, AppRoutes.jsx
:
import { Route, Routes } from 'react-router-dom';
import Home from './components/home/Home';
import CoursesTableOfContents from './components/courses/CoursesTableOfContents';
import ChaptersTableOfContents from './components/courses/ChaptersTableOfContents';
import GenericChapter from './components/courses/GenericChapter';
import LesFonctionsUsuelles from './components/courses/usual-functions/LesFonctionsUsuelles';
import PdfTableOfContents from './components/pdf-viewer/PdfTableOfContents';
import PDFViewerPage from './components/pdf-viewer/PDFViewerPage';
import GamesTableOfContents from './components/games/GamesTableOfContents';
import Links from './components/links/Links';
import VCard from './components/contact/VCard';
import Error from './components/immutable/Error';
const AppRoutes = ( {courseItems, pdfItems, gameItems} ) => {
return <Routes>
<Route exact path="/" element={<Home />} />
<Route path="/cours" element={<CoursesTableOfContents courseItems={courseItems} />} />
{courseItems.map(courseItem => {
return <Route
key={courseItem.id}
path={`/cours/${courseItem.relativePath}`}
element={<ChaptersTableOfContents courseItem={courseItem} />} />
})}
{courseItems.map(courseItem => (
courseItem.chapters.map(chapter => {
return <Route
key={chapter.id}
path={`/cours/${courseItem.relativePath}/${chapter.relativePath}`}
element={<GenericChapter chapter={chapter} courseItem={courseItem} />} />
})
))}
<Route path="/cours/les-fonctions-usuelles" element={<LesFonctionsUsuelles />} />
<Route path="/bds-de-jpp" element={<PdfTableOfContents pdfItems={pdfItems} />} />
{pdfItems.map(pdfItem => (
<Route
key={pdfItem.id}
path={`/bds-de-jpp/${pdfItem.relativePath}`}
element={<PDFViewerPage pdfItem={pdfItem} />} />
))}
<Route path="/jeux" element={<GamesTableOfContents gameItems={gameItems} />} />
{gameItems.map(gameItem => (
<Route
key={gameItem.id}
path={`/jeux/${gameItem.relativePath}`}
element={gameItem.component} />
))}
<Route path="/liens" element={<Links />} />
<Route path="/contact" element={<VCard />} />
<Route path="*" element={<Error />} status={404} />
</Routes>
}
export default AppRoutes;
where courseItems
, pdfItems
, gameItems
are arrays.
Al these routes are added at the end of my App.js
:
var courseItems = coursesResourceBuilder();
var pdfItems = pdfResourceBuilder();
var gameItems = gamesResourceBuilder();
return (
<div className="App" >
<AppContext.Provider value={appContext} >
<LoadingContext.Provider value={loadingContext} >
<BrowserRouter>
<Header courseItems = {courseItems} pdfItems ={pdfItems} gameItems={gameItems} />
<AppRoutes courseItems={courseItems} pdfItems={pdfItems} gameItems={gameItems} />
<Footer />
</BrowserRouter>
</LoadingContext.Provider>
</AppContext.Provider>
</div>
);
Can somebody already know about these potential options ? I didn't find anything on the doc.
I know that it was possible with react-spa-prerender for example.
Thank you very much.