Skip to content

Commit

Permalink
Use https_proxy environment variable in next/font/google (#46822)
Browse files Browse the repository at this point in the history
When fetching CSS or font files from Google Fonts, it won't work if
you're required to use a proxy. This change makes it look for the
`http(s)_proxy` environment variable, and if it's defined it creates a
fetch agent using
[https-proxy-agent](https://github.com/TooTallNate/node-https-proxy-agent).

Also fixes fetch errors not being properly logged.

Fixes #45034
Closes NEXT-690

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ]
[e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
  • Loading branch information
hanneslund authored Mar 8, 2023
1 parent f99ae5a commit 02eb34d
Show file tree
Hide file tree
Showing 14 changed files with 243 additions and 8 deletions.
4 changes: 3 additions & 1 deletion packages/font/src/google/fetch-css-from-google-fonts.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
// @ts-ignore
import fetch from 'next/dist/compiled/node-fetch'
import { nextFontError } from '../next-font-error'
import { getProxyAgent } from './get-proxy-agent'

/**
* Fetches the CSS containing the @font-face declarations from Google Fonts.
* The fetch has a user agent header with a modern browser to ensure we'll get .woff2 files.
*
* The env variable NEXT_FONT_GOOGLE_MOCKED_RESPONSES may be set containing a path to mocked data.
* It's used to defined mocked data to avoid hitting the Google Fonts API during tests.
* It's used to define mocked data to avoid hitting the Google Fonts API during tests.
*/
export async function fetchCSSFromGoogleFonts(
url: string,
Expand All @@ -32,6 +33,7 @@ export async function fetchCSSFromGoogleFonts(
const controller = new AbortController()
const timeoutId = setTimeout(() => controller.abort(), 3000)
const res = await fetch(url, {
agent: getProxyAgent(),
// Add a timeout in dev
signal: isDev ? controller.signal : undefined,
headers: {
Expand Down
2 changes: 2 additions & 0 deletions packages/font/src/google/fetch-font-file.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
// @ts-ignore
import fetch from 'next/dist/compiled/node-fetch'
import { getProxyAgent } from './get-proxy-agent'

/**
* Fetch the url and return a buffer with the font file.
Expand All @@ -18,6 +19,7 @@ export async function fetchFontFile(url: string, isDev: boolean) {
const controller = new AbortController()
const timeoutId = setTimeout(() => controller.abort(), 3000)
const arrayBuffer = await fetch(url, {
agent: getProxyAgent(),
// Add a timeout in dev
signal: isDev ? controller.signal : undefined,
})
Expand Down
20 changes: 20 additions & 0 deletions packages/font/src/google/get-proxy-agent.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
// @ts-ignore
import HttpsProxyAgent from 'next/dist/compiled/https-proxy-agent'
// @ts-ignore
import HttpProxyAgent from 'next/dist/compiled/http-proxy-agent'
import { Agent } from 'https'

/**
* If the http(s)_proxy environment variables is set, return a proxy agent.
*/
export function getProxyAgent(): Agent | undefined {
const httpsProxy = process.env['https_proxy'] || process.env['HTTPS_PROXY']
if (httpsProxy) {
return new HttpsProxyAgent(httpsProxy)
}

const httpProxy = process.env['http_proxy'] || process.env['HTTP_PROXY']
if (httpProxy) {
return new HttpProxyAgent(httpProxy)
}
}
11 changes: 8 additions & 3 deletions packages/font/src/google/loader.ts
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,10 @@ const nextFontGoogleFontLoader: FontLoader = async ({
// Fetch CSS from Google Fonts or get it from the cache
let fontFaceDeclarations = hasCachedCSS
? cssCache.get(url)
: await fetchCSSFromGoogleFonts(url, fontFamily, isDev).catch(() => null)
: await fetchCSSFromGoogleFonts(url, fontFamily, isDev).catch((err) => {
console.error(err)
return null
})
if (!hasCachedCSS) {
cssCache.set(url, fontFaceDeclarations ?? null)
} else {
Expand All @@ -108,7 +111,10 @@ const nextFontGoogleFontLoader: FontLoader = async ({
// Download the font file or get it from cache
const fontFileBuffer = hasCachedFont
? fontCache.get(googleFontFileUrl)
: await fetchFontFile(googleFontFileUrl, isDev).catch(() => null)
: await fetchFontFile(googleFontFileUrl, isDev).catch((err) => {
console.error(err)
return null
})
if (!hasCachedFont) {
fontCache.set(googleFontFileUrl, fontFileBuffer ?? null)
} else {
Expand Down Expand Up @@ -158,7 +164,6 @@ const nextFontGoogleFontLoader: FontLoader = async ({
} catch (err) {
if (isDev) {
if (isServer) {
console.error(err)
Log.error(
`Failed to download \`${fontFamily}\` from Google Fonts. Using fallback font instead.`
)
Expand Down
2 changes: 2 additions & 0 deletions packages/next/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,9 @@
"glob": "7.1.7",
"gzip-size": "5.1.1",
"http-proxy": "1.18.1",
"http-proxy-agent": "5.0.0",
"https-browserify": "1.0.0",
"https-proxy-agent": "5.0.1",
"icss-utils": "5.1.0",
"ignore-loader": "0.1.2",
"image-size": "1.0.0",
Expand Down
1 change: 1 addition & 0 deletions packages/next/src/compiled/http-proxy-agent/index.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions packages/next/src/compiled/http-proxy-agent/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"name":"http-proxy-agent","main":"index.js","author":"Nathan Rajlich <[email protected]> (http://n8.io/)","license":"MIT"}
1 change: 1 addition & 0 deletions packages/next/src/compiled/https-proxy-agent/index.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions packages/next/src/compiled/https-proxy-agent/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"name":"https-proxy-agent","main":"index.js","author":"Nathan Rajlich <[email protected]> (http://n8.io/)","license":"MIT"}
Loading

0 comments on commit 02eb34d

Please sign in to comment.