Webpack & Bugsnag

Releases et sourcemaps en production (exemple avec Nuxt)

Nico Prat
Nico Prat
Dec 18, 2018 · 3 min read

1️⃣ Installer les plugins

yarn add -D webpack-bugsnag-plugins
const { BugsnagBuildReporterPlugin, BugsnagSourceMapUploaderPlugin } = require(‘webpack-bugsnag-plugins’)

2️⃣ Créer une nouvelle release

"generate": "RELEASE=$(git rev-parse HEAD) nuxt build"

3️⃣ Rapporter la release à Bugsnag

new BugsnagBuildReporterPlugin({
apiKey: 'XXX',
appVersion: process.env.RELEASE,
releaseStage: 'production'
})
export default {
build: {
extend (config, { isClient }) {
if (!isDev && isClient) {
config.plugins.push(
new BugsnagBuildReporterPlugin({
apiKey: 'XXX',
appVersion: process.env.RELEASE,
releaseStage: 'production'
})
)
}
}
}
}

4️⃣ Générer les sourcemaps

{
"devtool": "#source-map"
}
export default {
build: {
extend (config, { isClient }) {
if (!isDev && isClient) {
config.devtool = '#source-map'
}
}
}
}

5️⃣ Transférer les sourcemaps

new BugsnagSourceMapUploaderPlugin({
apiKey: 'XXX',
appVersion: process.env.RELEASE,
releaseStage: 'production',
overwrite: true,
})
if (!isDev && isClient) {
config.devtool = '#source-map'
config.plugins.push(
new BugsnagSourceMapUploaderPlugin({
apiKey: 'c1e2241fdaa9785ed9f9288526498ae4',
appVersion: process.env.RELEASE,
releaseStage: 'production',
overwrite: true,
})
)
}

6️⃣ Éviter les sourcemaps lisibles en production

"generate": "RELEASE=$(git rev-parse HEAD) nuxt generate && rm dist/**/*.map"

⏭ Résumé


⤴️ Aller plus loin ?

nicooprat

Myself

Nico Prat

Written by

Nico Prat

Développeur & designer front-end. Freelance & fondateur de @globetrotterio

nicooprat

nicooprat

Myself