From 92917453a78c06eb00ba4b3ff55e09158919e275 Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Wed, 11 Apr 2018 20:48:02 -0400
Subject: [PATCH] Add settings for controlling the error reporting system. Fix
 issues with destroying rooms and users. Fix the control center not being
 available on certain pages. Fix the host menu appearing when you aren't
 logged in. Clean up some old CSS.

---
 changelog.html                                |   8 +
 src/main.js                                   |   2 +-
 src/modules/chat/room.js                      |  33 ++--
 src/modules/chat/tokenizers.jsx               |   2 +-
 src/modules/chat/user.js                      |  18 +-
 .../main_menu/components/example-report.vue   |  58 ++++++
 src/modules/main_menu/index.js                |  20 +-
 src/raven.js                                  | 185 +++++++++++++-----
 .../modules/directory/following.jsx           |  14 +-
 .../twitch-twilight/modules/host_button.js    |  18 +-
 .../twitch-twilight/modules/menu_button.jsx   |   2 +
 styles/icons.scss                             |  18 --
 12 files changed, 272 insertions(+), 106 deletions(-)
 create mode 100644 src/modules/main_menu/components/example-report.vue

diff --git a/changelog.html b/changelog.html
index c67c94f2..d4b2bd3c 100644
--- a/changelog.html
+++ b/changelog.html
@@ -1,3 +1,11 @@
+<div class="list-header">4.0.0-beta2.11<span>@850fac83181587018cdb</span> <time datetime="2018-04-11">(2018-04-11)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Settings for controlling what data the error reporter sends, as well as an option to turn it off and an example of what data is sent.</li>
+	<li>Fixed: The FFZ Control Center not opening on certain pages. (The new sub page, specifically.)</li>
+	<li>Fixed: An issue parsing metadata when streams returned from the live streams query are null.</li>
+	<li>Fixed: The Host menu being visible when not logged in.</li>
+</ul>
+
 <div class="list-header">4.0.0-beta2.9<span>@665575cf426293ec11da</span> <time datetime="2018-04-11">(2018-04-11)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Changed: Allow clicking on a rich chat embed even if it fails to load.</li>
