Laravel Mix

How to configure vue-bugsnag in Laravel Mix

Note: I assume you have installed Laravel Mix already.

Install this package

# npm
npm install vue-bugsnag --save

# Yarn
yarn add vue-bugsnag

Create the resources/assets/js/bugsnag.js file

import Bugsnag from 'bugsnag-js';

// Bugsnag error reporting service configs
Bugsnag.apiKey = process.env.MIX_BUGSNAG_API_KEY;
Bugsnag.releaseStage = process.env.MIX_APP_ENV;
Bugsnag.notifyReleaseStages = process.env.MIX_BUGSNAG_NOTIFY_RELEASE_STAGES.split(',');

// Hook into Vue.js
import Vue from 'vue';
import VueBugsnag from 'vue-bugsnag';
Vue.use(VueBugsnag);

Conditionally require above module in resources/assets/js/bootstrap.js

// Yes, we are comparing against a string
if (process.env.MIX_BUGSNAG_JS_ENABLE === 'true') {
  require('./bugsnag');
}

Edit your .env and .env.example file

# Bugsnag Error Reporting 
# https://docs.bugsnag.com/platforms/php/laravel
BUGSNAG_API_KEY=YOUR-API-KEY-GOES-HERE
BUGSNAG_NOTIFY_RELEASE_STAGES=staging,production
# Bugsnag js
# https://docs.bugsnag.com/platforms/browsers/
MIX_BUGSNAG_JS_ENABLE=true
MIX_BUGSNAG_API_KEY=${BUGSNAG_API_KEY}
MIX_BUGSNAG_NOTIFY_RELEASE_STAGES=${BUGSNAG_NOTIFY_RELEASE_STAGES}
MIX_APP_ENV=${APP_ENV}

Update your bugsnag key in above config.

Build

npm run dev

Tip: extract bugsnag to vendor.js

// webpack.mix.js
mix.extract(['vue-bugsnag'])

How this works?

• We are exposing some variables in our js
• We are conditionally including the bugsnag by checking those variables
• You should set MIX_BUGSNAG_JS_ENABLE to false in development