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

@@ -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>

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' : ''}`

src/modules/chat/room.js

@@ -43,25 +43,32 @@ export default class Room {
 
 		this.manager.emit(':room-remove', this);
 
+		if ( this.users ) {
+			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();
+		}
+
+		this.users = null;
+		this.user_ids = null;
+
+		if ( this.style ) {
 			this.style.destroy();
-
-		for(const user of Object.values(this.user_ids)) {
-			if ( user )
-				user.destroy();
-		}
-
-		for(const user of Object.values(this.users)) {
-			if ( user )
-				user.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;
-		this.style = null;
-		this.users = null;
-		this.user_ids = null;
+		}
 
 		if ( this._login ) {
 			if ( this.manager.rooms[this._login] === this )

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
 
 
 // ============================================================================

src/modules/chat/user.js

@@ -24,19 +24,23 @@ export default class User {
 	destroy() {
 		this.destroyed = true;
 
+		if ( this.emote_sets ) {
 			for(const set_id of this.emote_sets._cache)
 				this.manager.emotes.unrefSet(set_id);
 
 			this.emote_sets = null;
+		}
 
 		const parent = this.room || this.manager;
 
-		if ( this._login && parent.users[this._login] === this )
+		if ( parent ) {
+			if ( this._login && parent.users && parent.users[this._login] === this )
 				parent.users[this._login] = null;
 
-		if ( parent.user_ids[this._id] === this )
+			if ( parent.user_ids && parent.user_ids[this._id] === this )
 				parent.user_ids[this._id] = null;
 		}
+	}
 
 	get id() {
 		return this._id;

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>

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 )

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'}`;
 			}
 
+		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,
+
+				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) }
 }

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;

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')

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

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;