Lessons from open-source: Algorithm used to compute error.digest in Next.js
Tags: javascript, opensource, nextjs, react
Published: 2024-04-02 21:18:15

This lesson is picked [Next.js source code](https://github.com/vercel/next.js/blob/canary/packages/next/src/server/app-render/create-error-handler.tsx#L50). In this article, you will learn how [error.digest](https://nextjs.org/docs/app/api-reference/file-conventions/error#errordigest) is computed in Next.js.

Error.digest
------------

The docs says “An automatically generated hash of the error thrown in a Server Component. It can be used to match the corresponding error in server-side logs.”

You match this digest on your server logs. Next.js shows only the digest to prevent sensitive information leaked to the client side.

Do check the following Stackoverflow questions:

1.  [Next.js error in production mode — Digest: 1782794309](https://stackoverflow.com/questions/76305664/next-js-error-in-production-mode-digest-1782794309)
2.  [https://stackoverflow.com/questions/76713709/what-is-a-digest-property](https://stackoverflow.com/questions/76713709/what-is-a-digest-property)

Let’s find out how Next.js automatically generates this hash for an error.

![error.digest](https://media.licdn.com/dms/image/D4E12AQH8z5PmFmJZRw/article-inline_image-shrink_1500_2232/0/1712091442147?e=1717632000&v=beta&t=NPYbMTFWB0BaCQB_4CZu9IEgBcjGh7YjDuuYPz9oHFs)

As you can see from the [above code snippet](https://github.com/vercel/next.js/blob/canary/packages/next/src/server/app-render/create-error-handler.tsx#L50), it uses a function named stringHash which is imported at the top of [create-error-handler.tsx](https://github.com/vercel/next.js/blob/canary/packages/next/src/server/app-render/create-error-handler.tsx#L50)

> [_Practice the exercises based on documentation_](https://tthroo.com/) _to become an expert in Next.js._

```
import stringHash from 'next/dist/compiled/string-hash'
```

Next.js has a quite some packages bundled in a folder named compiled. string-hash is an [npm package](https://www.npmjs.com/package/string-hash).

I checked the string-hash source code.

```
"use strict";

function hash(str) {
  var hash = 5381,
      i    = str.length;

  while(i) {
    hash = (hash \* 33) ^ str.charCodeAt(--i);
  }

  /\* JavaScript does bitwise operations (like XOR, above) on 32-bit signed
   \* integers. Since we want the results to be always positive, convert the
   \* signed int to an unsigned by doing an unsigned bitshift. \*/
  return hash >>> 0;
}

module.exports = hash;
```

The particular algorithm is quite similar to djb2, by Dan Bernstein and is available [here](http://www.cse.yorku.ca/~oz/hash.html).

It has 1.7M downloads per week on NPM. I wish, some day I write some library that gets this many downloads.

Conclusion
----------

This is what Next.js docs say about error.digest — “An automatically generated hash of the error thrown in a Server Component. It can be used to match the corresponding error in server-side logs”.

I looked at the source code to find out that string-hash algorithm is used to automatically generate a hash like below:

```
err.digest = stringHash(
  err.message + (errorInfo?.stack || err.stack || '')
).toString()
```

Further digging led me to discover that string-hash has about 17 lines of code with 1.7 million downloads per week on NPM. I wish, some day I write some library that gets this many downloads. I did write few npm packages that are not so popular.