Suppress logging with NODE_ENV (#332)

3 years ago · 07b0714837
parent cddfdc7081
commit 07b0714837
14 changed files with 100 additions and 58 deletions
--- a/.github/workflows/do-spaces-workflow.yml
+++ b/.github/workflows/do-spaces-workflow.yml
@ -28,6 +28,8 @@ jobs:

      - name: Build tool
        run: npm run build
+        env:
+          NODE_ENV: production

      - name: Deploy commit to DigitalOcean Spaces
        run: aws s3 sync ./dist s3://${{ secrets.SPACES_BUCKET }}/commits/nginxconfig/${{ github.sha }} --endpoint=https://${{ secrets.SPACES_REGION }}.digitaloceanspaces.com --acl public-read --content-encoding utf8
--- a/.github/workflows/gh-pages-workflow.yml
+++ b/.github/workflows/gh-pages-workflow.yml
@ -34,6 +34,8 @@ jobs:

      - name: Build tool
        run: npm run build
+        env:
+          NODE_ENV: production

      - name: Deploy master to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@2.0.0
--- a/package-lock.json
+++ b/package-lock.json
@ -50,6 +50,7 @@
        "stylelint-config-standard-scss": "^3.0.0",
        "stylelint-order": "^5.0.0",
        "vue-template-compiler": "^2.6.14",
+        "webpack": "^5.69.1",
        "webpack-bundle-analyzer": "^4.5.0"
      },
      "engines": {
@ -6219,27 +6220,27 @@
      }
    },
    "node_modules/@types/eslint": {
-      "version": "7.2.10",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.10.tgz",
-      "integrity": "sha512-kUEPnMKrqbtpCq/KTaGFFKAcz6Ethm2EjCoKIDaCmfRBWLbFuTcOJfTlorwbnboXBzahqWLgUp1BQeKHiJzPUQ==",
+      "version": "8.4.1",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.1.tgz",
+      "integrity": "sha512-GE44+DNEyxxh2Kc6ro/VkIj+9ma0pO0bwv9+uHSyBrikYOHr8zYcdPvnBOp1aw8s+CjRvuSx7CyWqRrNFQ59mA==",
      "dependencies": {
        "@types/estree": "*",
        "@types/json-schema": "*"
      }
    },
    "node_modules/@types/eslint-scope": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.0.tgz",
-      "integrity": "sha512-O/ql2+rrCUe2W2rs7wMR+GqPRcgB6UiqN5RhrR5xruFlY7l9YLMn0ZkDzjoHLeiFkR8MCQZVudUuuvQ2BLC9Qw==",
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.3.tgz",
+      "integrity": "sha512-PB3ldyrcnAicT35TWPs5IcwKD8S333HMaa2VVv4+wdvebJkjWuW/xESoB8IwRcog8HYVYamb1g/R31Qv5Bx03g==",
      "dependencies": {
        "@types/eslint": "*",
        "@types/estree": "*"
      }
    },
    "node_modules/@types/estree": {
-      "version": "0.0.47",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.47.tgz",
-      "integrity": "sha512-c5ciR06jK8u9BstrmJyO97m+klJrrhCf9u3rLu3DEAJBirxRqSCvDQoYKmxuYwQI5SZChAWu+tq9oVlGRuzPAg=="
+      "version": "0.0.51",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
+      "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ=="
    },
    "node_modules/@types/express": {
      "version": "4.17.11",
@ -21297,12 +21298,12 @@
      }
    },
    "node_modules/webpack": {
-      "version": "5.68.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.68.0.tgz",
-      "integrity": "sha512-zUcqaUO0772UuuW2bzaES2Zjlm/y3kRBQDVFVCge+s2Y8mwuUTdperGaAv65/NtRL/1zanpSJOq/MD8u61vo6g==",
+      "version": "5.69.1",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.69.1.tgz",
+      "integrity": "sha512-+VyvOSJXZMT2V5vLzOnDuMz5GxEqLk7hKWQ56YxPW/PQRUuKimPqmEIJOx8jHYeyo65pKbapbW464mvsKbaj4A==",
      "dependencies": {
-        "@types/eslint-scope": "^3.7.0",
-        "@types/estree": "^0.0.50",
+        "@types/eslint-scope": "^3.7.3",
+        "@types/estree": "^0.0.51",
        "@webassemblyjs/ast": "1.11.1",
        "@webassemblyjs/wasm-edit": "1.11.1",
        "@webassemblyjs/wasm-parser": "1.11.1",
@ -21711,11 +21712,6 @@
      "integrity": "sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==",
      "dev": true
    },
-    "node_modules/webpack/node_modules/@types/estree": {
-      "version": "0.0.50",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz",
-      "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw=="
-    },
    "node_modules/webpack/node_modules/acorn": {
      "version": "8.7.0",
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
@ -26874,27 +26870,27 @@
      }
    },
    "@types/eslint": {
-      "version": "7.2.10",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.10.tgz",
-      "integrity": "sha512-kUEPnMKrqbtpCq/KTaGFFKAcz6Ethm2EjCoKIDaCmfRBWLbFuTcOJfTlorwbnboXBzahqWLgUp1BQeKHiJzPUQ==",
+      "version": "8.4.1",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.1.tgz",
+      "integrity": "sha512-GE44+DNEyxxh2Kc6ro/VkIj+9ma0pO0bwv9+uHSyBrikYOHr8zYcdPvnBOp1aw8s+CjRvuSx7CyWqRrNFQ59mA==",
      "requires": {
        "@types/estree": "*",
        "@types/json-schema": "*"
      }
    },
    "@types/eslint-scope": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.0.tgz",
