Multiple GTM containers in vue THROWS Error in production - vue.js

I am able to add multiple ids in the id array and it loads well and properly adds the script on local
However, when the code makes it to production, it throws invalid errors because the IDs are getting concatenated(probably due to minified files, not sure). How can I fix this?
Pictures of local and deployed version are attached
Google tag manager on prodution
Google tag manager on my local machine
Here's is my config code using vue-gtm
Vue.use(VueGtm, {
id: ['GTM-M4X2575', 'GTM-T98TL4V'],
enabled: true,
debug: true
});
Am I missing anything?

Related

Stencil not working with a 500 server error

Using stencil 3.0.3, node 12.21 cornerstone theme was working and suddenly stopped with a weird server error:
Debug: internal, implementation, error
Error: The BigCommerce server responded with a 500 error
at Object.internals.getResponse (/usr/local/lib/node_modules/#bigcommerce/stencil-cli/server/plugins/renderer/renderer.module.js:128:15)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async internals.implementation (/usr/local/lib/node_modules/#bigcommerce/stencil-cli/server/plugins/renderer/renderer.module.js:39:20)
at async module.exports.internals.Manager.execute (/usr/local/lib/node_modules/#bigcommerce/stencil-cli/node_modules/#hapi/hapi/lib/toolkit.js:45:28)
at async Object.internals.handler (/usr/local/lib/node_modules/#bigcommerce/stencil-cli/node_modules/#hapi/hapi/lib/handler.js:46:20)
at async exports.execute (/usr/local/lib/node_modules/#bigcommerce/stencil-cli/node_modules/#hapi/hapi/lib/handler.js:31:20)
at async Request._lifecycle (/usr/local/lib/node_modules/#bigcommerce/stencil-cli/node_modules/#hapi/hapi/lib/request.js:312:32)
at async Request._execute (/usr/local/lib/node_modules/#bigcommerce/stencil-cli/node_modules/#hapi/hapi/lib/request.js:221:9)
I have tried to re-install big commerce stencil, clean build and still get the same error.... at this point I have no idea what could be causing this issue.
Importantly, there was no code changes in between the day where everything was working and the day where it stopped.
Are you using CloudFlare for a CDN? I've ran into this issue and have had to edit my hosts file
I add the following 3 lines.
The first one is for the Store Domain, i.e. if you have MyShoeStore.com
The second 2 contain the auto-generated store-hash for a BigCommerce store that should be visible in your URL bar if you are on the BigCommerce control panel (Logged into the admin view - that's the easiest way to get it, there are some others)
35.186.223.98 mystoredomain.com
35.186.223.98 store-abcdefg[store-hash].mybigcommerce.com
35.186.223.98 www.store-abcdefg[store-hash].mybigcommerce.com
For some reason, Stencil-CLI gets thrown for a loop when trying to connect to a BigCommerce store that is running behind CloudFlare CDN. This has caused 500 errors in the Stencil-CLI, and a failure to render, during local development, but the store is able to be uploaded and hosted in production without a problem.
I'm not sure if this is the actual issue that you had which caused your 500 error, (It can be due to an error in the syntax of one of the HandleBars templates, but usually Stencil-CLI will output an informative error for that reason.)
The other situation I have seen this in is if you are trying to run Cornerstone on a very old BigCommerce store which is still running their old template framework (Blueprint) - in that situation, certain pages will 500, but others will work.
This may be helpful for others who are running into this.
I installed a proxy tool to capture traffic between stencil and BigCommerce in order to perhaps find more details on this error.
Unfortunately, as soon as I did that, the site worked again...

Utilising the error layout in a hosted Nuxt application

I've just finished creating my custom error messages in my Nuxt.js application in layouts/error.vue. For the moment I've made it pretty simple as it's just a brochure site for the time being, so I am just handling the errors as shown below as for now I only care about users hitting a page that doesn't exist.
<template v-if="error.statusCode === 404">
<h1>Sorry!</h1>
<p>We can't find the page you are looking for.</p>
</template>
<template v-else>
// Some other message
</template>
When running my application locally, and trying to navigate to a route that doesn't exist, this works perfectly and my error message is displayed.
However, my hosted application does not behave how I want it to. I'm hosting the application on IBM Cloud as a Cloud Foundry application. The application uses the static buildpack, and my manifest.yml file looks like so:
---
applications:
- name: name
path: ./dist
buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
random-route: true
But if I try and navigate to an incorrect route that way, I am displayed the generic nginx 404 error:
I understand that there are 2 ways you can tell Cloud Foundry that the application requires a static buildpack - Declaring the buildpack in the manifest.yml OR adding a file named Staticfile in the dist directory after running npm run generate. Within this file, you can add some configurations, one of which being status codes which:
Allows to define custom pages for HTTP STATUS codes instead of the default NGINX pages.
status_codes:
404: /404.html
500: /500.html
However, my error handling is done in a layout, not a page. And my generated project folder does not contain a page called error anywhere, so I don't know how to use this method to use my error handling.
If anybody could give me some pointers on how to correctly do it, it would be greatly appreciated!

Angular2 error after deployment on AWS server ""Only void and foreign elements can be self closed "head" ("[ERROR ->]<head/>"

After having finished and tested an Angular2 application on my local machine, I decided to move it to an AWS cloud server with Apache.
I cloned the sw from git but, as soon as I launched the app, I got an error on the browser console stating:
EXCEPTION: Template parse errors:
Only void and foreign elements can be self closed "head" ("[ERROR ->]<head/>
After some research I found that all of my external html templates are magically enriched with a starting <head/> tag which I do not see trace of in my code.
To fix this I had to turn off mod-pagespeed .Since I am not familiar with Apache configuration I do not know which side effects this may have and whether there is any better solution. Any help would be very much appreciated.
I believe mod-pagespeed has an option where it automatically adds a head tag to an html document if it cannot find it in the document (before the body). To turn off this feature add this to your pagespeed apache configuration (ie. in the .htaccess):
To prevent javascript alterations also forbid a couple more filters
ModPagespeedForbidFilters add_head,rewrite_javascript,rewrite_javascript_inline,combine_javascript,inline_javascript
This way you can still enjoy the rest of the mod-pagespeed features :)

How can I replace the server in Web Component Tester

I have a project set up based around the Polymer Starter Kit, which includes Web-Component-Tester
This project includes php server code which I would also like to test by writing tests to run in the browser which will utilise the PHP server code through Ajax Calls.
This implies replacing the server that Web Component Tester is using ONLY when testing server side code. I hope to make a separate gulp task for this.
Unfortunately, I don't understand the relationship between WCT, Selenium and what ever server is run currently. I can see that WCT command starts Selenium, but I can't find out what the web server is and how that is started. I suspect it is WCT, because there is configuration of the mapping of directories to urls, but other than that I haven't a clue, despite trying to read the code.
Can someone explain how I go about making it run its own server when testing the client, but relying on an already set up web server (nginx) when running the server. I can set nginx to run from local host, or an other domain if that is a way to choose a different configuration.
EDIT: I have now found that runner/webserver.js starts an express server, and that urls get mapped so the base directory for the test runner and the bower_components directory both get mapped to the /components url.
What is currently confusing me is in what circumstances this gets run. It appears that loading plugins somehow does it, but my understanding from reading the code for this is tenuous.
The answer is that web component tester itself has a comment in the runner/config.js file.
In wct-conf.js, you can use registerHooks key into the Object that gets returned to add a function that does
registerHooks: function(wct) {
wct.hook('prepare:webserver', function(app, done) {
var proxy = require('express-http-proxy');
app.use('/api',
proxy('pas.dev', {
forwardPath: function(req, res) {
return require('url').parse(req.url).path;
}
})
);
done();
});
This register hook function allows you to provide a route (/api in my case) which this proxies to a server which can run the php scripts.

MVC 4: Durandal bundling cache

My site is built on a WebAPI back end...
the issues occurs on deployment, as my Uri wasn't formatted correctly due to our IIS deployment/site structure
WRONG
http://itil.mysite.com/api/Building
RIGHT
http://itil.mysite.com/TestSite/api/building
So I modified my http helper to include a baseUri
like so
define(function () {
var baseUri = window.AppPath;
return {
baseUri: baseUri,
defaultJSONPCallbackParam: 'callback',
get: function (url, query) {
return $.ajax(baseUri + url, { data: query });
},
...
});
And on my Index.cshtml
added the following to get the set the root/baseUri path:
var AppPath = '#string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"))';
console.log('AppPath: '+AppPath);
The baseUri path is correct when I log it to the console from the Index.cshtml: EG.
AppPath: http://itil.mysite.com/TestSite/
But when I do the actual api call (from my deployed instance), it still uses the old Uri..
http.get('api/building').done(viewInit);
STILL WRONG
http://itil.mysite.com/api/building
My next thought was that the files must be cached somehow, so I tried the following:
Restarted IIS numerous times,
Deleted and redeployed files
Disabled Caching in chrome,
Disabled .js caching in IIS (usermode & kernel
mode),
Restarted my PC
Modified the ScriptBundle to try and force it
to (for the lack of a better word) go out of sync, then added my
code back
The code works when i use my Visual Studio dev server, but I'm getting the
same issue on my local IIS & Alpha test site... with no luck.
How the hell do i clear the cache on a deployed site :/ This is getting to the point where things seems to be a bit ridiculous. Either I'm losing it, or the "big guy" hates me.
Sigh.. Second time I've been caught out by this. I thought my issue was MVC related, its was Durandal deployment related :P
Note to everyone reading this.
Once you deploy a Durandal project & if you modify ANY of the existing javascript files or main.js. Remember to run optimizer.exe.
...\App\durandal\amd\optimizer.exe