Réparation de l'erreur Chrome de Puppeteer « Impossible de trouver (ver. 130.0.6723.116) » lors du déploiement de Vercel

Solution 1 : configurer Puppeteer pour installer correctement Chrome sur Vercel

Cette solution backend basée sur Node.js configure le chemin du cache et les commandes d'installation de Puppeteer pour garantir que Chrome s'installe correctement.

const puppeteer = require('puppeteer');
const path = require('path');
const { v4: uuid } = require('uuid');
const fs = require('fs');

// Main screenshot function
const screenshot = async (req, res) => {
    const url = req.query.url;
    if (!url) {
        return res.status(400).json({ message: 'URL is required' });
    }

    let browser;
    try {
        // Launch Puppeteer with specific Chrome executable path and options
        browser = await puppeteer.launch({
            ignoreHTTPSErrors: true,
            executablePath: process.env.CHROME_PATH || '/opt/bin/chromium',
            args: ['--no-sandbox', '--disable-setuid-sandbox']
        });

        const page = await browser.newPage();
        await page.goto(url, { waitUntil: 'networkidle2' });
        await page.setViewport({ width: 1920, height: 1080 });

        const fileName = \`${uuid()}.png\`;
        const screenshotPath = path.join(__dirname, '..', 'public', fileName);
        await page.screenshot({ path: screenshotPath });

        res.json({ screenshotPath: \`/image/\${fileName}\` });
    } catch (err) {
        console.error('Error capturing screenshot:', err);
        res.status(500).json({ error: 'Failed to capture screenshot' });
    } finally {
        if (browser) await browser.close();
    }
};

module.exports = screenshot;

Solution 2 : configuration personnalisée du marionnettiste pour Vercel avec un fichier .puppeteerrc.cjs

Cette solution ajuste le fichier de configuration de Puppeteer (.puppeteerrc.cjs) pour spécifier le chemin du cache Chrome et assurer la compatibilité avec la structure de fichiers de Vercel.

const { join } = require('path');

/
 * @type {import('puppeteer').Configuration}
 */
module.exports = {
    // Specify cache directory for Puppeteer
    cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
    // Specify which Chromium version Puppeteer should install
    executablePath: '/opt/bin/chromium',
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
};

Solution 3 : implémentation de variables d'environnement et de scripts dans package.json pour Puppeteer

Cette approche modifie le package.json pour installer des binaires Chrome spécifiques et configurer automatiquement les configurations de Puppeteer pendant le déploiement.

// Add to package.json
"scripts": {
    "postinstall": "npx puppeteer install --path ./.cache/puppeteer",
    "start": "node index.js"
}

// Configure environment variable in Vercel
process.env.CHROME_PATH = "/opt/bin/chromium";

Test unitaire pour la fonctionnalité de capture d'écran du marionnettiste

Ce script de test Node.js Mocha vérifie la capacité de Puppeteer à capturer une capture d'écran à partir d'une URL dans divers environnements.

const chai = require('chai');
const chaiHttp = require('chai-http');
const app = require('../app'); // Express app where screenshot endpoint is defined

chai.use(chaiHttp);
const expect = chai.expect;

describe('Screenshot API', () => {
    it('should return an error for missing URL parameter', (done) => {
        chai.request(app)
            .get('/screenshot')
            .end((err, res) => {
                expect(res).to.have.status(400);
                expect(res.body).to.have.property('message').eql('URL is required');
                done();
            });
    });

    it('should capture a screenshot successfully for a valid URL', (done) => {
        chai.request(app)
            .get('/screenshot?url=https://example.com')
            .end((err, res) => {
                expect(res).to.have.status(200);
                expect(res.body).to.have.property('screenshotPath');
                done();
            });
    });
});

Questions courantes sur les déploiements Puppeteer et Cloud

1. Pourquoi est-ce que j'obtiens le message d'erreur « Chrome introuvable » sur les plates-formes cloud ?
2. Ces erreurs se produisent souvent parce que les plates-formes cloud n'incluent pas le binaire Chrome complet par défaut. Vous pouvez résoudre ce problème en spécifiant executablePath dans votre configuration Puppeteer.
3. Comment puis-je m'assurer que Puppeteer fonctionne à la fois dans les environnements locaux et cloud ?
4. En utilisant executablePath et args avec des drapeaux compatibles avec le cloud comme --no-sandbox peut rendre votre configuration suffisamment flexible pour les deux environnements.
5. Qu'est-ce que le --no-sandbox drapeau faire dans Marionnettiste?
6. Le --no-sandbox L'indicateur désactive la sécurité sandbox de Chrome, ce qui permet à Puppeteer de s'exécuter sur des services cloud qui ne prennent pas en charge le sandboxing, mais il doit être utilisé avec prudence.
7. Pourquoi ai-je besoin d'une coutume cacheDirectory pour le Marionnettiste ?
8. Définir une coutume cacheDirectory garantit que Puppeteer télécharge les binaires Chrome vers un emplacement connu, ce qui peut éviter les erreurs lors du déploiement, en particulier dans les environnements sans serveur.
9. Quel est le but du networkidle2 possibilité dans le goto méthode?
10. Le networkidle2 L'option attend qu'il n'y ait pas plus de deux connexions réseau actives. Ceci est utile pour capturer une page entièrement chargée et gérer le contenu dynamique.
11. Puppeteer peut-il fonctionner sans une version spécifiée de Chrome ?
12. Oui, mais il est recommandé de préciser executablePath et assurez-vous qu'une version compatible de Chrome est accessible pour des résultats cohérents dans les configurations cloud.
13. Comment gérer le cache Puppeteer dans différents environnements ?
14. Vous pouvez spécifier un universel cacheDirectory dans le .puppeteerrc.cjs fichier, permettant à Puppeteer de trouver des binaires Chrome sur des plates-formes telles que Vercel et Heroku.
15. Est puppeteer-core différent de puppeteer?
16. Oui, puppeteer-core exclut Chrome fourni pour réduire la taille, vous devrez donc spécifier un binaire Chrome. Le plein puppeteer Le package inclut automatiquement Chrome.
17. Que dois-je faire si Puppeteer est lent dans les environnements cloud ?
18. Optimisation viewport paramètres et désactivation des options inutiles comme devtools peut améliorer les performances dans des environnements aux ressources limitées.
19. Puppeteer est-il compatible avec tous les fournisseurs de cloud ?
20. Généralement oui, mais chaque fournisseur peut avoir des exigences uniques. Utiliser des paramètres adaptés au cloud tels que --no-sandbox assure une meilleure compatibilité.

Réflexions finales sur la façon de faire fonctionner Puppeteer sur Vercel

Déployer avec succès Puppeteer sur Vercel nécessite de comprendre les besoins de configuration spécifiques de Chrome. Spécification options de lancement et la configuration correcte des chemins de cache de Puppeteer permet d'éviter l'erreur frustrante « Chrome introuvable ». Ces ajustements garantissent que Puppeteer fonctionne de manière fiable dans les environnements locaux et cloud. 🚀

Une fois que vous avez adapté ces solutions à votre projet, la capture de captures d'écran à partir des URL fournies par l'utilisateur devient transparente, permettant des applications Web plus dynamiques. Avec une configuration appropriée, Puppeteer reste un outil inestimable pour l'automatisation et le web scraping, même sur des plates-formes sans serveur comme Vercel.