Debugger statement throws an error in vuejs app - vue.js

I'm using a simple v-on:click="demo" method that is attached to my input. In my demo function I use debugger statement to stop JavaScript engine execution. The problem is that debugger statement throws none sense errors in es-lint module. My question is simple. How to make debugger work ?
Code
export default {
name: "Demo",
methods: {
demo: function () {
console.log('Running demo')
debugger
}
}
}
Error
Failed to compile.
./src/components/Demo.vue
Module Error (from ./node_modules/eslint-loader/index.js):
/app/src/components/Upload.vue
2:1 warning Insert `··` prettier/prettier
3:1 warning Insert `··` prettier/prettier
...
...

I found the problem. Apparently, ES-linter disallows debugger statement rule. To make debugger work again I had to add // eslint-disable-line comment to my debugger line. Below lines of code solved the debugger error.
debugger // eslint-disable-line
or
/* eslint-disable no-debugger */
debugger

Related

How to import node-java and use it correctly?

Now I am trying to call our APIs in our own Jar.
In VS Code extension example project, I tried to npm install java to install it in modules dir.
In my extension.ts it looks like below:
import * as vscode from "vscode";
import * as java from "java";
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {
// Use the console to output diagnostic information (console.log) and errors (console.error)
// This line of code will only be executed once when your extension is activated
console.log(
'Congratulations, your extension "test-ext" is now active!'
);
context.subscriptions.push(
vscode.commands.registerCommand("test-ext.callLocalJar", async () => {
console.log('test caller start.');
java.classpath.push("testapis.jar");
console.log('test caller start.');
}
)
);
}
// this method is called when your extension is deactivated
export function deactivate() {}
But now I got a failure in the very beginning when activating it...
error:
Activating extension 'boyka.test-ext' failed:
Cannot find module 'c:\Users\boyka\Workspaces\test-ext\build\Release\nodejavabridge_bindings.node'.
My package.json is like
"dependencies": {
"java": "^0.12.2"
}
I am not sure of the root cause, tried to research and add Java home to PATH but luck.
Anyone has this node-java usage experience that could help? Will appreciate that!
https://github.com/joeferner/node-java
Thanks
b.

Mock window.location.reload with sinon

I'm writting tests with sinon for a section of Vue code that performs a reload with window.location.reload();.
The code works correctly, but the test is failing with an error Error: Not implemented: navigation (except hash changes)
If I delete that line of code, the tests don't crash.
How can I write a sinon test that runs correctly through that line of code?
I'm not sure if I need to stub that line, although I'm not sure how could I do it for a property.
Any ideas?
Consider onbeforeunload which throws an error and prevents an actual page reloading, and assert.throws catching the error. Something like this:
describe("#location.reload", () => {
it("works well", () => {
window.onbeforeunload = () => {
throw new Error();
};
assert.throws(location.reload);
});
});

Error occurs when I run my react native project on an android real device

The following error occurs when I run my react native project on an android real device.
Unexpected Identifier 'cat' try statements must have at least a catch or finally block no stack
How do I solve it ?
Could you please share some code where this is happening
The error says that somewhere in your code you have try {} statement without catch {} or finally {}
To fix it search where you have try statements and add catch or finally to it.
Example:
try {
// Some code
} catch (error) {
// Handle error
} finally {
// On finish
}

VueJS 2 does not report any errors (Sentry.io)

I have a Laravel (5.4) application with VueJs2 (2.1.10). I am using Sentry.io as error reporting for our Backend which works fine. When an error occurred from VueJs I am unable to catch it nor send it to Sentry.
Here is the documentation which I used to install Sentry through NPM according to the Raven settings: https://docs.sentry.io/clients/javascript/integrations/vue/
My config in app.js is the following:
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';
Raven
.config('https://[filtered]#sentry.io/[filtered]')
.addPlugin(RavenVue, Vue)
.install();
Building the code works fine through webpack. The question I would like to get some help with is why Vuejs is not reporting any errors to Sentry?
I have tried to force a couple of errors including non existing template variables, http error responses, incorrect component declaration, syntax errors. All those errors do result in console errors but non are send to Sentry.
Any suggestions on where to start or what to do to get error reporting to work with Sentry and Vuejs2? Thanks in advance!
I just started with Sentry as well and have the same problem.
The only workaround I found so far is to include Raven in every single component and to call Raven explicitely when an error occurs (plus your code for app/main.js):
MyComponent.vue
<template>
Click me
</template>
<script>
import Raven from 'raven-js'
export default {
name: 'MyComponent',
data () {
return {
loggedIn: false
}
}
methods: {
createError () {
try {
if (!this.loggedIn) throw new Error('User not logged in')
console.log('User is logged in')
} catch (error) {
Raven.captureException(error)
}
}
}
}
</script>
<style scoped>
</style>
This may be caused by your javascript file is not the same origin with your html file. In this condition, all the javascript errors are caught as 'Script Error', 'Script Error' is sometimes also called a cross-origin error. And sentry discard javascript error /^Script error\.?$/ and /^Javascript error: Script error\.? on line 0$/.
Below is the sentry relative code
// "Script error." is hard coded into browsers for errors that it can't read.
// this is the result of a script being pulled in from an external domain and CORS.
globalOptions.ignoreErrors.push(/^Script error\.?$/);
globalOptions.ignoreErrors.push(/^Javascript error: Script error\.? on line 0$/);
Another Conditon:
you may use vue-cli-service, which default use webpack devtool:eval configuration, this cause chrome bugs: https://bugs.chromium.org/p/chromium/issues/detail?id=765909
Try this
main.js
Import VueRaven, { Raven } from 'vue-raven'
Vue.use(VueRaven, {
dsn:'yourdsn'
}

Navigating through Typescript references in Webstorm using ES6 module syntax

We are using Typescript with Intellij Webstorm IDE.
The situation is we use ES6 import syntax and tsc compiler 1.5.3 (set as custom compiler in Webstorm also with flag --module commonjs)
The problem is it is imposible to click through (navigate to) method from module (file)
// app.ts
import * as myModule from 'myModule';
myModule.myFunction();
// myModule.ts
export function myFunction() {
// implementation
}
When I click on .myFunction() in app.ts I expect to navigate to myModule.ts file but this doesn't happen?
EDIT:
The way we exported functionality was bit different as in first example:
export: {
myFunction1,
myFunction2,
// ...
};
When I click on .myFunction() in app.ts I expect to navigate to myModule.ts file but this doesn't happen
This is working fine in the current WebStorm release.
I found out the problem, my example in question was simplified too much. In real code we are using:
export: {
myFunction1,
myFunction2
// ...
};
and this really doesn't work.
I have to change it to:
export function myFunction1() { /* impl */ }
export function myFunction2() { /* impl */ }
then it works.