-      "integrity": "sha512-O/ql2+rrCUe2W2rs7wMR+GqPRcgB6UiqN5RhrR5xruFlY7l9YLMn0ZkDzjoHLeiFkR8MCQZVudUuuvQ2BLC9Qw==",
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.3.tgz",
+      "integrity": "sha512-PB3ldyrcnAicT35TWPs5IcwKD8S333HMaa2VVv4+wdvebJkjWuW/xESoB8IwRcog8HYVYamb1g/R31Qv5Bx03g==",
      "requires": {
        "@types/eslint": "*",
        "@types/estree": "*"
      }
    },
    "@types/estree": {
-      "version": "0.0.47",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.47.tgz",
-      "integrity": "sha512-c5ciR06jK8u9BstrmJyO97m+klJrrhCf9u3rLu3DEAJBirxRqSCvDQoYKmxuYwQI5SZChAWu+tq9oVlGRuzPAg=="
+      "version": "0.0.51",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
+      "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ=="
    },
    "@types/express": {
      "version": "4.17.11",
@ -27151,7 +27147,7 @@
        "launch-editor-middleware": "^2.2.1",
        "lodash.defaultsdeep": "^4.6.1",
        "lodash.mapvalues": "^4.6.0",
-        "mini-css-extract-plugin": "~2.4.3",
+        "mini-css-extract-plugin": "^1.6.2",
        "minimist": "^1.2.5",
        "module-alias": "^2.2.2",
        "portfinder": "^1.0.26",
@ -38141,12 +38137,12 @@
      "dev": true
    },
    "webpack": {
-      "version": "5.68.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.68.0.tgz",
-      "integrity": "sha512-zUcqaUO0772UuuW2bzaES2Zjlm/y3kRBQDVFVCge+s2Y8mwuUTdperGaAv65/NtRL/1zanpSJOq/MD8u61vo6g==",
+      "version": "5.69.1",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.69.1.tgz",
+      "integrity": "sha512-+VyvOSJXZMT2V5vLzOnDuMz5GxEqLk7hKWQ56YxPW/PQRUuKimPqmEIJOx8jHYeyo65pKbapbW464mvsKbaj4A==",
      "requires": {
-        "@types/eslint-scope": "^3.7.0",
-        "@types/estree": "^0.0.50",
+        "@types/eslint-scope": "^3.7.3",
+        "@types/estree": "^0.0.51",
        "@webassemblyjs/ast": "1.11.1",
        "@webassemblyjs/wasm-edit": "1.11.1",
        "@webassemblyjs/wasm-parser": "1.11.1",
@ -38171,11 +38167,6 @@
        "webpack-sources": "^3.2.3"
      },
      "dependencies": {
-        "@types/estree": {
-          "version": "0.0.50",
-          "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz",
-          "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw=="
-        },
        "acorn": {
          "version": "8.7.0",
          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
--- a/package.json
+++ b/package.json
@ -85,6 +85,7 @@
    "stylelint-config-standard-scss": "^3.0.0",
    "stylelint-order": "^5.0.0",
    "vue-template-compiler": "^2.6.14",
+    "webpack": "^5.69.1",
    "webpack-bundle-analyzer": "^4.5.0"
  },
  "overrides": {
--- a/src/nginxconfig/build/webpack-dynamic-import.js
+++ b/src/nginxconfig/build/webpack-dynamic-import.js
@ -1,5 +1,5 @@
 /*
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -24,8 +24,10 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */

+import { info } from '../util/log';
+
 const originalSrcDir = document.currentScript.src.split('/').slice(0, -2).join('/') + '/';
 window.__webpackDynamicImportURL = () => {
-    console.info(`Using ${originalSrcDir} for webpack dynamic import`);
+    info(`Using ${originalSrcDir} for webpack dynamic import`);
    return originalSrcDir;
 };
--- a/src/nginxconfig/templates/app.vue
+++ b/src/nginxconfig/templates/app.vue
@ -134,6 +134,7 @@ THE SOFTWARE.
    import analytics from '../util/analytics';
    import browserLanguage from '../util/browser_language';
    import { defaultPack, availablePacks } from '../util/language_packs';
+    import { info, error } from '../util/log';

    import { setLanguagePack } from '../i18n/setup';
    import generators from '../generators';
@ -243,7 +244,7 @@ THE SOFTWARE.
                    // Update the locale
                    setLanguagePack(data.computed).then(() => {
                        // Done
-                        console.log('Language set to', data.computed);
+                        info('Language set to', data.computed);
                        this.$data.languagePrevious = data.computed;
                        this.$data.languageLoading = false;

@ -251,8 +252,7 @@ THE SOFTWARE.
                        this.languageSetEvent(!interactive);
                    }).catch((err) => {
                        // Error
-                        console.log('Failed to set language to', data.computed);
-                        console.error(err);
+                        error(`Failed to set language to ${data.computed}`, err);

                        // Fallback to last known good
                        data.value = this.$data.languagePrevious;
@ -358,9 +358,9 @@ THE SOFTWARE.
                            file,
                        ];
                    });
-                } catch (e) {
+                } catch (err) {
                    // If diff generation goes wrong, don't show any diff
-                    console.error(e);
+                    error('Failed to compute and highlight diff', err);
                    this.$data.confFilesOutput = Object.entries(newConf).map(([ name, content ]) => {
                        const safeName = escape(name);
                        const safeContent = escape(content);
--- a/src/nginxconfig/templates/prism/bash.vue
+++ b/src/nginxconfig/templates/prism/bash.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -31,13 +31,15 @@ THE SOFTWARE.
 </template>

 <script>
+    import { info } from '../../util/log';
+
    export default {
        name: 'BashPrism',
        props: {
            cmd: String,
        },
        mounted() {
-            console.info(`Highlighting ${this.$props.cmd}...`);
+            info(`Highlighting ${this.$props.cmd}...`);
            window.Prism.highlightAllUnder(this.$el);
        },
        methods: {
--- a/src/nginxconfig/templates/prism/docker.vue
+++ b/src/nginxconfig/templates/prism/docker.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -33,6 +33,7 @@ THE SOFTWARE.

 <script>
    import 'prismjs/components/prism-docker';
+    import { info } from '../../util/log';

    export default {
        name: 'DockerPrism',
@ -42,7 +43,7 @@ THE SOFTWARE.
            half: Boolean,
        },
        mounted() {
-            console.info(`Highlighting ${this.$props.name}...`);
+            info(`Highlighting ${this.$props.name}...`);
            window.Prism.highlightAllUnder(this.$el);
        },
        methods: {
--- a/src/nginxconfig/templates/prism/nginx.vue
+++ b/src/nginxconfig/templates/prism/nginx.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -32,6 +32,8 @@ THE SOFTWARE.
 </template>

 <script>
+    import { info } from '../../util/log';
+
    export default {
        name: 'NginxPrism',
        props: {
@ -40,7 +42,7 @@ THE SOFTWARE.
            half: Boolean,
        },
        mounted() {
-            console.info(`Highlighting ${this.$props.name}...`);
+            info(`Highlighting ${this.$props.name}...`);
            window.Prism.highlightAllUnder(this.$el);
        },
        methods: {
--- a/src/nginxconfig/templates/prism/yaml.vue
+++ b/src/nginxconfig/templates/prism/yaml.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -33,6 +33,7 @@ THE SOFTWARE.

 <script>
    import 'prismjs/components/prism-yaml';
+    import { info } from '../../util/log';

    export default {
        name: 'YamlPrism',
@ -42,7 +43,7 @@ THE SOFTWARE.
            half: Boolean,
        },
        mounted() {
-            console.info(`Highlighting ${this.$props.name}...`);
+            info(`Highlighting ${this.$props.name}...`);
            window.Prism.highlightAllUnder(this.$el);
        },
        methods: {
--- a/src/nginxconfig/util/analytics.js
+++ b/src/nginxconfig/util/analytics.js
@ -1,5 +1,5 @@
 /*
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -24,8 +24,10 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */

+import { info } from './log';
+
 export default ({ category, action, label, value, nonInteraction }) => {
-    console.info('Analytics event:', { category, action, label, value, nonInteraction });
+    info('Analytics event:', { category, action, label, value, nonInteraction });

    /*try {
        // Google Analytics
--- a/src/nginxconfig/util/log.js
+++ b/src/nginxconfig/util/log.js
@ -0,0 +1,31 @@
+/*
+Copyright 2022 DigitalOcean
+
+This code is licensed under the MIT License.
+You may obtain a copy of the License at
+https://github.com/digitalocean/nginxconfig.io/blob/master/LICENSE or https://mit-license.org/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions :
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+export const info = process.env.NODE_ENV !== 'production' ? console.info.bind(console) : () => {};
+export const log = process.env.NODE_ENV !== 'production' ? console.log.bind(console) : () => {};
+
+export const warn = console.warn.bind(console);
+export const error = console.error.bind(console);
--- a/src/nginxconfig/util/prism_bundle.js
+++ b/src/nginxconfig/util/prism_bundle.js
@ -1,5 +1,5 @@
 /*
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -32,10 +32,12 @@ import 'prismjs/plugins/keep-markup/prism-keep-markup';
 import 'prismjs/plugins/toolbar/prism-toolbar';
 import 'prismjs/plugins/toolbar/prism-toolbar.css';

+import { warn } from './log';
+
 // Custom copy to clipboard (based on the Prism one)
 const copyToClipboard = () => {
    if (!Prism.plugins.toolbar) {
-        console.warn('Copy to Clipboard loaded before Toolbar.');
+        warn('Copy to Clipboard loaded before Toolbar.');
        return;
    }

--- a/vue.config.js
+++ b/vue.config.js
@ -24,6 +24,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */

+import webpack from 'webpack';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import DuplicatePackageCheckerPlugin from 'duplicate-package-checker-webpack-plugin';
 import WebpackRequireFrom from 'webpack-require-from';
@ -47,6 +48,8 @@ export default {
                );
            } },
            new WebpackRequireFrom({ methodName: '__webpackDynamicImportURL', suppressErrors: true }),
+            // Pass the env in for logging
+            new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }),
            // Analyze the bundle
            new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false }),
            new DuplicatePackageCheckerPlugin(),