maxmilton/asynchronous-sentry-js-error-tracking.html

## asynchronous-sentry-js-error-tracking.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Asynchronous Sentry JavaScript Error Tracking</title>

  <!-- putting your CSS near the top is always a good idea -->
  <link rel="stylesheet" href="/app.css"></link>

  <!--
    load raven.js asynchronously

    NOTE: crossorigin is recommended on any external scripts so you can capture
    errors they throw correctly and to prevent sending credentials when fetching.
  -->
  <script async src="https://cdn.ravenjs.com/3.22.0/raven.min.js" crossorigin id="raven"></script>

  <!--
    resolve sentry.io DNS and do TLS+TCP handshakes so the first request is faster

    NOTE: If you're using the self-hosted version of Sentry then replace this URL
    with your sentry endpoint.
  -->
  <link rel="preconnect" href="https://sentry.io">
</head>
<body>
  <div id="app"></div>

  <!-- Javascript error tracking with Sentry -->
  <script>
    /* global Raven *//* eslint-disable func-names, strict, no-param-reassign, no-multi-assign, prefer-arrow-callback */
    (function (window, queue, loaded, script) {
      'use strict';

      /**
       * Optionally expose the loaded state and error queue globally to push
       * errors from your app.
       */
      // window.sentry.loaded = loaded;
      // window.sentry.queue = queue;

      // capture and store any errors before raven.js is loaded
      window.onerror = function e(message, file, lineNo, columnNo, error) {
        if (loaded) return;
        queue.push([message, file, lineNo, columnNo, error]);
      };

      /**
       * raven.js doesn't capture unhandled Promise rejections by default due
       * to limited compatibility; only Chrome 49+ and some promise libraries
       * (e.g. core-js, bluebird) are known to trigger this event.
       */
      window.onunhandledrejection = function e(error) {
        if (loaded) return;
        queue.push([
          error.reason.reason || error.reason.message,
          error.type,
          JSON.stringify(error.reason),
        ]);
      };

      /**
       * Optionally also track handled Promise rejections (useful for development
       * or testing environments). Replace the above onunhandledrejection with:
       */
      // window.onunhandledrejection = window.onunhandledrejection =
      //   function e(error) {
      //     if (loaded) return;
      //     queue.push([
      //       error.reason.reason || error.reason.message,
      //       error.type,
      //       JSON.stringify(error.reason),
      //     ]);
      //   };

      // once raven.js is loaded then install
      script.onreadystatechange = script.onload = function () {
        if (loaded) return;
        loaded = true;

        Raven.config('___PUBLIC_DSN___', {
          environment: '<%= process.env.NODE_ENV %>', // if the page is a lodash template then the value is injected
          release: '<%= process.env.APP_RELEASE %>', // same as above, these are just an example
          tags: { app: 'example' },
        }).install();

        // same compatibility caveats as the above Promise error events
        window.onunhandledrejection = function e(error) {
          Raven.captureException(new Error(error.reason.reason || error.reason.message), {
            extra: {
              type: error.type,
              reason: JSON.stringify(error.reason),
            },
          });
        };
        /** Alternatively also track handled Promise rejections: */
        // window.onrejectionhandled = window.onunhandledrejection =
        //   function e(error) {
        //     Raven.captureException(new Error(error.reason.reason || error.reason.message), {
        //       extra: {
        //         type: error.type,
        //         reason: JSON.stringify(error.reason),
        //       },
        //     });
        //   };

        // report any previously stored errors
        queue.forEach(function (error) {
          /**
           *  error[0] = message
           *  error[1] = file, url, or type
           *  error[2] = line number or event
           *  error[3] = column number (old browsers may not emit this)
           *  error[4] = Error Object (old browsers may not emit this either!)
           */
          Raven.captureException(error[4] || new Error(error[0]), {
            extra: {
              file: error[1],
              line: error[2],
              col: error[3],
            },
          });
        });
      };
    }(window, [], false, document.getElementById('raven')));
  </script>

  <!-- your JavaScript should come after the above code so we can its track errors -->
  <script src="/vendor.js"></script>
  <script src="/app.js"></script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">

	<title>Asynchronous Sentry JavaScript Error Tracking</title>

	<!-- putting your CSS near the top is always a good idea -->
	<link rel="stylesheet" href="/app.css"></link>

	<!--
	load raven.js asynchronously

	NOTE: crossorigin is recommended on any external scripts so you can capture
	errors they throw correctly and to prevent sending credentials when fetching.
	-->
	<script async src="https://cdn.ravenjs.com/3.22.0/raven.min.js" crossorigin id="raven"></script>

	<!--
	resolve sentry.io DNS and do TLS+TCP handshakes so the first request is faster

	NOTE: If you're using the self-hosted version of Sentry then replace this URL
	with your sentry endpoint.
	-->
	<link rel="preconnect" href="https://sentry.io">
	</head>
	<body>
	<div id="app"></div>

	<!-- Javascript error tracking with Sentry -->
	<script>
	/* global Raven // eslint-disable func-names, strict, no-param-reassign, no-multi-assign, prefer-arrow-callback */
	(function (window, queue, loaded, script) {
	'use strict';

	/**
	* Optionally expose the loaded state and error queue globally to push
	* errors from your app.
	*/
	// window.sentry.loaded = loaded;
	// window.sentry.queue = queue;

	// capture and store any errors before raven.js is loaded
	window.onerror = function e(message, file, lineNo, columnNo, error) {
	if (loaded) return;
	queue.push([message, file, lineNo, columnNo, error]);
	};

	/**
	* raven.js doesn't capture unhandled Promise rejections by default due
	* to limited compatibility; only Chrome 49+ and some promise libraries
	* (e.g. core-js, bluebird) are known to trigger this event.
	*/
	window.onunhandledrejection = function e(error) {
	if (loaded) return;
	queue.push([
	error.reason.reason \|\| error.reason.message,
	error.type,
	JSON.stringify(error.reason),
	]);
	};

	/**
	* Optionally also track handled Promise rejections (useful for development
	* or testing environments). Replace the above onunhandledrejection with:
	*/
	// window.onunhandledrejection = window.onunhandledrejection =
	// function e(error) {
	// if (loaded) return;
	// queue.push([
	// error.reason.reason \|\| error.reason.message,
	// error.type,
	// JSON.stringify(error.reason),
	// ]);
	// };

	// once raven.js is loaded then install
	script.onreadystatechange = script.onload = function () {
	if (loaded) return;
	loaded = true;

	Raven.config('___PUBLIC_DSN___', {
	environment: '<%= process.env.NODE_ENV %>', // if the page is a lodash template then the value is injected
	release: '<%= process.env.APP_RELEASE %>', // same as above, these are just an example
	tags: { app: 'example' },
	}).install();

	// same compatibility caveats as the above Promise error events
	window.onunhandledrejection = function e(error) {
	Raven.captureException(new Error(error.reason.reason \|\| error.reason.message), {
	extra: {
	type: error.type,
	reason: JSON.stringify(error.reason),
	},
	});
	};
	/** Alternatively also track handled Promise rejections: */
	// window.onrejectionhandled = window.onunhandledrejection =
	// function e(error) {
	// Raven.captureException(new Error(error.reason.reason \|\| error.reason.message), {
	// extra: {
	// type: error.type,
	// reason: JSON.stringify(error.reason),
	// },
	// });
	// };

	// report any previously stored errors
	queue.forEach(function (error) {
	/**
	* error[0] = message
	* error[1] = file, url, or type
	* error[2] = line number or event
	* error[3] = column number (old browsers may not emit this)
	* error[4] = Error Object (old browsers may not emit this either!)
	*/
	Raven.captureException(error[4] \|\| new Error(error[0]), {
	extra: {
	file: error[1],
	line: error[2],
	col: error[3],
	},
	});
	});
	};
	}(window, [], false, document.getElementById('raven')));
	</script>

	<!-- your JavaScript should come after the above code so we can its track errors -->
	<script src="/vendor.js"></script>
	<script src="/app.js"></script>
	</body>
	</html>