cocos creator接入sentry

cocos creator接入sentry

有很长时间没有写过东西了，最近闲来无事，随便写点东西
上次写东西仿佛还是大学的时候。。。

毕业之后一直在做幼儿教育类的app,从认字做到数学再到音乐，经历了不少的项目，确实学到了很多东西。

现在市面上的教育类app还是挺多的（小朋友的钱好赚呀。。。）
大部分项目用的都是cocos creator+typescript

啊 不废话了 今天来说说 sentry

sentry是一个前端错误监控系统，实际项目中还是很好用的，实时监控到项目中发生的报错，如果遇到严重的错误，立马热更修复掉，能将影响用户数尽量降到最低。

1.首先是安装

通过docker安装sentry还是很方便的，docker的安装这边就不多做赘述了,直接开搞。。。

需要注意的是，sentry需要服务器至少有2400M的RAM

//克隆sentry
git clone https://github.com/getsentry/onpremise.git
// 进去
cd onpremise
// 安装
./install.sh

然后静静的等待漫长的安装过程。。。

好的完成了
然后就是按照提示创建用户了，

创建完成后运行

docker-compose up -d

安装就完成了

我这边安装在了本地，sentry的默认端口是9000
进去127.0.0.1:9000,应该就能进去sentry的界面了

输入刚刚的账户密码

啊 ～进来了。。。。。。

2.接下来是接进cocos

创建一个node.js项目

接下来按照提示在你的cocos项目中添加sentry的依赖

# Using yarn
yarn add @sentry/node @sentry/tracing

# Using npm
npm install --save @sentry/node @sentry/tracing

3.接下来是报告错误的脚本

当遇到报错的时候sentry会自动将错误上报，同时我们也可以在某些地方自己手动去报错，sentry提供了很多信息的展示，这边我们加上了用户id的展示，可以根据需求自行添加别的信息，也可以将报错做一些处理后再上报，这边仅做一个展示，就不写多余的代码了。：）

class ErrorReport {
    init() {
        Sentry.init({
            dsn: 'http://',
            environment: 'dev',
            tracesSampleRate: 1.0,
        });
        this.trackUser();
        if (cc.sys.isNative && window) {
            console.log('start report');
            // 监听全局报错
            window.__errorHandler = (file: string, line: number, msg: string, stack: string) => {
                try {
                    Sentry.captureException(stack);
                } catch (e) {
                    console.error(`Failed to report error in ErrorAnalytics ${e}`, e.stack);
                }
            };
        }
    }

    /**
     * 跟踪用户信息
     */
    public trackUser() {
        try {
            const id = PlatTs.getUserID();
            const sentryUser: Sentry.User = {
                id: id,
            };
            Sentry.configureScope((scope) => {
                scope.setUser(sentryUser);
            });
        } catch (e) {
            console.error(`Failed to track user in ErrorAnalytics ${e}`, e.stack);
        }
    }

    /**
     * 手动报错
     * @param e
     */
    reportError(e: any) {
        Sentry.captureException(e);
    }
}

export const errorReport = new ErrorReport();

到这里理论上sentry应该已经能接到报错信息了，但是如果项目中用的是typescript可能还是收不到报错信息，一番debug后发现似乎是promise将报错都吞掉了。。。

将promise替换成ts-promise就好了

function replacePromise() {
   local.Promise = tsPromise;
    try {
        tsPromise.onPossiblyUnhandledRejection((promise) => {
            promise.catch((error) => {
                if (error) {
                    return errorReport.reportError(error);
                }
                try {
                    return errorReport.reportError(`Possibly unhandled promise rejection`);
                } catch {	
                	 errorReport.reportError(e);
                }
            });
        });
    } catch (e) {
        errorReport.reportError(e);
    }
}

这样sentry就能正常的收到报错信息了

然鹅

ts-promise会导致sourcemap打包失败。。。

先这样吧= =