Next.js: How to disable telemetry permanently in all environments? - next.js

I want to disable Next.js telemetry in all environments, forever (Just because, Ok? Let's not sidetrack the question with irrelevant debate).
I don't want the telemetry to run on developer environments, test builds, CI builds or anywhere else.
I'm trying to find a "code" solution - I don't want to have to do anything manually in an environment in order to switch off telemetry.
Next.js makes it difficult to figure out if telemetry is enabled because it only prints the telemetry warning once on a given machine.
My diagnostic for knowing if telemetry is running is to add the next telemetry status command to my build script in package.json:
"build": "next telemetry status && next build",
I've tried adding the following to next.config.js:
module.exports = {
env: {
NEXT_TELEMETRY_DISABLED: '1',
},
}
And I've tried adding this to .env:
NEXT_TELEMETRY_DISABLED=1
But the telemetry command still reports Status: Enabled
In fact, the NEXT_TELEMETRY_DISABLED env variable doesn't seem to work at all, I tried manually disabling telemetry in my IDE by setting the env variable, but it still reports telemetry is enabled:
Next.js version: 9.5.2
Doco: https://nextjs.org/telemetry
Github issue: https://github.com/vercel/next.js/issues/8851

Adding next telemetry disable command as my prebuild script seems to have done the trick.
"prebuild": "next telemetry disable",
"build": "next build",

Related

Next Start - too slow and images do not load with Next/Image

I believe I followed every single step mentioned in the documentation but can't seem to get images load with 'next start' script.
Next.config.js
images: {
domains: [
'dev.mydomain.com',
'qa.mydomain.com',
'stg.mydomain.com',
'mydomain.com',
],
},
I have images in public/assets/images directory. These are .png files
In my React component that is used on one of the pages, I have
import Image from 'next/image';
import homeIntroImg from '../../../public/assets/images/homeIntro.png';
.....
<Image
src={homeIntroImg}
alt="Home Introduction"
placeholder="blur"
/>
As mentioned in docs, I have installed 'sharp' and added environment variable. /usr/src/app is the working directory path in docker.
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "NEXT_SHARP_PATH=/usr/src/app/node_modules/sharp next start ",
Dockerfile
FROM base-image-node-16.0:latest AS runner
WORKDIR /usr/src/app
ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
ENV NEXT_TELEMETRY_DISABLED 1
USER 2020
COPY --chown=2020:2020 . /usr/src/app
EXPOSE 3000
CMD [ "npm", "run", "start" ]
On local when i try to build docker container,
I get
Warning: For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'yarn add sharp', and Next.js will use it automatically for Image Optimization.
but images load fine.
When the same docker image is deployed to cluster, the initial load time is almost 10-15 sec. This wasn't happening like this when I run the app using 'node server.js'. I wanted to use 'next start' as recommended to get optimization benefits but now I question if it is worth to use 'next start' if it takes 10-15 sec for load.
images do not load and fail with 503 service unavailable error.
I see the 'Sharp' warning and right after that 'npm' crashes
Warning: For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'yarn add sharp', and Next.js will use it automatically for Image Optimization.
Read more: https://nextjs.org/docs/messages/sharp-missing-in-production
Killed
Am I missing anything? Any help is greatly appreciated.

Next.js - Is it possible to debug getServerSideProps?

Hi as per docs getServerSideProps is a function which is executed only on server side.
export async function getServerSideProps(context) {
console.log("hello world");
debugger;
return {
props: {
age:55
}, // will be passed to the page component as props
}
}
As a consequence simply dropping a debugger keyword won't work.
I have tried:
Attaching the node.js debugger on port 9229
Running node --inspect-brk ./node_modules/next/dist/bin/next
Running cross-env NODE_OPTIONS='--inspect' next dev
But neither console.log() nor debugger keyword seem to have any effect.
However my props from getServerSideProps are passed in correctly, which proves the function is called.
Is it possible to stepthrough getServerSideProps or at least get console.log working? Thanks!
P.S.
The lines of code outside getServerSideProps are debuggable and work as expected.
In order to make the open the debug port open properly, you need to do the following:
// package.json scripts
"dev": "NODE_OPTIONS='--inspect' next dev"
// if you want custom debug port on a custom server
"dev": "NODE_OPTIONS='--inspect=5009' node server.js",
Once the debug port is own, you should be able to use inspector clients of your choice.
I had the same problem and I solved it with following steps. First, I installed cross-envpackage with
npm install cross-env
then I had to adjust my package.json with
"dev": "cross-env NODE_OPTIONS='--inspect' next dev",
After that you should be able to run npm run dev.
Open localhost:3000 or whatever port u are normally running nextjs app on. Open new tab and type
chrome://inspect
You should be able to see path to your app with word inspect at the end. After clicking new devTools will be opened with ability to set up breakpoints inside e.g. getStaticPaths, getStaticProps or getServerSideProps.

Meteor site locks up when trying to add new account

I recently updated my Meteor based website from 1.3 to 1.8, while including a Let's Encrypt SSL. When I attempt to add new users after being deployed using MUP, the UI for adding users collapses down to three strobing bars but never completes. When I attempt to run the page in another browser it gives me a 502 Bad Gateway error. This 502 error goes away when I refresh the original page attempting to create the account.
I built around using the 'turn key' accounts as provided. It works great while testing locally on my home computer.
This is all the install packages including the default after removing insecure and :
meteor-base#1.4.0 # Packages every Meteor app needs to have
mobile-experience#1.0.5 # Packages for a great mobile UX
mongo#1.6.2 # The database Meteor supports right now
blaze-html-templates#1.0.4 # Compile .html files into Meteor Blaze views
reactive-var#1.0.11 # Reactive variable for tracker
tracker#1.2.0 # Meteor's client-side reactive programming library
standard-minifier-css#1.5.3 # CSS minifier run for production mode
standard-minifier-js#2.4.1 # JS minifier run for production mode
es5-shim#4.8.0 # ECMAScript 5 compatibility for older browsers
ecmascript#0.12.4 # Enable ECMAScript2015+ syntax in app code
shell-server#0.4.0 # Server-side component of the `meteor shell` command
alexwine:bootstrap-4
oauth
iron:router
accounts-ui
accounts-password
accounts-facebook
accounts-google
session
underscore
facebook-config-ui
google-config-ui
And this is running stock accounts, there is no special code. I have set up the sign in for username and email in the client facing side of the JavaScript file:
Accounts.ui.config({
passwordSignupFields: "USERNAME_AND_EMAIL"
});
What is really frustrating is that my site works fine when ran on my local machine for testing, adding and updating users as necessary, but gets bogged down when deployed for some reason.
I'm so lost I don't even know know what would be causing it to hang like this so badly. Any help is greatly appreciated!
Edit: Adding package.json
{
"name": "DMachineWordBank",
"private": true,
"scripts": {
"start": "meteor run",
"test": "meteor test --once --driver-package meteortesting:mocha",
"test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
"visualize": "meteor --production --extra-packages bundle-visualizer"
},
"dependencies": {
"#babel/runtime": "^7.3.4",
"bcrypt": "^3.0.6",
"meteor-node-stubs": "^0.4.1",
"popper.js": "^1.15.0"
},
"meteor": {
"mainModule": {
"client": "client/main.js",
"server": "server/main.js"
},
"testModule": "tests/main.js"
}
}
if you remove bcrpt and ignore the following message does it fix production?
Note: you are using a pure-JavaScript implementation of bcrypt.
While this implementation will work correctly, it is known to be
(STDERR) approximately three times slower than the native implementation.
In order to use the native implementation instead, run
meteor npm install --save bcrypt
in the root directory of your application.

TestCafe integration with cucumber - test cases in github project time out

I have been experimenting with javascript frameworks for test automation and one of them is testCafe. I have been able to set up a simple TestCafe project and run some test cases for my application. However, now, the requirement is to have some kinda BDD support built in it. I looked up a few testCafe-cucumber integration projects on GitHub but I can't get them to run. here are a few that I tried:-
1) https://github.com/rquellh/testcafe-cucumber
- I cloned the repo,
- did npm install,
- run the test cases using "npm test",
- blank browser launches but test doesn't run. I see this error in VS code console:
× Before # features\support\hooks.js:46
Error: function timed out, ensure the promise resolves within 20000 milliseconds
at Timeout._onTimeout (C:\Users\Mo\Desktop\TestCafe\github\testCafeBDD\testcafe-cucumber\node_modules\cucumber\src\user_code_runner.js:61:18)
at ontimeout (timers.js:482:11)
at tryOnTimeout (timers.js:317:5)
at Timer.listOnTimeout (timers.js:277:5)
× After # features\support\hooks.js:60
ReferenceError: testController is not defined
Then I tried another gitHub project namely this one : https://github.com/kiwigrid/gherkin-testcafe
the run command in readme doesn't work for me, it doesn't even recognize the "gherkin-testcafe".
When I run my TestCafe test cases without the cucumber I have this line in my package.json
"scripts": {
"test": "testcafe chrome Tests/ -e --proxy https.proxy.mycompany.com:8000"
},
the proxy is mentioned because I am behind a proxy and without this the browser launches but does not run any test cases. I found this fix on testCafe site
I am guessing(not sure yet) this could be the issue with cucumber integration as well. None of these frameworks work as they don't set up the proxy anywhere. Can someone point me in the right direction? if the proxy needs to be set up then where in the framework does it need to go- an example would be helpful?
TestCafe/Cucumber integrations rely on starting TestCafe runner programmatically.
In the repo, search for this sequence:
const runner = tc.createRunner();
return runner
.src('./test.js')
.screenshots('reports/screenshots/', true)
.browsers(browser)
.run()
.catch(function(error) {
console.error(error);
});
or search for this sequence:
await runner
.browsers(browsers)
.specs(specs)
.steps(steps)
.concurrency(concurrency)
.startApp(app, appInitDelay)
.tags(tags)
.run(...)
Chain the useProxy method on runner object (do it before the run()method):
const runner = tc.createRunner();
return runner
.src('./test.js')
.screenshots('reports/screenshots/', true)
.browsers(browser)
.useProxy('username:password#proxy.mycorp.com')
.run()
.catch(function(error) {
console.error(error);
});