diff --git a/src/main.js b/src/main.js
index 62f0c014..3d5d20f6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -100,7 +100,7 @@ class FrankerFaceZ extends Module {
 FrankerFaceZ.Logger = Logger;
 
 const VER = FrankerFaceZ.version_info = {
-	major: 4, minor: 0, revision: 0, extra: '-beta2.9',
+	major: 4, minor: 0, revision: 0, extra: '-beta2.11',
 	build: __webpack_hash__,
 	toString: () =>
 		`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}`
diff --git a/src/modules/chat/room.js b/src/modules/chat/room.js
index f86f1180..40fdbf3a 100644
--- a/src/modules/chat/room.js
+++ b/src/modules/chat/room.js
@@ -43,26 +43,33 @@ export default class Room {
 
 		this.manager.emit(':room-remove', this);
 
-		this.style.destroy();
-
-		for(const user of Object.values(this.user_ids)) {
-			if ( user )
-				user.destroy();
+		if ( this.users ) {
+			for(const user of Object.values(this.users))
+				if ( user )
+					user.destroy();
 		}
 
-		for(const user of Object.values(this.users)) {
-			if ( user )
-				user.destroy();
+		if ( this.user_ids ) {
+			for(const user of Object.values(this.user_ids))
+				if ( user )
+					user.destroy();
 		}
 
-		for(const set_id of this.emote_sets._cache)
-			this.manager.emotes.unrefSet(set_id);
-
-		this.emote_sets = null;
-		this.style = null;
 		this.users = null;
 		this.user_ids = null;
 
+		if ( this.style ) {
+			this.style.destroy();
+			this.style = null;
+		}
+
+		if ( this.emote_sets ) {
+			for(const set_id of this.emote_sets._cache)
+				this.manager.emotes.unrefSet(set_id);
+
+			this.emote_sets = null;
+		}
+
 		if ( this._login ) {
 			if ( this.manager.rooms[this._login] === this )
 				this.manager.rooms[this._login] = null;
diff --git a/src/modules/chat/tokenizers.jsx b/src/modules/chat/tokenizers.jsx
index f0f8321f..7970f8e7 100644
--- a/src/modules/chat/tokenizers.jsx
+++ b/src/modules/chat/tokenizers.jsx
@@ -12,7 +12,7 @@ import {TWITCH_EMOTE_BASE, REPLACEMENT_BASE, REPLACEMENTS} from 'utilities/const
 
 const EMOTE_CLASS = 'chat-line__message--emote',
 	LINK_REGEX = /([^\w@#%\-+=:~])?((?:(https?:\/\/)?(?:[\w@#%\-+=:~]+\.)+[a-z]{2,6}(?:\/[\w./@#%&()\-+=:?~]*)?))([^\w./@#%&()\-+=:?~]|\s|$)/g,
-	MENTION_REGEX = /([^\w@#%\-+=:~])?(@([^\u0000-\u007F]+|\w+)+)([^\w./@#%&()\-+=:?~]|\s|$)/g;
+	MENTION_REGEX = /([^\w@#%\-+=:~])?(@([^\u0000-\u007F]+|\w+)+)([^\w./@#%&()\-+=:?~]|\s|$)/g; // eslint-disable-line no-control-regex
 
 
 // ============================================================================
diff --git a/src/modules/chat/user.js b/src/modules/chat/user.js
index fed2da9b..87b2e32b 100644
--- a/src/modules/chat/user.js
+++ b/src/modules/chat/user.js
@@ -24,18 +24,22 @@ export default class User {
 	destroy() {
 		this.destroyed = true;
 
-		for(const set_id of this.emote_sets._cache)
-			this.manager.emotes.unrefSet(set_id);
+		if ( this.emote_sets ) {
+			for(const set_id of this.emote_sets._cache)
+				this.manager.emotes.unrefSet(set_id);
 
-		this.emote_sets = null;
+			this.emote_sets = null;
+		}
 
 		const parent = this.room || this.manager;
 
-		if ( this._login && parent.users[this._login] === this )
-			parent.users[this._login] = null;
+		if ( parent ) {
+			if ( this._login && parent.users && parent.users[this._login] === this )
+				parent.users[this._login] = null;
 
-		if ( parent.user_ids[this._id] === this )
-			parent.user_ids[this._id] = null;
+			if ( parent.user_ids && parent.user_ids[this._id] === this )
+				parent.user_ids[this._id] = null;
+		}
 	}
 
 	get id() {
diff --git a/src/modules/main_menu/components/example-report.vue b/src/modules/main_menu/components/example-report.vue
new file mode 100644
index 00000000..391f51d7
--- /dev/null
+++ b/src/modules/main_menu/components/example-report.vue
@@ -0,0 +1,58 @@
+<template lang="html">
+	<div class="ffz--example-report">
+		<h4 class="tw-mg-b-05">{{ t('reports.example', 'Example Report') }}</h4>
+		<div class="tw-c-background-alt-2 tw-font-size-5 tw-pd-y-05 tw-pd-x-1 tw-border-radius-large">
+			<code>{{ JSON.stringify(example, null, 4) }}</code>
+		</div>
+	</div>
+</template>
+
+<script>
+
+export default {
+	props: ['item', 'context'],
+
+	data() {
+		return {
+			example: null
+		}
+	},
+
+	created() {
+		this.refresh();
+
+		const ctx = this.context.context;
+		for(const key of this.item.watch)
+			ctx.on(`changed:${key}`, this.refresh, this);
+	},
+
+	destroyed() {
+		const ctx = this.context.context;
+		for(const key of this.item.watch)
+			ctx.off(`changed:${key}`, this.refresh, this);
+	},
+
+	methods: {
+		refresh() {
+			this.example = 'Loading...';
+			this.item.data().then(data => this.example = data);
+		}
+	}
+}
+
+</script>
+
+<style lang="scss" scoped>
+.ffz--example-report {
+	div {
+		max-height: 30rem;
+		overflow-y: auto;
+
+		code {
+			font-family: monospace;
+			white-space: pre-wrap;
+			word-break: break-all;
+		}
+	}
+}
+</style>
diff --git a/src/modules/main_menu/index.js b/src/modules/main_menu/index.js
index 3fe5f899..e1f28b03 100644
--- a/src/modules/main_menu/index.js
+++ b/src/modules/main_menu/index.js
@@ -10,7 +10,9 @@ import {has, deep_copy} from 'utilities/object';
 
 import {parse_path} from 'src/settings';
 
-const EXCLUSIVE_CONTAINER = '.twilight-main,.twilight-minimal-root>div';
+const EXCLUSIVE_SELECTOR = '.twilight-main,.twilight-minimal-root>div',
+	MAXIMIZED_SELECTOR = '.twilight-main,.twilight-minimal-root',
+	SELECTOR = '.twilight-root>.tw-full-height,.twilight-minimal-root>.tw-full-height';
 
 function format_term(term) {
 	return term.replace(/<[^>]*>/g, '').toLocaleLowerCase();
@@ -97,7 +99,7 @@ export default class MainMenu extends Module {
 
 
 	async onEnable(event) {
-		await this.site.awaitElement(EXCLUSIVE_CONTAINER);
+		await this.site.awaitElement(EXCLUSIVE_SELECTOR);
 
 		this.on('site.menu_button:clicked', this.toggleVisible);
 		if ( this._visible ) {
@@ -115,13 +117,23 @@ export default class MainMenu extends Module {
 		this.off('site.menu_button:clicked', this.toggleVisible);
 	}
 
+	getContainer() {
+		if ( this.exclusive )
+			return document.querySelector(EXCLUSIVE_SELECTOR);
+
+		if ( this._maximized )
+			return document.querySelector(MAXIMIZED_SELECTOR);
+
+		return document.querySelector(SELECTOR);
+	}
+
 	toggleVisible(event) {
 		if ( event && event.button !== 0 )
 			return;
 
 		const maximized = this._maximized,
 			visible = this._visible = !this._visible,
-			main = this.exclusive ? document.querySelector(EXCLUSIVE_CONTAINER) : document.querySelector(maximized ? '.twilight-main' : '.twilight-root>.tw-full-height');
+			main = this.getContainer();
 
 		if ( ! visible ) {
 			if ( maximized )
@@ -150,7 +162,7 @@ export default class MainMenu extends Module {
 			return;
 
 		const maximized = this._maximized = !this._maximized,
-			main = this.exclusive ? document.querySelector(EXCLUSIVE_CONTAINER) : document.querySelector(maximized ? '.twilight-main' : '.twilight-root>.tw-full-height'),
+			main = this.getContainer(),
 			old_main = this._menu.parentElement;
 
 		if ( maximized )
diff --git a/src/raven.js b/src/raven.js
index 6b302148..6e37ea6b 100644
--- a/src/raven.js
+++ b/src/raven.js
@@ -25,6 +25,22 @@ const BAD_QUERIES = [
 ];
 
 
+const ERROR_TYPES = [
+	Error,
+	TypeError,
+	SyntaxError,
+	ReferenceError
+];
+
+const ERROR_STRINGS = [
+	'the ducks are on fire',
+	"it's raining in shanghai",
+	'can we just not do this today?',
+	'cbenni likes butts',
+	'guys can you please not spam the errors my mom bought me this new error report server and it gets really hot when the errors are being spammed now my leg is starting to hurt because it is getting so hot'
+];
+
+
 // ============================================================================
 // Raven Logger
 // ============================================================================
@@ -37,6 +53,68 @@ export default class RavenLogger extends Module {
 		this.inject('site');
 		this.inject('experiments');
 
+		// Do these in an event handler because we're initialized before
+		// settings are even ready.
+		this.once('settings:enabled', () => {
+			this.settings.add('reports.error.enable', {
+				default: true,
+				ui: {
+					path: 'Data Management > Reporting >> Error Reports',
+					title: 'Automatically send reports when an error occurs.',
+					component: 'setting-check-box'
+				}
+			});
+
+			this.settings.add('reports.error.include-user', {
+				default: true,
+				ui: {
+					path: 'Data Management > Reporting >> Error Reports',
+					title: 'Include user IDs in reports.',
+					description: "Occasionally, it's useful to know which users are encountering issues so that we can check for specific badges, emote sets, or user flags that are causing issues.",
+					component: 'setting-check-box'
+				}
+			});
+
+			this.settings.add('reports.error.include-settings', {
+				default: true,
+				ui: {
+					path: 'Data Management > Reporting >> Error Reports',
+					title: 'Include a settings snapshot in reports.',
+					description: 'Knowing exactly what settings are in effect when an error happens can be incredibly useful for recreating the issue.',
+					component: 'setting-check-box'
+				}
+			});
+
+			this.settings.addUI('reports.error.example', {
+				path: 'Data Management > Reporting >> Error Reports',
+				component: 'example-report',
+
+				watch: [
+					'reports.error.enable',
+					'reports.error.include-user',
+					'reports.error.include-settings'
+				],
+
+				data: () => new Promise(r => {
+					// Why fake an error when we can *make* an error?
+					this.__example_waiter = r;
+
+					// Generate the error in a timeout so that the end user
+					// won't have a huge wall of a fake stack trace wasting
+					// their time.
+
+					const type = ERROR_TYPES[Math.floor(Math.random() * ERROR_TYPES.length)],
+						msg = ERROR_STRINGS[Math.floor(Math.random() * ERROR_STRINGS.length)];
+
+					setTimeout(() => this.log.capture(new type(msg), {
+						tags: {
+							example: true
+						}
+					}));
+				})
+			})
+		});
+
 		this.raven = Raven;
 
 		Raven.config(SENTRY_ID, {
@@ -72,59 +150,91 @@ export default class RavenLogger extends Module {
 
 				return true;
 			},
-			shouldSendCallback(data) {
+			shouldSendCallback: data => {
+				if ( this.settings && ! this.settings.get('reports.error.enable') ) {
+					if ( data.tags.example && this.__example_waiter ) {
+						this.__example_waiter(null);
+						this.__example_waiter = null;
+					}
+
+					return false;
+				}
+
+				// We don't want any of Sentry's junk.
 				if ( data.message && data.messages.includes('raven-js/') )
 					return false;
 
+				// We don't want any of Mozilla's junk either.
+				const exc = data.exception && data.exception.values[0];
+				if ( exc && exc.type.startsWith('NS_') )
+					return false;
+
+				// Apparently, something is completely screwing up the DOM for
+				// at least two users? Not our problem.
+				if ( ! document.body || ! document.body.querySelector )
+					return false;
+
+				if ( this.settings && this.settings.get('reports.error.include-user') ) {
+					const user = this.site && this.site.getUser();
+					if ( user )
+						data.user = {id: user.id, username: user.login}
+				}
+
+				data.extra = Object.assign(this.buildExtra(), data.extra);
+				data.tags = Object.assign(this.buildTags(), data.tags);
+
+				if ( data.tags.example ) {
+					if ( this.__example_waiter ) {
+						this.__example_waiter(data);
+						this.__example_waiter = null;
+					}
+
+					return false;
+				}
+
 				return true;
 			}
 		}).install();
 	}
 
 	onEnable() {
-		const user = this.site.getUser();
-		if ( user )
-			this.raven.setUserContext({
-				id: user.id,
-				username: user.login
-			});
+		this.log.info('Installed error tracking.');
 	}
 
 
 	buildExtra() {
-		const context = this.settings.main_context,
-			chat_context = this.resolve('chat').context;
-
-
-		const settings = {},
-			chat_settings = {},
-			modules = {},
+		const modules = {},
 			experiments = {},
 			twitch_experiments = {},
 			out = {
 				experiments,
 				twitch_experiments,
-				modules,
-				settings,
-				settings_context: context._context,
-				chat_settings,
-				chat_context: chat_context._context
+				modules
 			};
 
 		for(const key in this.__modules)
 			if ( has(this.__modules, key) ) {
 				const mod = this.__modules[key];
-				modules[key] = [
-					mod.loaded ? 'loaded' : mod.loading ? 'loading' : 'unloaded',
-					mod.enabled ? 'enabled' : mod.enabling ? 'enabling' : 'disabled'
-				]
+				modules[key] = `${
+					mod.loaded ? 'loaded' : mod.loading ? 'loading' : 'unloaded'} ${
+					mod.enabled ? 'enabled' : mod.enabling ? 'enabling' : 'disabled'}`;
 			}
 
-		for(const [key, value] of context.__cache.entries())
-			settings[key] = value;
+		if ( this.settings && this.settings.get('reports.error.include-settings') ) {
+			const context = this.settings.main_context,
+				chat = this.resolve('chat'),
+				chat_context = chat && chat.context,
 
-		for(const [key, value] of chat_context.__cache.entries())
-			chat_settings[key] = value;
+				settings = out.settings = {},
+				chat_settings = out.chat_setting = chat_context ? {} : undefined;
+
+			for(const [key, value] of context.__cache.entries())
+				settings[key] = value;
+
+			if ( chat_context )
+				for(const [key, value] of chat_context.__cache.entries())
+					chat_settings[key] = value;
+		}
 
 		for(const [key, value] of Object.entries(this.experiments.getTwitchExperiments()))
 			if ( this.experiments.usingTwitchExperiment(key) )
@@ -150,25 +260,8 @@ export default class RavenLogger extends Module {
 	}
 
 
-
 	addPlugin(...args) { return this.raven.addPlugin(...args) }
-	setUserContext(...args) { return this.raven.setUserContext(...args) }
-
-	captureException(exc, opts) {
-		opts = opts || {};
-		opts.extra = Object.assign(this.buildExtra(), opts.extra);
-		opts.tags = Object.assign(this.buildTags(), opts.tags);
-
-		return this.raven.captureException(exc, opts);
-	}
-
-	captureMessage(msg, opts) {
-		opts = opts || {};
-		opts.extra = Object.assign(this.buildExtra(), opts.extra);
-		opts.tags = Object.assign(this.buildTags(), opts.tags);
-
-		return this.raven.captureMessage(msg, opts);
-	}
-
+	captureException(exc, opts) { return this.raven.captureException(exc, opts) }
+	captureMessage(msg, opts) { return this.raven.captureMessage(msg, opts) }
 	captureBreadcrumb(...args) { return this.raven.captureBreadcrumb(...args) }
 }
\ No newline at end of file
diff --git a/src/sites/twitch-twilight/modules/directory/following.jsx b/src/sites/twitch-twilight/modules/directory/following.jsx
index 2ef03517..287f7bcd 100644
--- a/src/sites/twitch-twilight/modules/directory/following.jsx
+++ b/src/sites/twitch-twilight/modules/directory/following.jsx
@@ -103,8 +103,11 @@ export default class Following extends SiteModule {
 		const edgesOrNodes = followedLiveUsers.nodes || followedLiveUsers.edges;
 
 		for (let i = 0; i < edgesOrNodes.length; i++) {
-			const edge = edgesOrNodes[i];
-			const node = edge.node || edge;
+			const edge = edgesOrNodes[i],
+				node = edge.node || edge;
+
+			if ( ! node || ! node.stream )
+				continue;
 
 			const s = node.stream.viewersCount = new Number(node.stream.viewersCount || 0);
 			s.profileImageURL = node.profileImageURL;
@@ -134,8 +137,11 @@ export default class Following extends SiteModule {
 		const edgesOrNodes = followedHosts.nodes || followedHosts.edges;
 
 		for (let i = 0; i < edgesOrNodes.length; i++) {
-			const edge = edgesOrNodes[i];
-			const node = edge.node || edge;
+			const edge = edgesOrNodes[i],
+				node = edge.node || edge;
+
+			if ( ! node || ! node.hosting || ! node.hosting.stream )
+				continue;
 
 			const s = node.hosting.stream.viewersCount = new Number(node.hosting.stream.viewersCount || 0);
 			s.profileImageURL = node.hosting.profileImageURL;
diff --git a/src/sites/twitch-twilight/modules/host_button.js b/src/sites/twitch-twilight/modules/host_button.js
index 6f7f23df..daf7cc02 100644
--- a/src/sites/twitch-twilight/modules/host_button.js
+++ b/src/sites/twitch-twilight/modules/host_button.js
@@ -59,7 +59,8 @@ export default class HostButton extends Module {
 			disabled: () => this._host_updating || this._host_error,
 
 			click: data => {
-				if (data.channel) this.sendHostUnhostCommand(data.channel.login);
+				if ( data.channel )
+					this.sendHostUnhostCommand(data.channel.login);
 			},
 
 			popup: async (data, tip) => {
@@ -78,20 +79,13 @@ export default class HostButton extends Module {
 			},
 
 			label: data => {
-				if (!this.settings.get('metadata.host-button')) {
-					return '';
-				}
+				const ffz_user = this.site.getUser();
 
-				const ffz_user = this.site.getUser(),
-					userLogin = ffz_user && ffz_user.login;
+				if ( ! this.settings.get('metadata.host-button') || ! ffz_user || ! data.channel || data.channel.login === ffz_user.login )
+					return;
 
-				if (data.channel && data.channel.login === userLogin) {
-					return '';
-				}
-
-				if (this._host_updating) {
+				if ( this._host_updating )
 					return 'Updating...';
-				}
 
 				return (this._last_hosted_channel && this.isChannelHosted(data.channel && data.channel.login))
 					? this.i18n.t('metadata.host.button.unhost', 'Unhost')
diff --git a/src/sites/twitch-twilight/modules/menu_button.jsx b/src/sites/twitch-twilight/modules/menu_button.jsx
index 942a3fb9..9f6c774f 100644
--- a/src/sites/twitch-twilight/modules/menu_button.jsx
+++ b/src/sites/twitch-twilight/modules/menu_button.jsx
@@ -100,6 +100,8 @@ export default class MenuButton extends SiteModule {
 			cl.remove('loading');
 
 		}).catch(err => {
+			this.log.capture(err);
+
 			// TODO: Show a proper dialog and not an alert.
 			this.log.error('Error enabling main menu.', err);
 			alert('There was an error displaying the menu.'); // eslint-disable-line no-alert
diff --git a/styles/icons.scss b/styles/icons.scss
index d4bd3744..773f4a25 100644
--- a/styles/icons.scss
+++ b/styles/icons.scss
@@ -50,30 +50,12 @@
 	}
 }
 
-//[data-a-target="emote-picker-button"] figure:before,
 .ffz-i-zreknarf:before {
 	content: '\e801'; /* '' */
 	width: 1.3em;
 	margin: .5rem .05rem 0;
 }
 
-/*[data-a-target="emote-picker-button"] {
-	.tw-button-icon__icon {
-		padding: .25rem .4rem;
-
-		figure {
-			display: inline;
-
-			&:before {
-				font-size: 14px;
-			}
-
-			svg {
-				display: none
-			}
-		}
-	}
-}*/
 
 .tw-button__icon .ffz-i-crown:before {
 	margin: 0;