Commit graph

8 commits

Author SHA1 Message Date
Jiachi Liu
e117c000e4
Redesign nextjs logging (#54713)
The current logging styles has been existed for a while, this PR gives a fresh impression for the logging output from Next.js.
We want to achieve few new goals that makes the output clean, modernized, sweet 🍫 .

Few goals are addressed with this redesign:

## Refresh Impression & Simplification

The new design of logging is much more information centralized and streamlined.

* Given a `ready` message at the begining when compilers are bootstrapped.
* Only show `compiled` event with green check mark indicating succesful compilation, this will merge the unclear `compiling` event which shows `(client and server)` before, now tell you the route compilation info in one line.

hello world app

### `next dev`

#### After vs Before


<img src="https://github.com/vercel/next.js/assets/4800338/9649b340-8241-4756-a2b3-a989f0b74003" height="120"> 
<img src="https://github.com/vercel/next.js/assets/4800338/ee181263-3dd4-40d0-9ffc-819a56b45900" height="120">  

 


 

### `next build`

#### After vs Before


<img src="https://github.com/vercel/next.js/assets/4800338/5db9829a-9ffc-49f0-b030-93ee92f5c248" width="360"> 
<img src="https://github.com/vercel/next.js/assets/4800338/b9527b83-27c8-4426-9c0d-c0d4072b7d58" width="360">





### error status

#### After vs Before

<img src="https://github.com/vercel/next.js/assets/4800338/00455226-ace7-468b-8d90-0d36bf038489" height="120"> 
<img src="https://github.com/vercel/next.js/assets/4800338/1be8c451-d3f0-465c-9ef7-6b0dde7cff85" height="120"> 



## Streamlization

If you have customized envs and experiments Next.js will give the brief in the early summary about your network information, env vars, and enabled experimental features

<img src="https://github.com/vercel/next.js/assets/4800338/ca1a7409-1532-46cb-850f-687e61e587b2" width="400">


## Polish

### fetching logging structure 

#### After vs Before
<img src="https://github.com/vercel/next.js/assets/4800338/97526397-dffe-4736-88ed-e5cbe5e945bd" width="400">
<img src="https://github.com/vercel/next.js/assets/4800338/ab77c907-5ab5-48bb-8347-6146d2e60932" width="400">


### Dedupe Duplicates

The logging is moved from `@next/env` to `next` itself, `@next/env` will only notify the invoker that the env is reloaded. Then the duplicated logs for the env reloading cases can be avoid.

#### After vs Before
<img src="https://github.com/vercel/next.js/assets/4800338/04799295-e739-4035-87aa-61cec962fc39" width="400">
<img src="https://github.com/vercel/next.js/assets/4800338/e29020c9-0031-4bf3-a21b-8b64633f43a2" width="400"> 


### Different indicators

Use unicode text icons for different situation: 
* passed -> check mark
* warning -> warning
* error -> red cross
* loading -> circle

<img src="https://github.com/vercel/next.js/assets/4800338/715c34bd-298f-4990-a5d7-e12e455ead44" width="400">



Co-authored-by: Tim Neutkens <6324199+timneutkens@users.noreply.github.com>
2023-09-05 11:40:00 +00:00
Tim Neutkens
dd937bde09
Remove edge functions tracking in dev server (#51122)
## What?

While looking at the CPU profile of booting up Vercel's site I noticed
that we call `getPageStaticInfo` a lot. Looking into this more it turns
out `getPageStaticInfo` is currently called for all routes, `pages` and
`app`, even though the data is only being used to keep track of which
routes are edge functions, however, this is already tracked as part of
the build output so this didn't make sense to me. First I tried
commenting out this entire block and all tests were passing, so I
removed it except for middleware as middleware can provide a `matcher`
which does need to be known before compiling the file as of right now.

After that change a different set of tests started failing, specifically
the one that checks if we warn correctly. Interestingly by fixing
`getPageStaticInfo` being called early and for all routes it also caused
these warnings to no longer trigger as there was a case in the manifest
plugin that called `getPageStaticInfo` with less information. Calling
`getPageStaticInfo` there was not needed either as we call
`getPageStaticInfo` at the beginning of the build for each entrypoint so
we already have the information required, it just had to be passed down
so that the manifest plugin could use it.

For Vercel's site this change improves booting the dev server by over 1
second.

Related to #48748

<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:

## For Contributors

### Improving Documentation

- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide

### Adding or Updating Examples

- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

### Fixing a bug

- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

### Adding a feature

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



## For Maintainers

- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Closes NEXT-
Fixes #

-->

---------

Co-authored-by: Jiachi Liu <inbox@huozhi.im>
2023-06-14 13:17:16 +02:00
JJ Kasper
30f84e31b4
Update dev logs to include request timings (#49191)
This updates our dev logs to include request timings and also includes
fetch timings in app directory to including info on whether the cache
was leveraged or not allowing easier debugging of contributing factors
to render times. In the future we can expand to include middleware
timings separate as well to single that out along with timings for
`getStaticProps` potentially as well.


<details>

<summary>Screenshot</summary>

![CleanShot 2023-05-04 at 00 13
19@2x](https://user-images.githubusercontent.com/22380829/236135624-da1d873b-5abf-42d0-9708-8e20d1c56cef.png)

</details>

<details>

<summary>Screenshot</summary>

![CleanShot 2023-05-04 at 00 13
32@2x](https://user-images.githubusercontent.com/22380829/236135642-bc974b82-13e0-47f0-8be5-581d92077fc1.png)

</details>

<details>

<summary>Screenshot</summary>

![CleanShot 2023-05-04 at 00 13
47@2x](https://user-images.githubusercontent.com/22380829/236135664-5b2975ce-fa78-40d5-b320-d42d35b17541.png)

</details>

x-ref: [slack
thread](https://vercel.slack.com/archives/C042LHPJ1NX/p1681418590738249)
2023-05-04 12:33:03 -07:00
Damien Simonin Feugas
e8ae4e219e
fix(#44077): allow edge runtime for api routes inside src/ folder (#45093)
fixes: https://github.com/vercel/next.js/issues/44382
closes: https://github.com/vercel/next.js/pull/44882
closes: https://github.com/vercel/next.js/pull/44383
2023-01-20 11:04:27 -08:00
JJ Kasper
4dfe831bbb
Add project directory rename/remove handling (#44911) 2023-01-18 14:37:40 -08:00
Damien Simonin Feugas
3c87e1b52a
chore: improves console warnings related to edge runtime (#44563)
## 📖 What's in there?

With Edge Function GA for API Routes, it would make sense to suggest
developer to change their runtime key from `experimental-edge` to
`edge`.

Current behavior is:
1. when using `experimental-edge` in API route: 
> prints a warning _once:_ `warn - You are using an experimental edge
runtime, the API might change.`
   
1. when using `experimental-edge` in pages:
> prints a warning _once:_ `warn - You are using an experimental edge
runtime, the API might change. `
   
1. when using `edge` in pages:
> throws an error _for each page_: `error - Page /xyz provided runtime
'edge', the edge runtime for rendering is currently experimental. Use
runtime 'experimental-edge' instead.`

This PR adjust case # 1 to indicates which API file is using
`experimental-edge` (a warning per page), and suggest to migrate:
`warn - /pages/api/xyz provided runtime 'experimental-edge'. It can be
updated to 'edge' instead.`

- [x] Integration tests added

## 🧪 How to test?

Besides running e2e tests with `NEXT_TEST_MODE=dev pnpm testheadless
--testPathPattern edge-configurable-runtime`, you can create a test app
in `examples` folder:
```jsx
// examples/edge-warnings/pages/api/edge.js
export default () => new Response('ok')
export const config = { runtime: 'experimental-edge' }

// examples/edge-warnings/pages/index.jsx
export default () => <p>hello world</p>
export const runtime = 'experimental-edge'
```

Build next.js then run with `pnpm next dev examples/edge-warnings`.

You can try adding more pages with `experimental-edge` runtime (will not
produce more warnings), adding more API with `experimental-edge` (will
produce new warnings), or change page runtime to `edge` (will produce
errors).
2023-01-06 11:28:51 -08:00
Damien Simonin Feugas
c2229a3a40
chore: addresses leftover from #44045 (#44080)
## 📖 What's in there?

Yesterday we didn't had time to address leftovers from #44045.
Here it is.

- [ ] 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 (from [PR
43814](https://github.com/vercel/next.js/pull/43814))
- [ ] 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)

## 🧪  How to test?

Several tests cases added:
- in dev mode, errors and warning: `NEXT_TEST_MODE=dev pnpm testheadless
--testPathPattern edge-configurable-runtime`
- in build mode, build error for pages on the `edge`:
`NEXT_TEST_MODE=start pnpm testheadless --testPathPattern
edge-configurable-runtime`

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2023-01-03 13:18:14 -08:00
Damien Simonin Feugas
35f1a3501a
feat: enables 'edge' as a possible runtime for API routes (#44045) 2022-12-15 10:08:03 +01:00