Meteor: how to load different files based on CLI parameter?

In my Meteor (1.2) app I've separated files for development and production
e.g.
client/lib/appVars.config.PROD.js
client/lib/appVars.config.CONFIG.js
Ideally the "twin" files have the same variables, functions etc. with little differences but (global) variables and functions which are common to debug and production have the same name.
Is there a way to call meteor run with a command line parameter DEBUG_MODE = true | false so that I cad load either one or the other file, depending on the current mode (debug, production)?
Set different environmental variables and run via CLI with meteor run --settings settings.json
Then you just need a development and production (and staging?) settings.json
Example of a settings file:
{
"awsBucket": "my-example-staging",
"awsAccessKeyId": "AABBCCddEEff12123131",
"awsSecretKey": "AABBCCddEEff12123131+AABBCCddEEff12123131",
"public": {
"awsBucketUrl": "https://my-meteor-example.s3.amazonaws.com",
"environment": "staging"
},
"googleApiKey": "AABBCCddEEff12123131"
}
EDIT ADD:
To access your environmental keys, just select
Meteor.settings.awsBucket
Security Update (thanks Dave Weldon)
See https://docs.meteor.com/#/full/structuringyourapp
Re production vs development, you should have two settings.json files, the standard one for production (.config/settings.json) and a development one (.config/development/config.json) and when you boot outside of production you boot meteor --settings .config/development/settings.json
Re client side, note that if you make the key public e.g.
{
"service_id":"...",
"service_secret":"...",
"public":{
"service_name":"..."
}
}
Then only Meteor.settings.public.service_name will be accessible on the client

Resources