T248884 documents the [[ https://logstash.wikimedia.org/app/kibana#/dashboard/AXDBY8Qhh3Uj6x1zCF56?_g=(refreshInterval:(display:Off,pause:!f,value:0),time:(from:now-30d,mode:quick,to:now))&_a=(description:'Client+side+errors+from+web+browsers+(via+EventGate%2FKafka).',filters:!(('$state':(store:appState),meta:(alias:!n,disabled:!f,index:'logstash-*',key:meta.stream,negate:!f,type:phrase,value:mediawiki.client.error),query:(match:(meta.stream:(query:mediawiki.client.error,type:phrase))))),options:(darkTheme:!f),panels:!((col:10,id:Top-Domains,panelIndex:5,row:3,size_x:3,size_y:4,type:visualization),(col:1,id:Trending-Messages,panelIndex:6,row:3,size_x:9,size_y:4,type:visualization),(col:1,columns:!(wiki,message),id:MediaWiki-Events-List,panelIndex:15,row:7,size_x:12,size_y:16,sort:!('@timestamp',desc),type:search),(col:1,id:Events-Over-Time,panelIndex:18,row:1,size_x:12,size_y:2,type:visualization)),query:(query_string:(analyze_wildcard:!t,query:'*')),timeRestore:!t,title:mw-client-errors,uiState:(P-5:(spy:(mode:(fill:!f,name:!n)),vis:(legendOpen:!f,params:(sort:(columnIndex:!n,direction:!n)))),P-6:(spy:(mode:(fill:!f,name:!n)),vis:(params:(sort:(columnIndex:!n,direction:!n))))),viewMode:view) | 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
- [x] If possible, a Vue.js specific error is fed through the system. See [[ https://vuejs.org/v2/guide/deployment.html#Tracking-Runtime-Errors | Tracking-Runtime-Errors ]]. This can also be done for [[ https://vuejs.org/v2/api/#errorCaptured | the Vector Vue instance (or any component) specifically ]]. Everything should feed into `window.onerror`.
- [x] Ask Jason if we still need the Minerva-specific error counter tracking (related [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/MinervaNeue/+/6b8f8568%5E%21/#F0 | 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.
- [x] Tasks for any new work needed such as addressing existing trends is made. --Nothing to be done.
- [x] A [[ https://grafana.wikimedia.org/d/000000566/overview?orgId=1&from=now-30d&to=now | 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.
- [x] A new [[ https://www.mediawiki.org/wiki/Reading/Web/Chores | Web chore ]] is added to monitor trends or some kind fancy alert system is configured. --The existing chore's Logstash dashboard covers it.
- [x] Documentation [[ https://www.mediawiki.org/wiki/Vue.js | 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
# Log in
# Add the following to your common JS script:
```lang=js,name=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 );
```
4. Refresh the page
5. 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