0

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.

jozinho22
  • 459
  • 2
  • 7
  • 24

0 Answers0