Can someone help real quick. I'm trying to test something with Vue instance in console, but in console when I write $vm0 or $vm0.$children
Uncaught ReferenceError: $vm0 is not definedat :1:1
This only works if you have vue dev tools installed. Make sure you select the component first. It should look something like this:
Then you can inspect it in the console tab of chrome dev tools.
The question was initially asked for Vue2 I suppose, where you could use
$vm0.$route.query
to get access to various objects on the $vm0 Vue instance, here: router queries.
In Vue3, that one has changed in favor of
$vm0.proxy.$route.query
Related
I am using remix and just created the most basic project by running npx create-remix#latest. Right out the gate, I get this in my console when running npm run dev.
Warning: Extra attributes from the server: class
It goes away after removing the <Scripts /> tag, but I think I need that?
That's a React error, it happens when you're hydration a server-side rendered HTML but the HTML doesn't match what React expected it to be when hydrating.
The most common reason for this to happen is when a browser extension is changing the HTML before React hydration process run.
Removing the Scripts components hide the error because you're not hydrating React client-side anymore.
[Clarified]
I'm writing my first Laravel app using Vue components; it is a CRUD. I know how to report significant problems to laravel.log via the Log::error("There is an error") technique but that's only useful while I'm in the PHP code; as far as I can figure out, there's no way to write to laravel.log from within a Vue component. (Correct me if I'm wrong!!)
This raises the question of how I should report an error in a Vue component in a Laravel app. I know about console.log(), Debugger for Chrome, and Devtools and those are fine for development. But what about errors that might reasonably happen in production? Clearly, user errors like bad input on a form needs to be dealt with by notifying the user and letting the user correct their input but some errors are beyond the user's scope. For example, it's not hard to imagine my Vue component failing to access the database because it is down for some reason. Shouldn't that kind of problem be written to a log so that whoever monitors production apps can deal with it?
How would a professional app deal with that kind of situation?
My initial inclination is just to write it to laravel.log if possible but that may be either impossible or be considered a bad approach. I'd be curious to know what experienced Laravel developers do in such situations. Maybe automatically sending a text to a support person would be a better approach. I'm really not sure how this should be handled in a modern professional way.
In any case, whoever is responsible for situations beyond the user's control needs to be told somehow so they can begin the steps that would be necessary to fix the problem. Furthermore, this person needs to be given sufficient details of what happened to be able to solve the problem. I expect that would include things like stacktraces, error codes, etc. I wouldn't want to send all of that as a stream of texts, I'd want it all to be accessible in a log of some kind. Then, you simply notify the support person that there is a problem of such-and-such severity which occurred at such-and-such a time and remind them where to find the details.
My approach may be dated though and newer, better alternatives may exist. Those are what I'm looking for with my question.
I can give a general purpose answer for your question.
React introduced the concept of ErrorBoundary,
Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.
Using Error Boundary in Vue
use vue-error-boundary
This simple code of handleError method shows ErrorBoundary receiving a callback function through the on-error prop.
<template>
<ErrorBoundary :on-error="handleError">...</ErrorBoundary>
<template>
<script>
// ...
methods: {
handleError (err, vm, info) {
// do something
}
}
// ...
</script>
read the docs for the npm module to know more.
while handling errors, you can pass the errors to a link to your production site.
eg. /logging so it would be like https://www.example.com/logging, and post the errors in a format eg Date: Error File: Error Message.
You can even use authentication tokens along this link (though no one would use it as it would be frontend errors everyone can see it at console).
Then use routes to log those errors to laravel logs.
I have a React/apollo client and an apollo/neo4j backend application based on GRANDStack.
My React app runs on localhost:3000 and my GraphQL on localhost:4001/graphql, and they communicate without fail. All is working well in the app (with CORS enabled), but I wanted to implement testing with Cypress.
Should I expect Cypress to be able to observe the flow between React and GraphQL without error? Or is this beyond its capability?
What I've tried:
I set up Cypress and ran the following test:
it("Opens myPlan.", function() {
cy.visit("localhost:3000/myPlan");
cy.wait(6000);
});
At first cypress setup, my site loaded. One of the first things that the app does is graphql query a few values, and create a dropdown box based on those values. While this and all other graphql requests work fine in the browser, I get "{"graphQLErrors":[],"networkError":{"name":"ServerParseError","response":{},"statusCode":404,"bodyText":""},"message":"Network error: Unexpected end of JSON input"}" errors in cypress for the same code.
Presumably, the problem was because there are 2 endpoints, and cy.visit only allows one. I tried disabled ChromeWebSecurity and tried an "Access-Control-Allow-Origin-master" plugin.
Edit: I found someone that knew Cypress, and they suggested adding:
"proxy": "http://localhost:4001/",
to my react client config. This avoids the multi-port issues, and Cypress works.
Edit: I found someone that knew Cypress, and they suggested adding:
"proxy": "http://localhost:4001/",
to my react client config. This avoids the multi-port issues, and Cypress works.
I run my laravel app #localhost.
```php artisan serve --host=localhostIP```
On top I run an Andoid app with the same base URL.
Could anyone tell me how can I debug incoming API´s calls
like if BASEURL/users is called?
Furthermore, how can I log the happening events in the console
I am developing API's with laravel too, i do it this way:
composer require laravel/homestead to have it all in a vm 😉 see https://laravel.com/docs/master/homestead for more information, i use the "per project" installation
Download postman to have the best tool for sending querys to your api and to test your api quick -> https://www.getpostman.com (i use it free)
configure and run your homestead (it's not that complicated).
your homestead is fit with php and xdebug enabled
i am using phpStorm and have my vagrant setup as deployment target
"listen to debug" with phpstorm
to your GET requests, add a queryparam XDEBUG_SESSION_START=PHPSTORM
i can debug my api now 😉
i also wrote https://logcrawler.de to receive the log informations of all my api's and all my server 🤩
I hope, i could help you a little bit
This is my way, but I think it's not good!
Create router api in config/web, Eg:
router/api: Route::post('/check_api', [CheckController::class, 'testFunc'])->name('api.check_api');
web/api: Route::post('test/check_api', [CheckController::class, 'testFunc'])->name('test.check_api');
Create a post by form or ajax in one resource/view like index
Go to page, and debug with phpstorm
You can use logging feature of Laravel. Apply Logs on entry point of application to test whether API url is hitting or not.
use postman
https://www.getpostman.com/downloads/
it's an excellent thing very much usefull
I am looking at testing some Vue.js components, as part of a Laravel application. So, I have a component that is used in a blade template and makes a GET request during the mounted lifecycle hook. Say this request takes 800 ms. Is it possible to use phpunit in this situation- to check the resulting HTML after said request?
I tried using sleep(1) (yes, probably a horrible idea), to give the request time to finish up (not 100% on this methodology), but the expected text was not available on the page after this brief sleep.
Here is what I am hoping to do:
$this->actingAs($user)
->visit('/teams/' . $team->slug . '/players'); // request is made when this route is hit.
$this->see('There are currently no players for this team.')
->see('There are currently no temporary players for this team.');
The see() calls resulted in error- the HTML was not present. I also checked- through the HTML output by phpunit on error, and all that is available in the HTML is what is inside of the blade template- the Vue component is not rendered at the point in which the see() call is made.
I suppose I am after some advice or direction.
I appreciate that this may not be what you're after or even compatible based on the version of Laravel you're using but have you heard about Laravel Dusk in the latest version (5.4).
https://laravel.com/docs/5.4/dusk