Fix error logging

.drone.yml

@@ -8,6 +8,9 @@ steps:
         volumes:
             -   name: build-dir
                 path: /build
+        environment:
+          VUE_APP_ERRBIT_PROJECT_KEY:
+            from_secret: errbit_key
         commands:
             - npm install
             - npm run build

README.md

@@ -23,6 +23,13 @@ them into the directory `web/skins/laika` in the Fundraising Application
 directory. You can ignore or delete the generated HTML files, they are an
 unused byproduct of the build process.
 
+By default, the production build will send errors to our error collection
+service. When building for production, you must provide the API key for
+the service in the environment variable `VUE_APP_ERRBIT_PROJECT_KEY`. Our
+CI/CD system does this automatically, if you're building locally, you can
+run the command like this:
+
+	VUE_APP_ERRBIT_PROJECT_KEY=<INSERT_KEY_HERE> npm run build
 
 ## Where to put images and fonts and how to reference them
 Put all images, fonts and other non-bundled resources into subdirectories

src/createVueApp.ts

@@ -12,12 +12,14 @@ export function createVueApp( rootComponent: Component, messages: Messages, root
 	} );
 	app.use( i18n );
 
-	app.config.errorHandler = ( err, vm, info ) => {
-		createLogger().notify( {
-			error: err,
-			params: { info: info },
-		} );
-	};
+	if ( process.env.NODE_ENV === 'production' ) {
+		app.config.errorHandler = ( err, vm, info ) => {
+			createLogger().notify( {
+				error: err,
+				params: { info: info },
+			} );
+		};
+	}
 
 	return app;
 }

src/logger.ts

@@ -1,7 +1,6 @@
 import { Notifier } from '@airbrake/browser';
 
 const LOGGER_ERRBIT: string = 'errbit';
-const LOGGER_CONSOLE: string = 'console';
 
 interface Logger {
 	notify( error: object ): void
@@ -28,18 +27,17 @@ class SilentLogger implements Logger {
 	notify( error: object ) {} /* eslint-disable-line @typescript-eslint/no-unused-vars */
 }
 
-class ConsoleLogger implements Logger {
-	notify( error: object ) {
-		// eslint-disable-next-line
-		console.log( error );
-	}
-}
-
-// TODO: See if there's an alternative to using process.env here
+/**
+ * Factory function to create a logger based on the VUE_APP_LOGGER environment variable.
+ * The only supported value currently is 'errbit'. In the future we might re-introduce
+ * a 'console' logger (see Git commit history of this file).
+ *
+ * When using Webpack >=5, the variable needs to be defined in webpack configuration
+ * using the DefinePlugin ('process.env.VUE_APP_LOGGER': JSON.stringify( 'errbit' ))
+ * or the EnvironmentPlugin ({'VUE_APP_LOGGER': 'errbit'}).
+ */
 export default function createLogger(): Logger {
-	switch ( process.env.VUE_APP_LOGGER ) {
-		case LOGGER_CONSOLE:
-			return new ConsoleLogger();
+	switch ( process?.env?.VUE_APP_LOGGER ) {
 		case LOGGER_ERRBIT:
 			return new ErrbitLogger(
 				process.env.VUE_APP_ERRBIT_HOST || '',

webpack/env/prod.env.js

@@ -1,3 +1,8 @@
 module.exports = {
 	NODE_ENV: 'production',
+	VUE_APP_LOGGER: 'errbit',
+	VUE_APP_ERRBIT_HOST: process.env.VUE_APP_ERRBIT_HOST || 'https://logging.wikimedia.de',
+	// should be set in the CI/CD pipeline or when running locally
+	// e.g. "VUE_APP_ERRBIT_PROJECT_KEY=1234567890abcdef npm run build"
+	VUE_APP_ERRBIT_PROJECT_KEY: process.env.VUE_APP_ERRBIT_PROJECT_KEY || '',
 };

webpack/webpack.config.common.js

@@ -1,5 +1,4 @@
 'use strict';
-const webpack = require( 'webpack' );
 const ForkTsCheckerWebpackPlugin = require( 'fork-ts-checker-webpack-plugin' );
 const { VueLoaderPlugin } = require( 'vue-loader' );
 const MiniCSSExtractPlugin = require( 'mini-css-extract-plugin' );
@@ -115,9 +114,6 @@ const webpackConfig = {
 				},
 			},
 		} ),
-		new webpack.ProvidePlugin( {
-			process: 'process/browser',
-		} ),
 	],
 };