Page MenuHomePhabricator

Feed Vue.js run time errors to error intake system
Closed, ResolvedPublic3 Estimated Story PointsSpike

Description

T248884 documents the new client error reporting system. As part of the iterations, we will be making many changes to client side code and must verify that errors do not rise. This task explores how best to integrate responsible deployments into our processes.

@jlinehan is our primary point of contact to identify how to best utilize the new system and integrate it into our processes.

Acceptance Criteria

  • If possible, a Vue.js specific error is fed through the system. See Tracking-Runtime-Errors. This can also be done for the Vector Vue instance (or any component) specifically. Everything should feed into window.onerror.
  • Ask Jason if we still need the Minerva-specific error counter tracking (related recent commit to limit the number of reports tracked). Would we need something like that here? --Nice to have but not required. The system is currently susceptible to DOS attack-like floods so better flow handling is needed in general.
  • Tasks for any new work needed such as addressing existing trends is made. --Nothing to be done.
  • A project dashboard is made, if needed. -- The interface to use is Logstash. There's no special dashboards or anything unless an error counter is added.
  • A new Web chore is added to monitor trends or some kind fancy alert system is configured. --The existing chore's Logstash dashboard covers it.
  • Documentation on wiki is revised for general Vue.js component development (possibly just adding a link to T248884's output). -- Added a link to https://www.mediawiki.org/wiki/Vue.js#Error_reporting.

Sign off steps

  • Please pull T250336 into the board to setup dashboards.

QA Steps

  1. Navigate to https://en.wikipedia.beta.wmflabs.org
  2. Log in
  3. Add the following to your common JS script:
https://en.wikipedia.beta.wmflabs.org/wiki/User:…/common.js
mw.loader.load( 'vue' );

setTimeout( function () {
	var Vue = mw.loader.require( 'vue' ),
		$el = $( '<div>' );
	
	new Vue( {
		el: $el.get( 0 ),
		render: function ( h ) {
			throw new Error( 'T249826' );
		}
	} )
}, 5000 );
  1. Refresh the page
  2. Observe that a $schema=/mediawiki/client/error/1.0.0' event has been logged with error_class=Error`, message=T249826, and the stack_trace property is set

QA Results - Beta

ACStatusDetails
1T249826#6941262

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Change 647726 abandoned by Phuedx:
[mediawiki/core@master] mediawiki.base: Hide mw.errorLogger.crossBrowserStackTrace()

Reason:
Wrapping this in an IIFE to create the local variables and function introduces a load of visual noise for not a whole lot of gain.

https://gerrit.wikimedia.org/r/647726

Change 647727 merged by jenkins-bot:
[mediawiki/core@master] mediawiki.base: Add mw.errorLogger.logError()

https://gerrit.wikimedia.org/r/647727

Change 643361 merged by jenkins-bot:
[mediawiki/core@master] vue: Log component errors

https://gerrit.wikimedia.org/r/643361

phuedx updated the task description. (Show Details)
phuedx added a subscriber: phuedx.
Krinkle added a subscriber: Krinkle.

Marking as train blocker per https://gerrit.wikimedia.org/r/c/mediawiki/core/+/649394. Either address or land and backport the revert and then revisit for the next train.

I seem to be getting mw.errorLogger.logError is not a function when an error is thrown in Vue. Is there a patch that's not been merged?

I seem to be getting mw.errorLogger.logError is not a function when an error is thrown in Vue. Is there a patch that's not been merged?

We'll need to revert the follow-on change in resources/src/vue/index.js too. I'm curious though, where are you seeing that error/those errors?

We'll need to revert the follow-on change in resources/src/vue/index.js too. I'm curious though, where are you seeing that error/those errors?

https://gerrit.wikimedia.org/r/c/mediawiki/core/+/649922 and https://gerrit.wikimedia.org/r/c/mediawiki/core/+/649924 (the backport to wmf/1.36.0-wmf.22).

I'm curious though, where are you seeing that error/those errors?

Local development. So not in a production setting (yet)

Change 655434 had a related patch set uploaded (by Phuedx; owner: Phuedx):
[mediawiki/extensions/WikimediaEvents@master] WIP: Move and merge mediawiki.errorLogger.js code

https://gerrit.wikimedia.org/r/655434

Change 655435 had a related patch set uploaded (by Phuedx; owner: Phuedx):
[mediawiki/core@master] WIP: mediawiki.base: Add mw.errorLogger.logError()

https://gerrit.wikimedia.org/r/655435

@Krinkle, @jlinehan: The above two patches (I413c4bf58 and I49d3edce) introduce a minimum-viable client-side API for logging errors that other components can bind to. In order to keep as much code as possible out of the critical path, I followed @jlinehan's advice and moved the majority of the stack trace processing code into the WikimediaEvents extension (specifically, WikimediaEvents/modules/ext.wikimediaEvents/clientError.js`), leaving mediawiki/resources/src/mediawiki.base/mediawiki.errorLogger.js very light and very few internal details of how we log errors visible to other components.

However, taking this approach does mean that the stack trace processing code is now unavailable in core. I had considered a Core RL module for that code to be lazily loaded when an error is caught by the window.onerror handler or mw.errorLogger.logError is invoked. This would mean that other components would have access to that code should they wish but it would come at the cost of an RL module definition.

Another cost to consider is that there's no unit test environment for the JavaScript code in the WikimediaEvents extension. Introducing such an environment without executing _all_ of the instrumentation defined in the extension should be significantly easier after merging I3906a1b1.

I'd appreciate your feedback either here or on-patch whenever you have time to give it.

TODO:

  • Add a temporary B/C layer to WikimediaEvents/modules/ext.wikimediaEvents/clientError.js that handles data in the olde format. This isn't necessary

Change 655434 merged by jenkins-bot:
[mediawiki/extensions/WikimediaEvents@master] Move and merge mediawiki.errorLogger.js code

https://gerrit.wikimedia.org/r/655434

Change 659263 had a related patch set uploaded (by Phuedx; owner: Phuedx):
[mediawiki/extensions/WikimediaEvents@master] Move and merge mediawiki.errorLogger.js code (again)

https://gerrit.wikimedia.org/r/659263

Change 655435 merged by jenkins-bot:
[mediawiki/core@master] mediawiki.base: Add mw.errorLogger.logError()

https://gerrit.wikimedia.org/r/655435

Change 663025 had a related patch set uploaded (by Phuedx; owner: Phuedx):
[mediawiki/core@master] vue: Log component errors

https://gerrit.wikimedia.org/r/663025

Change 663025 merged by jenkins-bot:
[mediawiki/core@master] vue: Log component errors

https://gerrit.wikimedia.org/r/663025

Change 664306 had a related patch set uploaded (by Phuedx; owner: Phuedx):
[mediawiki/extensions/WikimediaEvents@master] [WIP] Log errors thrown by Vue.js components

https://gerrit.wikimedia.org/r/664306

Change 659263 merged by jenkins-bot:
[mediawiki/extensions/WikimediaEvents@master] clientError: Merge mediawiki.errorLogger.js code (again)

https://gerrit.wikimedia.org/r/659263

Change 664306 merged by jenkins-bot:
[mediawiki/extensions/WikimediaEvents@master] clientError: Log errors thrown by Vue.js components

https://gerrit.wikimedia.org/r/664306

Edtadros added a subscriber: Edtadros.

@Jdlrobson I'm not sure what to validate here.

Jdlrobson removed a project: Patch-For-Review.

Not sure what qutiebot is doing moving this one but don't don't think anything is left to review here...

Change 673012 had a related patch set uploaded (by Phuedx; owner: Phuedx):
[mediawiki/core@master] DNM: Add throwing module for T249829

https://gerrit.wikimedia.org/r/673012

Change 673012 had a related patch set uploaded (by Phuedx; owner: Phuedx):
[mediawiki/core@master] DNM: Add throwing module for T249826

https://gerrit.wikimedia.org/r/673012

Change 673054 had a related patch set uploaded (by Phuedx; owner: Phuedx):
[mediawiki/extensions/WikimediaEvents@master] clientError: Don't silently drop thrown by Vue.js components

https://gerrit.wikimedia.org/r/673054

Change 673054 merged by jenkins-bot:
[mediawiki/extensions/WikimediaEvents@master] clientError: Don't silently drop thrown by Vue.js components

https://gerrit.wikimedia.org/r/673054

Change 673012 abandoned by Phuedx:
[mediawiki/core@master] DNM: Add throwing module for T249826

Reason:

https://gerrit.wikimedia.org/r/673012

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps
  1. Navigate to https://en.wikipedia.beta.wmflabs.org
  2. Log in
  3. Add the following to your common JS script:
https://en.wikipedia.beta.wmflabs.org/wiki/User:…/common.js
mw.loader.load( 'vue' );

setTimeout( function () {
	var Vue = mw.loader.require( 'vue' ),
		$el = $( '<div>' );
	
	new Vue( {
		el: $el.get( 0 ),
		render: function ( h ) {
			throw new Error( 'T249826' );
		}
	} )
}, 5000 );
  1. Refresh the page

✅ 5 AC1: . Observe that a $schema=/mediawiki/client/error/1.0.0' event has been logged with error_class=Error`, message=T249826, and the stack_trace property is set

{meta: {stream: "mediawiki.client.error", domain: "en.wikipedia.beta.wmflabs.org"},…}
$schema: "/mediawiki/client/error/1.0.0"
error_class: "Error"
file_url: "<anonymous>"
message: "T249826"
meta: {stream: "mediawiki.client.error", domain: "en.wikipedia.beta.wmflabs.org"}
domain: "en.wikipedia.beta.wmflabs.org"
stream: "mediawiki.client.error"
stack_trace: "at wn.render  <anonymous>:1:141↵at wn.e._render  <anonymous>:37:348↵at wn.r  <anonymous>:70:746↵at fn.get  <anonymous>:28:628↵at new fn  <anonymous>:28:546↵at <anonymous>:70:760↵at wn.$mount  <anonymous>:70:907↵at wn.$mount  <anonymous>:96:339↵at wn.t._init  <anonymous>:34:899↵at new wn  <anonymous>:32:233"
url: "https://en.wikipedia.beta.wmflabs.org/wiki/User:Edtadros-beta1/common.js"

Test Result - Prod

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps
  1. Navigate to https://en.wikipedia.org
  2. Log in
  3. Add the following to your common JS script:
https://en.wikipedia.beta.wmflabs.org/wiki/User:…/common.js
mw.loader.load( 'vue' );

setTimeout( function () {
	var Vue = mw.loader.require( 'vue' ),
		$el = $( '<div>' );
	
	new Vue( {
		el: $el.get( 0 ),
		render: function ( h ) {
			throw new Error( 'T249826' );
		}
	} )
}, 5000 );
  1. Refresh the page

✅ 5 AC1: . Observe that a $schema=/mediawiki/client/error/1.0.0' event has been logged with error_class=Error`, message=T249826, and the stack_trace property is set

{"meta":{"stream":"mediawiki.client.error","domain":"en.wikipedia.org"},"$schema":"/mediawiki/client/error/1.0.0","error_class":"Error","message":"T249826","file_url":"<anonymous>","url":"https://en.wikipedia.org/wiki/User:EdTestCommons01/common.js","stack_trace":"at wn.render  <anonymous>:1:141\nat wn.e._render  <anonymous>:37:348\nat wn.r  <anonymous>:70:746\nat fn.get  <anonymous>:28:628\nat new fn  <anonymous>:28:546\nat <anonymous>:70:760\nat wn.$mount  <anonymous>:70:907\nat wn.$mount  <anonymous>:96:339\nat wn.t._init  <anonymous>:34:899\nat new wn  <anonymous>:32:233"}
ovasileva added a subscriber: ovasileva.
Jdlrobson claimed this task.

Signing off. We have plenty of evidence errors are coming in from bug reports which support all the thorough testing we've done here. good work all!